javascript读书随笔 1

1.1 jQuery 的 noConflict

 1 var _jQuery=window.jQuery  //window.jQuery可能是别的库的变量名，先用jQuery对象中的临时变量存下来---var _jQuery
 2 _$=window.$  //同上
 3 jQuery.extend({
 4     noConflict:function(deep){
 5         window.$=_$;
 6         if(deep){    //如果jQuery是需要深度让出全局变量名时，将noConflict函数传入一个参数，只要参数显示为true就将全局jQuery也放弃
 7             window.jQuery=_jQuery;  //给回原先的占有该变量的值
 8             return jQuery
 9         }
10     }
11 })

1.2 对象扩展

 1 function mix(target,source){
 2     var args=[].slice.call(arguments),  //将类数组对象argument转换成数组
 3     i=1,key,
 4     ride=typeof args[args.length-1] =="boolean" ?args.pop():true;  //typeof 首先判断它是否为boolean类型，如果是就将最后一个参数返回，如果不是就返回true，默认为覆盖同名参数
 5     if(args.length===1){   //上一步已经将是否覆盖同名布尔参数去除，如果剩下的只有一个参数时
 6        target= !this.window ? this : {}; //如果现在是在全局作用域下，就返回this---window对象；如果不是就返回一个空对象以接下来接受剩余一个参数的属性
 7        i=0;
 8     }
 9     while((source=args[i++])){  //将剩下的参数一个一个属性复制给target
10        for(key in source){
11           if(ride||!(key in target)){
12               target[key]=source[key];
13             }
14         }
15     }
16     return target;
17 }

1.3数组化

在浏览器中存在许多类数组对象 function.arguments,doucument.forms,form.elements,doucument.links等，有些库都存在一些数组化的函数

 1 var makeArray =function(array){
 2     var ret =[];
 3     if(array!=null){
 4        var i =array.length;  //获取array中的length属性，如果length属性为空，说明它不是类数组
 5        //window,String,function都有length属性，String为字符串长度，function为默认参数个数；array.setInterval判断是否array为window对象，虽然这不是最佳方式。
 6        if(i==null ||typeof array=== "string" || jQuery.isFunction(array)||array.setInterval)
 7            ret[0]=array; //保证发挥的是数组
 8        else
 9            while(i)
10                ret[--i]=array[i];
11     }
12     return ret;
13 }

1.4 类型判断

jQuery的type函数，通常判定一个函数类型的时候都运用toString函数

 1 class2type{}
 2 //将有可能的几种除了对象的类型放入一个class2type的对象中
 3 jQuery.each("Boolean Number String Function Array Date RegExpObject".split(" "),
 4 function(i,name){
 5     class2type["[object"+name+"]"] = name.toLowerCase();
 6 });
 7 jQuery.type=function(obj){
 8     return obj==null?  //如果obj==null 因为NULL没有tostring方法，所以就直接调用String函数，
 9     String(obj) :
10     class2type[toString.call(obj)]|| "object";//如果调用tostring 为上面所写的对象属性返回相应的值，否则认为为objec
11 }

1.5 domReady实现

window.ready=fn,这条语句是当所有资源已经完成，开始执行fn函数。

在jQuery中运用$.(fn)可以多次使用，都会依次执行，且是当dom树构建完成时。

判断dom树是否完成可以有四种方法

（1）W3C中有一个DOMContentLoaded事件，监听这个函数执行函数，现在有许多浏览器都支持

（2）对于ie可以用Diego Perini的hack

 1 (function (){
 2     try{
 3        document.documentElement.doScroll(‘left‘);//如果报错，说明还未执行完毕
 4     }
 5     catch (e){
 6        setTimeout(arguments.callee,50);//50毫秒后重新执行函数
 7        return;
 8     }
 9     fireReady(); //要执行的函数
10 })();

（3）对于ie还可以用script defer hack进行判定，但这不推荐，要加多有的script

1 document.write("<script id=_ie_onload defer src=//0><\/scr"+"ipt>");
2 script=document.getElementById("_ie_onload");
3 script.onreadystatechange=function(){ //ie即使是死链也能触发事件
4     if(this.readyState=="complete"){
5         fireready();//指定defer的script会在DOM树建完才触发
6     }
7 }

（4）对于在firefox3.6之前可以用 判断document.documentElement是否为true来触发，和上面第二方法类似，不为true继续用setTimeout来循环调用判断