javascript 高级技巧详解

函数的使用技巧

javascript内置的类型检测机制并非完全可靠。在Object.prototype.toString()方法没有被修改的前提下，可以使用下面的安全检测方法检测是不是原生的：

function isArray(value){

return 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]";

}

这个技巧可以对任何对象给出正确结论

作用域安全的构造函数

一般的构造函数都要使用new操作符来调用，但是有时可能会忘记这个函数是不是构造函数，这样会产生错误。为了避免这种错误，要像下面这样进行设计构造函数：

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);

}

}

这样做的好处是调用它无论是否使用new操作符，都会返回一个Person的新实例，避免了在全局对象上意外设置属性。

除非你单纯基于构造函数窃取来实现继承，推荐作用域安全的构造函数作为最佳实践。

惰性载入函数

下面看一个更改的示例：

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=["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){

  //skip;

}   

   }

    }

return new ActiveXObject(arguments.callee.activeXString);

                    };

   }else{

                     createXHR=function(){

     throw new Error("No XHR object available.");

                       };    

   }

             return createXHR();  

} 

这样的话只会在函数的第一次执行时损失性能，以后执行就不会了。考虑到这个函数是基于浏览器的，这样修改会变得棒极了！

另一种方式就是把每一部分都变成一个函数，作为返回值返回。这两种之间的区别非常的微妙。

函数的绑定

函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码的执行环境。由于代码之中存在着this变量，而this在当前环境下指向确定的对象，但是当更改代码的执行环境时，就会出现问题了。为了解决这个问题，javascript函数库中实现了一个bind()函数来解决这个问题。

一个简单的bind()函数接收一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。语法如下：

function bind(fn,context){

   return function(){

   return fn.apply(context,arguments);   

   }

}

注意这里使用的arguments并不是bind()的，是内部函数的。

var handler={

    message:"Event handled",

handleClick:function(event){

  alert( this.message);

}

};

var btn=document.getElementById("my-btn");

EventUtil.addHandler(btn,"click",bind(handler.handleClick,handler));

ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简化了操作。

var handler={

    message:"Event handled",

handleClick:function(event){

  alert(this.message);

}

};

var btn=document.getElementById("my-btn");

EventUtil.addHandler(btn,"click", handler.handleClick.bind(handler));

它们主要用于事件处理程序以及setTimeout()和setInterval()。然而被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一些，所以最好只在必要时使用。

函数柯里化

它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法是：使用一个闭包返回一个函数。当函数被调用时，返回的函数还需要设置一些传入的参数。

柯里化函数通常由以下步骤动态的创建：调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式：

function curry(fn){

    var args=Array.prototype.slice.call(arguments,1);

return function(){

   var innerArgs=Array.prototype.slice.call(arguments);

   var finalArgs=args.concat(innerArgs);

   return fn.apply(null,finalArgs);

}

}

这种变化也需要额外的开销

防篡改对象

javascript共享的本质一直是一件很头疼的事。但是ECMAScript5解决了这个问题。增加了几个方法，可以指定对象的行为。但是一旦把对象定义为防篡改就无法撤销了。

不可扩展可以使用这个方法：Object.preventExtensions(obj);

一旦设置防扩展，对象就无法添加新的属性和方法。已有的属性方法不受影响，这些属性方法仍然可以修改和删除。

密封对象可以使用方法：Object.seal(obj);

一旦设置密封对象，不可以进行扩展，已有属性和方法不可以删除，但是属性值是可以修改的。

冻结对象可以使用方法：Object.freeze(obj);

一旦设置冻结对象，既不可以扩展，又是密封的，只有通过访问器的set函数才可以修改属性值，其他情况下不允许修改。

Object.isExtensible(obj);//检测是否可扩展

Object.isSealed(obj);//检测是否封闭的

ObjectisFrozen(obj);//检测是否是冻结的

高级定时器

为了解决setInterval的一些执行问题，下面是采用链式setTimeout的方式来规避：

setTimeout(function(){

// add code here

setTimeout(arguments.callee,interval);

},interval);

Yielding Processes

脚本长时间运行的原因：过长的、过深嵌套的函数调用；进行大量的处理循环。

在展开循环之前，你需要考虑两个重要的问题：

1：该出事是否必须同步完成？

2：数据是否必须按顺序完成？

当你发现有些循环占用大量的事件，同时对上述两个问题答案都是否，那么可以使用定时器来分隔这个循环。

setTimeout(function(){

//取出下一个条目处理

var item=array.shift();

process(item);

//还有条目，再设置一个定时器

if(array.length>0){

setTimeout(arguments.callee,interval);

}

},interval);

函数节流

对一些持续不断触发的事件，如果建立的事件处理程序不够好的话，会导致浏览器崩溃或者其他的事故。为了规避这个问题，可以使用定时器对事件处理程序进行节流。

函数节流背后的基本思想是：一些代码不可以在没有间断的情况下连续重复执行。具体做法是：第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数时，它会清除前一次的定时器，并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的就是执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式：

var processor={

     timeoutId:null,

 

 performProcessing:function(){

   //实际执行的处理程序

},

 process:function(){

   clearTimeout(this.timeoutId);

   var that=this;

   this.timeoutId=setTimeout(function(){

that.performProcessing();   

  },1000);

 }

};

processor.process();//尝试开始执行

只要代码是周期性执行的，都应该用节流。处理的速率根据需求设置，上面的例子是1000毫秒。

自定义事件

事件的模式是采用观察者模式建立的。下面是一段自定义事件的代码示例，注意观察和体会：

function EventTarget(){

     this.handlers={};

}

EventTarget.prototype={

   constructor:EventTarget,

   addHandler:function(type,handler){

       if(typeof this.handlers[type]=="undefined"){

    this.handlers[type]=[];   

   }

   this.handlers[type].push(handler);

   },

   removeHandler:function(type,handler){

       if(this.handlers[type] instanceof Array){

  var handlers=this.handlers[type];

  for(var i=0,len=handlers.length;i<len;i++){

if(handlers[i]===handler)break;  

  }

  handlers.splice(i,1);

   }

   },

   fire:function(event){

      if(!event.target)event.target=this;

  if(this.handlers[event.type] instanceof Array){

  var handlers=this.handlers[event.type];

  for(var i=0,len=handlers.length;i<len;i++){

  if(handlers[i]===handler)break;  

  }

   }

   }    

}

当其他的节点继承EventTarget的时候，它也会有上面的事件行为了。

拖放

这是一个非常流行的自定义事件。非常不客气的说，如果你不会，你就不要说自己学过自定义事件。

var DragDrop=function(){

    var dragging=null;

function handleEvent(event){

    var event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

switch(event.type){

    case "mousedown":     if(target.className.indexOf("draggable")>-1){

                      dragging=target;  

   }

   break;

case  "mousemove":     if(dragging!=null){

                      dragging.style.left=event.clientX+"px";

  dragging.style.top=event.clientY+"px";

   }

   break;

    case   "mouseup":      dragging=null;

                       break; 

}

};

return {

  enable:function(){

     EventUtil.addHandler(document,"mousedown",handleEvent);

 EventUtil.addHandler(document,"mousemove",handleEvent);

 EventUtil.addHandler(document,"mouseup",handleEvent);

  },

   disable:function(){

     EventUtil.removeHandler(document,"mousedown",handleEvent);

 EventUtil.removeHandler(document,"mousemove",handleEvent);

 EventUtil.removeHandler(document,"mouseup",handleEvent);

   }   

}

}

注意元素被拖放，他必须是绝对定位。

<div class="draggable" style="position:absolute;background:red"/>

但是使用之后会发现一些瑕疵，我们可以做一些进一步的修改

var DragDrop=function(){

    var dragging=null,diffX=0,diffY=0;

function handleEvent(event){

    var event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

switch(event.type){

    case "mousedown":     if(target.className.indexOf("draggable")>-1){

                      dragging=target; 

  diffX=event.clientX-target.offsetLeft;

  diffY=event.clientY-target.offsetTop;

   }

   break;

case  "mousemove":     if(dragging!=null){

                      dragging.style.left=(event.clientX-diffX)+"px";

  dragging.style.top=(event.clientY-diffY)+"px";

   }

   break;

    case   "mouseup":      dragging=null;

                       break; 

}

};

return {

  enable:function(){

     EventUtil.addHandler(document,"mousedown",handleEvent);

 EventUtil.addHandler(document,"mousemove",handleEvent);

 EventUtil.addHandler(document,"mouseup",handleEvent);

  },

   disable:function(){

     EventUtil.removeHandler(document,"mousedown",handleEvent);

 EventUtil.removeHandler(document,"mousemove",handleEvent);

 EventUtil.removeHandler(document,"mouseup",handleEvent);

   }   

}

}

这时需要提供一些触发的自定义事件了

var DragDrop=function(){

    var dragdrop=new EventTarget(),dragging=null,diffX=0,diffY=0;

function handleEvent(event){

    var event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

switch(event.type){

    case "mousedown":     if(target.className.indexOf("draggable")>-1){

                      dragging=target; 

  diffX=event.clientX-target.offsetLeft;

  diffY=event.clientY-target.offsetTop;

  dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});

   }

   break;

case  "mousemove":     if(dragging!=null){

                      dragging.style.left=(event.clientX-diffX)+"px";

  dragging.style.top=(event.clientY-diffY)+"px";

  dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});

   }

   break;

    case   "mouseup":      dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});

                       dragging=null;

                       break; 

}

};

  dragdrop.enable:function(){

 EventUtil.addHandler(document,"mousedown",handleEvent);

 EventUtil.addHandler(document,"mousemove",handleEvent);

 EventUtil.addHandler(document,"mouseup",handleEvent);

  };

   dragdrop.disable:function(){

 EventUtil.removeHandler(document,"mousedown",handleEvent);

 EventUtil.removeHandler(document,"mousemove",handleEvent);

 EventUtil.removeHandler(document,"mouseup",handleEvent);

   };

return dragdrop;    

}

还可以为switch里面的事件处理程序添加更多变化的事件处理程序，这样自定义拖放事件就做好了