javascript框架設計種子模塊讀書(shū)筆記
1.命名空間：
js里面的命名空間就是使用對象的屬性來(lái)擴展的。比如，用戶(hù)定義一個(gè)A對象，A對象下面有B屬性和C屬性，同時(shí)B屬性和C屬性又是對象。因此A={B:{},C:{}}，這時(shí)用戶(hù)就可以在B對象和C對象中定義一樣的方法，屬性了。因此B和C就屬于不同的命名空間。我們調用B，C對象里面的方法，就可以通過(guò)A.B.like()，A.C.like()調用了。當然A屬于window對象中的屬性。
但是有一種情況，比如:boke.jsp頁(yè)面引入了jquery.js以及prototype.js（他們都會(huì )在window對象中添加$屬性），這時(shí)就出現了沖突的情況。
因此jquery.js里面就有了noConflict()處理沖突。執行流程：頁(yè)面首先引入prototype，這時(shí)prototype會(huì )占有window的$屬性，然后再引入jquery時(shí)，jquery會(huì )把之前window的$屬性存放在_$中，然后自己使用$屬性。這時(shí)，你可以通過(guò)$調用jquery的方法。當你現在不需要使用jquery而想使用prototype時(shí)，就可以調用$.noConflict(),這時(shí)$就會(huì )恢復成prototype對象。這時(shí)你就可以通過(guò)$使用prototype方法了。
復制代碼 代碼如下:
var _$ = window.$，_jQuery= window.jQuery；
noConflict:function(deep){
window.$ = _$;
if(deep) window.jQuery = _jQuery;
return jQuery; //返回值，你可以賦值給其他變量名，比如，chaojidan,這樣你就可以通過(guò)chaojidan調用jQuery中的方法了。
}
2.對象擴展：
命名空間對象有了，那我們需要擴展功能。比如：我需要把A對象的屬性和方法全部復制到B對象中。我不用一個(gè)一個(gè)在B對象中去寫(xiě)代碼。
復制代碼 代碼如下:
function mix(target , source){
var args = [].slice.call(arguments),i=1,
isCover = typeof args[args.length-1] =="boolean" ? args.pop():true; //不寫(xiě)，默認為true,默認是覆蓋。
if(args.length == 1){
target = !this.window? this:{};
//如果只有一個(gè)對象參數時(shí)，就擴展this對象。比如：我在A(yíng)對象的context中調用mix(B)，那么這時(shí)的this就是A，因此會(huì )把B的屬性和方法添加到A對象中。但是如果是在window中調用mix(B)，就會(huì )把B對象中的`屬性和方法添加到一個(gè)空的對象中，并返回這個(gè)空的對象，以防覆蓋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;
}
大公司面試官很喜歡問(wèn)數組的查重，大家可以去看看，數組中的每項可以是對象，而對象A和對象B即便一樣的屬性和方法，但是也是不相等的。字符串和數字，比如123和"123"等，網(wǎng)上一搜，就能找到很全的方法。
3.數組化：
瀏覽器下有很多類(lèi)數組對象，arguments,document.forms,document.links，form.elements,document.getElementsByTagName，childNodes等（HTMLCollection,NodeList）。
還有一種特殊寫(xiě)法的自定義對象
復制代碼 代碼如下:
var arrayLike = {
0:"a",
1:"b",
length:2
}
此對象寫(xiě)法，就是jQuery對象的寫(xiě)法。
我們需要把上述的類(lèi)數組對象轉換成數組對象。
[].slice.call方法可以解決。但是舊版本IE下的HTMLCollection,NodeList不是Object的子類(lèi)，不能使用[].slice.call方法。
因此我們可以重寫(xiě)一個(gè)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沒(méi)寫(xiě)，或者end是有限數字就進(jìn)入
start = parseInt(start,10) || 0; //如果start不存在或者不是數字，則就賦值為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使用數組賦值的形式
}
}
return ret;
}
4.類(lèi)型的判斷：
js五種簡(jiǎn)單數據類(lèi)型有:null,undefined,boolean,number,string。
還有復雜的數據類(lèi)型：Object,Function，RegExp,Date,自定義的對象，比如：Person等。
typeof一般用來(lái)判斷boolean,number,string，instanceof一般用來(lái)判斷對象類(lèi)型。但它們都有缺陷。比如：firame里面的數組實(shí)例就不是父窗口的Array的實(shí)例，調用instanceof會(huì )返回false。（這題360校招時(shí)問(wèn)過(guò)）。typeof new Boolean(true) // "object" ，包裝對象。boolean,number,string三種包裝對象，js高級程序編程里面有講。
有很多人使用typeof document.all來(lái)判斷是否為IE，其實(shí)這是很危險的，因為此屬性谷歌和火狐也喜歡，所以在谷歌瀏覽器下出現了這個(gè)情況：typeof document.all //undefined 但是，document.all //HTMLAllCollection，用typeof判斷是undefined，但是可以讀取此屬性值。
但是現在可以使用Object.prototype.toString.call方法判斷類(lèi)型。此方法可以直接輸出對象內部的[[Class]].但IE8及以下的window對象不能使用此方法�？梢允褂� window == document // true document == window // false IE6,7,8下。
nodeType （ 1:元素 Element 2:屬性 attribute 3：文本 Text 9：document）
jquery中判斷類(lèi)型使用的方法：
復制代碼 代碼如下:
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節點(diǎn)時(shí)，頁(yè)面必須構建好dom樹(shù)才行。因此，通常使用window.onload方法。但是onload方法是等所有資源加載結束后才會(huì )執行。而為了讓頁(yè)面能更快的響應用戶(hù)的操作，我們只需要dom樹(shù)構建完畢，就應該使用js操作。而不需要等待所有資源都加載結束（圖片,flash）。
因此出現了DOMContentLoaded事件，Dom樹(shù)構建完成后觸發(fā)。但是舊版本IE不支持，因此就有了hack。
復制代碼 代碼如下:
if(document.readyState === "complete"){ //以防Dom文檔加載完成后才加載js文件。這時(shí)通過(guò)此判斷來(lái)執行fn方法（你要執行的方法）。因為文檔加載完成后，document.readyState的值為complete
setTimeout(fn); //異步執行，可以讓它后面的代碼先執行。這里是jQuery里面的用法，可以不用理解。
}
else if(document.addEventListener){//支持DOMContentLoaded事件
document.addEventListener("DOMContentLoaded",fn,false); //冒泡
window.addEventListener("load",fn,false); //以防DOM樹(shù)構建好之后才加載js文件。這時(shí)不會(huì )觸發(fā)DOMContentLoaded事件（已經(jīng)觸發(fā)結束了），只會(huì )觸發(fā)load事件
}
else{
document.attachEvent("onreadystatechange",function(){//針對IE下的iframe安全，有時(shí)會(huì )優(yōu)先onload執行，有時(shí)不會(huì )。
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn); //總會(huì )起到作用，以防其他監聽(tīng)事件沒(méi)獲取到，這樣至少可以通過(guò)onload事件觸發(fā)fn方法。
var top = false;//看是否在iframe中
try{//window.frameElement即為包含本頁(yè)面的iframe或frame對象。沒(méi)有則為null。
top = window.frameElement == null && document.documentElement;
}catch(e){}
if(top && top.doScroll){ //如果沒(méi)有iframe，并且是IE
(function doScrollCheck(){
try{
top.doScroll("left");//IE下，如果Dom樹(shù)構建好，就可以調用html的doScroll方法
}catch(e){
return setTimeout(doScrollCheck,50); //如果還沒(méi)構建好，則繼續監聽(tīng)
}
fn();
})
}
}
fn方法中必須包含移除所有的綁定事件。
當然IE還可以使用script defer hack，原理就是：指定了defer的script會(huì )在DOM樹(shù)構建完后才執行。但是這需要添加額外的js文件，很少在單獨的庫里面用到。
使用原理：在文檔中添加script標簽，并用script.src = "xxx.js"，監聽(tīng)script的onreadystatechange事件，當this.readyState == "complete"時(shí)，就執行fn方法。
也就是說(shuō)，DOM構建好之后，xxx.js才會(huì )執行，它的this.readyState才會(huì )變成complete。
以上便是javascript框架設計的第一章的讀書(shū)筆記了，內容比較精簡(jiǎn)，方便大家更好的理解這章的基本內容。
【javascript框架設計種子模塊讀書(shū)筆記】相關(guān)文章：
jQuery 和其他 JavaScript 框架使用方法11-11
javascript程序設計11-10
軟件用戶(hù)管理模塊的設計09-01
JavaScript高級程序設計：本地對象Array11-11
調用javascript11-23
Javascript模板11-23