javascript框架設(shè)計讀書筆記之種子模塊

更新時間：2014年12月02日 16:06:25 投稿：hebedich

本文是司徒正美的《javascript框架設(shè)計》一書第一章種子模塊的讀書筆記，記錄了一下自認為比較重要的東西，分享給大家

1.命名空間：

　　js里面的命名空間就是使用對象的屬性來擴展的。比如，用戶定義一個A對象，A對象下面有B屬性和C屬性，同時B屬性和C屬性又是對象。因此A={B:{},C:{}}，這時用戶就可以在B對象和C對象中定義一樣的方法，屬性了。因此B和C就屬于不同的命名空間。我們調(diào)用B，C對象里面的方法，就可以通過A.B.like()，A.C.like()調(diào)用了。當然A屬于window對象中的屬性。

　　但是有一種情況，比如:boke.jsp頁面引入了jquery.js以及prototype.js（他們都會在window對象中添加$屬性），這時就出現(xiàn)了沖突的情況。

　　因此jquery.js里面就有了noConflict()處理沖突。執(zhí)行流程：頁面首先引入prototype，這時prototype會占有window的$屬性，然后再引入jquery時，jquery會把之前window的$屬性存放在_$中，然后自己使用$屬性。這時，你可以通過$調(diào)用jquery的方法。當你現(xiàn)在不需要使用jquery而想使用prototype時，就可以調(diào)用$.noConflict(),這時$就會恢復成prototype對象。這時你就可以通過$使用prototype方法了。

復制代碼代碼如下:

　　var _$ =  window.$，_jQuery= window.jQuery；

　　noConflict:function(deep){

         　　window.$ = _$;

　　   　　if(deep)  window.jQuery = _jQuery;

        　　return jQuery;    //返回值，你可以賦值給其他變量名，比如，chaojidan,這樣你就可以通過chaojidan調(diào)用jQuery中的方法了。

　　}

2.對象擴展：

　　命名空間對象有了，那我們需要擴展功能。比如：我需要把A對象的屬性和方法全部復制到B對象中。我不用一個一個在B對象中去寫代碼。

復制代碼代碼如下:

function mix(target , source){

    var args =  [].slice.call(arguments),i=1,

         isCover = typeof args[args.length-1] =="boolean" ? args.pop():true;  //不寫，默認為true,默認是覆蓋。

   if(args.length == 1){                                      

　　target = !this.window? this:{};

　　//如果只有一個對象參數(shù)時，就擴展this對象。比如：我在A對象的context中調(diào)用mix(B)，那么這時的this就是A，因此會把B的屬性和方法添加到A對象中。但是如果是在window中調(diào)用mix(B)，就會把B對象中的屬性和方法添加到一個空的對象中，并返回這個空的對象，以防覆蓋window對象中同名的屬性和方法。（只有window對象擁有window屬性）

      i =0;

　}

　while((source = args[i++])){

　　　　for(key in source){

                      if(isCover || !(key in target))   //如果覆蓋，就直接賦值，如果不覆蓋，先判斷key是否存在目標對象中，如果存在，就不賦值

　　　　　　   {

　　　　　　　　　　target[key] = source[key];

                      }

           }

   }

   return target;

}

　　大公司面試官很喜歡問數(shù)組的查重，大家可以去看看，數(shù)組中的每項可以是對象，而對象A和對象B即便一樣的屬性和方法，但是也是不相等的。字符串和數(shù)字，比如123和"123"等，網(wǎng)上一搜，就能找到很全的方法。

3.數(shù)組化：

　　瀏覽器下有很多類數(shù)組對象，arguments,document.forms,document.links，form.elements,document.getElementsByTagName，childNodes等（HTMLCollection,NodeList）。

還有一種特殊寫法的自定義對象

復制代碼代碼如下:

var arrayLike = {

       0:"a",

       1:"b",

      length:2

}

此對象寫法，就是jQuery對象的寫法。

我們需要把上述的類數(shù)組對象轉(zhuǎn)換成數(shù)組對象。

[].slice.call方法可以解決。但是舊版本IE下的HTMLCollection,NodeList不是Object的子類，不能使用[].slice.call方法。

因此我們可以重寫一個slice方法。

復制代碼代碼如下:

A.slice = window.dispatchEvent  ? function(nodes,start,end){   return [].slice.call(nodes，start,end);      }

//如果window有dispatchEvent  屬性就證明支持[].slice.call方法，能力檢測。

                 :function(nodes,start,end){

                       var ret = [],n=nodes.length;

　　　　　　　　if(end == undefined  ||  typeof end === "number"  && isFinite(end)){   //&&優(yōu)先級高于||，因此end沒寫，或者end是有限數(shù)字就進入

                                start = parseInt(start,10)  || 0;   //如果start不存在或者不是數(shù)字，則就賦值為0.

                                end = end == undefined ? n:parseInt(end,10);    //如果end不存在，則賦值為n.

　　　　　　　　　　　　if(start < 0)    start + = n;

　　　　　　　　　　　　if(end< 0)    end + = n;

　　　　　　　　　　　　if(end>n)    end  = n;

　　　　　　　　　　　　for(var i = start;i<end;i++){

                                      ret[i-start] = nodes[i];     //低版本IE使用數(shù)組賦值的形式

                                 }

　　　　　　　　}

　　　　　　　　return ret;

}

4.類型的判斷：

　　js五種簡單數(shù)據(jù)類型有:null,undefined,boolean,number,string。

　　還有復雜的數(shù)據(jù)類型：Object,Function，RegExp,Date,自定義的對象，比如：Person等。

　　typeof一般用來判斷boolean,number,string，instanceof一般用來判斷對象類型。但它們都有缺陷。比如：firame里面的數(shù)組實例就不是父窗口的Array的實例，調(diào)用instanceof會返回false。（這題360校招時問過）。typeof new Boolean(true) // "object" ，包裝對象。boolean,number,string三種包裝對象，js高級程序編程里面有講。

　　有很多人使用typeof document.all來判斷是否為IE，其實這是很危險的，因為此屬性谷歌和火狐也喜歡，所以在谷歌瀏覽器下出現(xiàn)了這個情況：typeof document.all //undefined 但是，document.all //HTMLAllCollection，用typeof判斷是undefined，但是可以讀取此屬性值。

　　但是現(xiàn)在可以使用Object.prototype.toString.call方法判斷類型。此方法可以直接輸出對象內(nèi)部的[[Class]].但IE8及以下的window對象不能使用此方法?？梢允褂?nbsp; window == document // true document == window // false IE6,7,8下。

　　nodeType （ 1:元素 Element 2:屬性 attribute 3：文本 Text 9：document）

　　jquery中判斷類型使用的方法：

復制代碼代碼如下:

　　class2type ={}

　　jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){

        　　class2type [ "[object " + name + "]"  ] = name.toLowerCase();

　　　　//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object 　　　　Array ]":array ......}

　　　　});

　　　　jQuery.type = function(obj){             //如果obj是null，undefined等，就返回字符串"null","undefined"。如果不是，就調(diào)用toString方法，如果可以調(diào)用就判斷，出錯就返回object（IE低版本下的window,Dom等ActiveXobject對象）

　　　　return obj == null ? String(obj)  : class2type [ toString.call(obj) ]  || "object";

　　}

5.domReady

js操作dom節(jié)點時，頁面必須構(gòu)建好dom樹才行。因此，通常使用window.onload方法。但是onload方法是等所有資源加載結(jié)束后才會執(zhí)行。而為了讓頁面能更快的響應用戶的操作，我們只需要dom樹構(gòu)建完畢，就應該使用js操作。而不需要等待所有資源都加載結(jié)束（圖片,flash）。

因此出現(xiàn)了DOMContentLoaded事件，Dom樹構(gòu)建完成后觸發(fā)。但是舊版本IE不支持，因此就有了hack。

復制代碼代碼如下:

 if(document.readyState === "complete"){   //以防Dom文檔加載完成后才加載js文件。這時通過此判斷來執(zhí)行fn方法（你要執(zhí)行的方法）。因為文檔加載完成后，document.readyState的值為complete

         setTimeout(fn);      //異步執(zhí)行，可以讓它后面的代碼先執(zhí)行。這里是jQuery里面的用法，可以不用理解。

}

else if(document.addEventListener){//支持DOMContentLoaded事件

            document.addEventListener("DOMContentLoaded",fn,false);   //冒泡

　　　　window.addEventListener("load",fn,false);   //以防DOM樹構(gòu)建好之后才加載js文件。這時不會觸發(fā)DOMContentLoaded事件（已經(jīng)觸發(fā)結(jié)束了），只會觸發(fā)load事件

}

else{

　　document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全，有時會優(yōu)先onload執(zhí)行，有時不會。

　　　　if(document.readyState ==="complete"){

　　　　　　fn();

　　　　}

　　});

　　window.attachEvent("onload",fn);   //總會起到作用，以防其他監(jiān)聽事件沒獲取到，這樣至少可以通過onload事件觸發(fā)fn方法。

　　var top = false;//看是否在iframe中

     try{//window.frameElement即為包含本頁面的iframe或frame對象。沒有則為null。

          top = window.frameElement == null && document.documentElement;

      }catch(e){}

     if(top && top.doScroll){  //如果沒有iframe，并且是IE

            (function doScrollCheck(){

                     try{

　　　　　　　　　　top.doScroll("left");//IE下，如果Dom樹構(gòu)建好，就可以調(diào)用html的doScroll方法　　　　　　　　　

　　　　　　　　}catch(e){

                            return setTimeout(doScrollCheck,50);  //如果還沒構(gòu)建好，則繼續(xù)監(jiān)聽

                    }

                    fn();

            })

    }

}