js高级技巧笔记(一)

• 安全的类型检测

Js的类型检测机制并非完全可靠,发生错误否定及错误肯定的情况也不少:

在safari 在对正则表达式应用typeof操作符时返回”function”,因此很难确定某个值到底是不是函数

Instanceof在包含多个框架的时候出现错误.

解决上述问题的办法都一样,在任何值上调用Object原生的toString方法,都会返回一个[object NativeConstructorName]格式的字符串,每个类内部都有一个[[Class]]属性,这个属性中就指定了上述字符串中的构造函数,例如

alert(Object.prototype.toString.call(value));//”[object Array]”

同样,也可以基于这一思路来测试某个值是不是原生函数或正则表达式:

function isFunction(value){

    return Object.prototype.toString.call(value)==”[object Function]”;

}

function isRegExp(value){

    return Object.prototype.toString.call(value)==”[object RegExp]”;

}

不过要注意,对应在ie中以COM对象形式实现的任何函数,isFunction()都将返回false

• 作用域安全

在js在自定义对象的构造函数的定义和用法是这样:

function Person(name,age,job){
      this.name=name;
      this.age=age;
      this.job=job;
}
var person=new Person(“Nicholas”,29,”Software Engineer”);

上面的例子如果不用new,着this将会指向window对象,导致全局变量的污染,而且之前在一个大神的博客中提到,其实全局变量的性能消耗要比局部变量的性能消耗相对要大,他得出这个结论的论据是,js中有作用域(也叫执行环境)的概念,函数在查找里面的变量时候先会查找局部变量(即当前函数作用域)当找不到的时候在去找上一级的作用域以此类推直到window全局作用域,尽量声明局部变量可以避免这样逐级找的性能消耗.

解决上面可能污染全局变量的风险的方法如下:

function Person(name,age,job){
       if(this instanceof Person){
           this.name=name;
           this.age=age;
           this.job=job;
       }else{
          return new Person(name,age,job);
       }
}
var person1=Person(“Nicholas”,29,”Software Rnginneer”);
alert(window.name);//””
alert(person1.name);//”Nicholas”
var person2=new Person(“shelby”,34,”Ergonnmist”);
alert(person2.name);

这样就不会有污染全局变量的风险,当然这只是简单的封装,在jQuery源码中有更为复杂全面的封装,这里就不做说明,明年肯定要话半年的时间看jQuery源码,可能最多只能学到jQuery里面的皮毛.

• 惰性载入函数

因为浏览器之间的行为的差异,多数JavaScript代码都包含大量的if语句,将执行引导到正确的代码中,看看下面代码:

function createXHR(){
   if(typeof XMLHttpRequest!=”undefined”){
     return new XMLHttpRequest();
   }else if(typeof ActiveXObject !=”undefined”){
     if(typeof arguments.callee.activeXString!=”string”){
      var versions=[“MSXML2.XMLHttp.6.0”,”MSXML2.XMLHttp.3.0”,”MSXL2.XMLHttp”],i,len;
      for(i=0,len=versions.length;i<len;i++){
       try{
           new ActiveXObject(versions[i]);
           Arguments.callee.activeXString=versions[i];
          }catch(ex){

          }
         }
      }
      return new ActiveXObject(arguments.caller.activeXString);
   }else{
     throw new Error(“No XHR object available”)
   }
}

每次调用这个方法的时候,它都要对浏览器所支持的能力仔细检查,首先检查内置的XHR,然后测试有没有基于ActiveX的XHR,最后如果都没有发现的话就抛出一个错误,每次调用该函数都是这样,所以如果if语句不必每次执行,俺么代码的可以运行的更快一些,可以用惰性载入来解决.

creatrXHR().

function createXHR(){
 if(typeof XMLHttpRequest!=”undefined”){
 createXHR=function(){
  return new XMLHttpRequest();
 }
 }else if(typeof ActiveXObject !=”undefined”){
  createXHR=function(){
     if(typeof arguments.callee.activeXString !=”string”){
      var versions=[“MSXNL2.XMLHttp.6.0”,”MSXNL2.XNLHttp.3.0”,”MSXML2.XNLHttp”],i,len;

      for(i=0,len=versions.length;i<len;i++){
        try{
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString=versions[i];
          break;
        }catch(ex){

        }
      }
   }
    return new ActiveXObject(arguments.callee.activeXString);
  }
}
else{
createXHR=function(){
  Throw new Error(“No XHR object available”);
}
  }
return createXHR();

}

在这个懒性载入的creaXHR中,if语句的每一个分支都会为creaXHR变量赋值,有效覆盖了原有的函数,最后一步便是调用新赋值的函数

第二种实现懒性载入的方式是在声明函数时就指定适当的函数,这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点性能.

var createXHR=(function(){
   if(typeof XMLHttpRequest !=”undefined”){
         return funciton(){
             return new XMLHttpRequest();
          }
   }else if(typeof ActiveXObject !=”undefined”){
     return funciton(){
     if(typeof arguments.callee.activeXString !=”string”){
       var  versions=[“MSXML2.XMLHttp.6.0”,”MSXML2.XMLHttp.3.0”,”MSXML2.XMLHttp”],i,len;

       for(i=0,len=versions.length;i<len;i++){
         try{
           new ActiveXObject(versions[i]);
           arguments.callee.activeXString=versions[i];
           break;
          }catch(ex){

          }
        }
      }
        return new ActiveXObject(arguments.callee.activeXString);
     };
   }else{
      return function(){
           throw new Brror(“No XHR object available”);
      }
   }
})()

• 函数绑定

函数绑定就是用this来保留函数的代码执行环境.例如:

var handler={
  message:”Event handled”,
  handleClick:funcion(event){
      alert(this.message);
  }
};

var btn=document.getElementById(“my-btn”);

EventUtil.addHandler(btn,”click”,function(event){
   handler.handleClick(event);
});

这里用了闭包,因为单击事件的函数this会指向dom对象,加个闭包就保留函数原本的this对象.es5中有个原生的bind方法来绑定this.

• 函数柯里化

函数柯里化的基本方法和函数绑定是一样的:使用一个闭包返回一个函数.两者的区别在于,但函数被调用时,返回的函数还需要设置一些传入的参数.

柯里化通用方式如下:

function curry(fn){

  var args=Array.prototype.slice.call(arguments,1);//注意这里是将非第一个的参数转换为数组,因为arguments本身不是数值只是用法很像数组

  return function(){
   var innerArgs=Array.prototype.slice.call(arguments);
   var finalArgs=args.concat(innerArgs);//将参数合并
    return fn.apply(null,finalArgs);
  }
}

这只是简单的柯里化,下面是柯里化实际应用代码:

function bind(fn,context){
 var args=Array.prototype.slice.call(arguments);
 return function(){
var innerArgs=Array.prototype.slice.call(arguments);
var finalArgs=args.concat(innerArgs);
return fn.apply(context,finalArgs);
 }
}
var handler={
   message:”Event handled”,
   bandleClick:function(name,event){
    alert(this.message+”:”+name+”;”+event.type);
   }
};
var btn=document.getElementById(“my-btn”);
EventUtil.addHandler(btn,”click”,bind(handler.handleClick,handler,”my-btn”));

Es5的bind方法也能实现函数的柯里化,只要在this的值之后再传入另一个参数即可.例如:

var handler={
  message:”Event handled”,
  handleClick:function(name,event){
      alert(this.message+”:”+name+”:”+event.type);
  }
};
var btn=doucument.getElementById(“my-btn”);
EventUtil.addHandler(btn,”click”,hander.handlerClick.bind(handler,”my-btn”));

另外柯里化不太适合在项目功能层使用,第一使用不当容易造成内存泄漏,第二功能层是业务功能实现层,这层在后期维护,系统优化改动是最大的,所以业务层必须要保证代码的可读性,代码注释齐全,复杂的函数回调尽量少用,而在基础封装层也就是通用基础功能封装层可以用这种代码,第一这层改动比较少,第二代码复杂,第三要保证用的人简单,这层一般是组长级别的来维护.

• 防篡改对象

1.不可扩展对象

Es5提供对改变属性的行为,使用Object.preventExtensions()方法可以让指定的对象不能添加属性.例如:

var person={name:”Nicholas”};
Object.preventExtensions(person);
person.age=29;
alert(person.age);//undefined

可以用Object.isExtensible()方法来判断对象是否可以扩展.例如:

var person={name:”Nicholas”};
alert(Object.isExtensible(person));//true

Object.preventExtensions(person);
alert(Object.isExtensible(person));//false

2.密封的对象

Es5可以通过Object.seal方法将对象设置为密封对象,不能添加也不能删除属性,例如:

var person={name:”Nicholas”};
Object.seal(person);

person.age=29;
alert(person.age);//undefined

delete person.name;
alert(person.name)//”Nicholas”

用Object.isSealed()方法可以确定对象是否被密封,例如:

var person={name:”Nicholas”};
alert(Object.isExtensible(person));//true
alert(Object.isSealed(person));//false

Object.seal(person);
alert(Object.isExtensible(person));//false
alert(Object.isSealed(person));//true

3．冻结的对象

Es5可以用object.freeze冻结对象

Object.isFrozen方法用于检测冻结对象