js高阶编程之---单例模式,XHR兼容 (惰性思想)

高级js编程,惰性思想:能做一次的,就不会做多次.

项目中的单例模式(惰性思想_案例1)

var utils =(function(){
          // 这就最简单的惰性思想运用,由于下面我很多方法都会来判断是否兼容ie6~8; 
          //所以第一次自执行函数的时候就做了判断,
          var flag = 'getComputedStyle' in window; //->如果为ture表示是标准浏览器,如果是false表示未ie6~8
          
          function getCss(attr){
          var val = null,reg =null;
            if(flag){
            //如果是标准浏览器
            val = window.getComputedStyle(this,null)[attr];
 
            }else{
            // 如果是ie6-8
            
            //特殊处理一下  模糊度
            if(attr==='opacity'){
                val = this.currentStyle['filter'];
                reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/;
                val  = reg.test(val)?reg.exec(val)[1]/100:1;
             }else{
                val =this.currentStyle[attr];
             }
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/;
            return reg.test(val)?parseFloat(val):val;
            };
            
            
            
        return {
           getCss:getCss
         }
         }
   )();
   
   // 方法调用
   utils.getCSS.call(curEle,'width');

惰性思想_案例2

把复杂的方法改写成小方法,在同一个环境中执行,就执行小方法就可以了.

// 创建Ajax对象,兼容所有浏览器

function creatXHR(){
    var xhr =null,
    flag = false,
    ary = [
    function(){
        return new XMLHttpRequest;
     },
    function(){
        return new ActiveXObject('Microsoft.XMLHTTP');
     },
     function(){
       return new ActiveXObject('Msxml2.XMLHTTP');
     },
     function(){
        return new ActiveXObject('Msxml3.XMLHTTP');
     }
    
    ];
    
    for(var i=0,len=ary.length;i<len;i++){
     var curFn =ary[i]
     try{
     // ->本次循环获取的方法执行没有出现错误,说明此方法是我想要的,我们下一次执行这个小方法即可,这就需要我们把creatXHR重写为小方法(完成后就打断循环)
      xhr = curFn();
      creatXHR = curFn;
      flag =true;
      break;
     }catch(e){
     //-> 本次循环获取的方法执行出现错误,继续执行下次循环
     }
    }
    if(!flag){
     throw new Error("your browser is not support Ajax , please change your browser ,then try again.")
    }
    
    return xhr

 }