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