javascript框架設計讀書筆記之種子模組_javascript技巧

1.命名空間：

　　js裡面的命名空間就是使用物件的屬性來擴充的。例如，使用者定義一個A對象，A對像下面有B屬性和C屬性，同時B屬性和C屬性又是對象。因此A={B:{},C:{}}，這時使用者就可以在B物件和C物件中定義一樣的方法，屬性了。因此B和C就屬於不同的命名空間。我們呼叫B，C物件裡面的方法，就可以透過A.B.like()，A.C.like()呼叫了。當然A屬於window物件中的屬性。

　　但是有一種情況，例如:boke.jsp頁面引入了jquery.js以及prototype.js（他們都會在window物件中加入$屬性），這時就出現了衝突的情況。

　　因此jquery.js裡面就有了noConflict()處理衝突。執行流程：頁面先引入prototype，這時prototype會佔有window的$屬性，然後再引入jquery時，jquery會把之前window的$屬性存放在_$中，然後自己使用$屬性。這時，你可以透過$來呼叫jquery的方法。當你現在不需要使用jquery而想使用prototype時，就可以呼叫$.noConflict(),這時$就會恢復成prototype物件。這時你就可以透過$使用prototype方法了。

複製程式碼 程式碼如下:

　　var _$ =  window.$，_jQuery= window.jQuery；
　　noConflict:function(deep){
         　　window.$ = _$;
　　   　　if(deep)  window.jQuery = _jQuery;
        　　return jQuery;    //傳回值，而你可以賦值給其他變數名，例如，chaojidan,這樣你就可以透過chaojidan呼叫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:{};
　　//如果只有一個物件參數時，就擴展this物件。例如：我在A物件的context中呼叫mix(B)，那麼這時的this就是A，因此會把B的屬性和方法加到A物件中。但如果是在window中呼叫mix(B)，就會把B對像中的屬性和方法加到一個空的對像中，並傳回這個空的對象，以防覆寫window對像中同名的屬性和方法。 （只有window物件擁有window屬性）
      i =0;
　}
　while((source = args[i ])){
　　　　for(key in source){
                               　　　　　　   {
　　　　　　　　　　target[key] = source[key];
                      }
           }
   }
   return target;
}

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

3.陣列化

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

還有一種特殊寫法的自訂物件

複製程式碼 程式碼如下:

var arrayLike = {
       0:"a",
       1:"b",
      length:2
}

此物件寫法，就是jQuery物件的寫法。

我們需要把上述的類別數組物件轉換成數組物件。

[].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)){   //&&&CD高於||，所以沒寫優先級，或是有限數字就進入
                                                                end = end == undef 　　　　　　　　　　　　if(start 　　　　　　　　　　　　if(end 　　　　　　　　　　　　if(end>n)    end  = n;
　　　　　　　　　　　　for(var i = start;i                                                                        }
　　　　　　　　}
　　　　　　　　return ret;
}

4.類型的判斷：

　　js五種簡單資料型別有:null,undefined,boolean,number,string。

　　還有複雜的資料類型：Object,Function，RegExp,Date,自訂的對象，例如：Person等。

　　typeof一般用來判斷boolean,number,string，instanceof一般用來判斷物件類型。但它們都有缺陷。例如：firame裡面的陣列實例就不是父視窗的Array的實例，而呼叫instanceof會回傳false。 （這題360校招時問過）。 typeof new Boolean(true)     // "object"   ，包裝對象。 boolean,number,string三種包裝對象，js高階程式程式設計裡面有講。

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

　　但是現在可以使用Object.prototype.toString.call方法判斷類型。此方法可以直接輸出物件內部的[[Class]]。但IE8及以下的window物件不能使用此方法。可使用   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"。如果不是，就呼叫toString方法，如果可以呼叫就判斷，出錯就回傳object（IE低版本下的window,Dom等ActiveXobject物件）
　　　　return obj == null ? String(obj)  : class2type [ toString.call(obj) ]  || "object";
　　}

5.domReady

js操作dom節點時，頁面必須建立好dom樹才行。因此，通常使用window.onload方法。但是onload方法是等所有資源載入結束後才會執行。而為了讓頁面能更快的回應使用者的操作，我們只需要dom樹建構完畢，就應該使用js操作。而不需要等待所有資源都載入結束（圖片,flash）。

因此出現了DOMContentLoaded事件，Dom樹建置完成後觸發。但是舊版IE不支持，因此就有了hack。

複製程式碼 程式碼如下:

 if(document.readyState === "complete"){   //以防Dom文件載入完成後才載入js檔案。這時透過此判斷來執行fn方法（你要執行的方法）。因為文件載入完成後，document.readyState的值為complete
         setTimeout(fn);      //非同步執行，且可讓它後面的程式碼先執行。這裡是jQuery裡面的用法，可以不用理解。
}
else if(document.addEventListener){//支援DOMContentLoaded事件
            document.addEventListener("DOMContentLoaded",fn,false);   //冒泡
　　　　window.addEventListener("load",fn,false);   //以防DOM樹建置好之後才載入js檔案。這時不會觸發DOMContentLoaded事件（已經觸發結束了），只會觸發load事件
}
else{
　　document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全，有時會優先onload執行，有時不會。
　　　　if(document.readyState ==="complete"){
　　　　　　fn();
　　　　}
　　});
　　window.attachEvent("onload",fn);   //總是會起到作用，以防其他監聽事件沒獲取到，這樣至少可以透過onload事件觸發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樹構建好，就可以調用html的doScroll方法　　　　　　　　　
　　　　　　　　}catch(e){
                            return setTimeout(doScrollCheck,50);  //若還沒設定好，則繼續聆聽規格                     }
                    fn();
            })
    }
}

fn メソッドには、すべてのバインドされたイベントの削除が含まれている必要があります。

もちろん、IE でもスクリプト遅延ハックを使用できます。原則として、遅延が指定されたスクリプトは、DOM ツリーが構築されるまで実行されません。ただし、これには追加の js ファイルを追加する必要があり、別のライブラリで使用されることはほとんどありません。

使用原則: ドキュメントに script タグを追加し、script.src = "xxx.js" を使用してスクリプトの onreadystatechange イベントをリッスンし、this.readyState == "complete" のときに fn メソッドを実行します。

つまり、DOM が構築された後、xxx.js が実行され、その this.readyState が完了します。

上記は、JavaScript フレームワーク設計の第 1 章の読書メモです。この章の基本的な内容を誰もがよりよく理解できるように、内容は比較的簡潔です。