一個(gè)人學(xué)許多東西，不等于他會(huì)很多東西，學(xué)了也會(huì)忘的，學(xué)了也不等于會(huì)運(yùn)用，這時(shí)我們應(yīng)該整一個(gè)很復(fù)雜的東西出來(lái)，那么就知道自己到底去到什么程度。基于這樣的理由，我開(kāi)始搞框架了，像我群里面的許多人那樣，因此請(qǐng)不要感到驚奇或敬佩什么的。我們總是免不了造輪子，前人走過(guò)路，我們也不得不走，只不過(guò)懷著不同的目的與心情。我也沒(méi)有自大到想去挑戰(zhàn)這個(gè)挑戰(zhàn)那個(gè)，僅僅是想自食其力，或許其最好的結(jié)果是拿來(lái)與友人切磋切磋。于是掂量一下，總結(jié)如下，如果有好心人能迷津指點(diǎn)最好不過(guò)。

首先要模塊化。像jQuery那樣內(nèi)部看起來(lái)亂成一團(tuán)的類(lèi)庫(kù)，如果去github看一下，發(fā)現(xiàn)還是很有組織地分成幾塊。這樣對(duì)逐個(gè)改進(jìn)非常有利。當(dāng)然如果與Ext,Base2,mootools比起來(lái)，jQuery肯定不合格。

二，風(fēng)格要統(tǒng)一，像Prototype滿眼是ruby標(biāo)準(zhǔn)庫(kù)的方法名，mootools擁有許多$開(kāi)頭的方法，方法多是單個(gè)單詞，jQuery的方法則是多為縮略語(yǔ)。我基本上跟Prototype走，但有些名字非常流行，我也會(huì)采納的。總之，讓大家一看就知這方法與屬性是干什么。

三，不使用with，不對(duì)Object與DOM的原型進(jìn)行擴(kuò)展，不濫用try...catch與自動(dòng)執(zhí)行函數(shù)。

基于上面三條鐵則，我開(kāi)始設(shè)計(jì)我的類(lèi)庫(kù)。由于是模塊化，因此它會(huì)把邊沿的功能放置到其他JS文件中，核心功能置為一個(gè)文件。對(duì)，就像Ext，mootools那樣。這樣帶來(lái)兩個(gè)問(wèn)題，其他JS文件怎么知道它是本類(lèi)庫(kù)的一部分，肯定要像Ext暴露一個(gè)不會(huì)變的全局變量，不能像jQuery那樣使用noConflict處處退讓。注意，我做的是框架，不是類(lèi)庫(kù)。它的功能體系應(yīng)該具有足夠的廣度與深度來(lái)滿足我們的需要，不能項(xiàng)目做到一半，發(fā)現(xiàn)它不夠用，被逼搭上十幾個(gè)插件或另一個(gè)框架，這樣的項(xiàng)目維護(hù)起來(lái)很頭痛。換言之，它擁有一個(gè)堅(jiān)定不移的命名空間，像Ext或YUI那樣。另一個(gè)問(wèn)題是，如何加載那些子模塊。像Ext那樣實(shí)在太不人道，動(dòng)不動(dòng)都要自己加。雖然javascript模塊的依賴(lài)關(guān)系肯定比不上java的，但我們不應(yīng)該排除這種可能，如我們有一天牛起來(lái)，要實(shí)現(xiàn)一個(gè)WEB OS呢？！因此需要一個(gè)像dojo那樣的包機(jī)制，功能不一定像它那樣強(qiáng)悍，但一定要有。于是第一個(gè)功能就這樣確定，擁有一個(gè)模塊加載器。

第二個(gè)功能是擁有一個(gè)強(qiáng)大的類(lèi)工廠。jQuery在這方面真是不行，沒(méi)有類(lèi)，做大一點(diǎn)的東西，這缺點(diǎn)就暴露出來(lái)了，代碼非常難組織，別人也很難讀懂你的代碼。在這方面，mootools的實(shí)現(xiàn)是最漂亮的，這非常值得參考。

第三個(gè)功能是瀏覽器嗅探，不過(guò)盡量利用非UA技術(shù)來(lái)實(shí)現(xiàn)。各瀏覽器的navigator.userAgent都在撒謊，非常不可靠。事實(shí)上，不用AU，我與群里的朋友找得許多更好的替代品。mootools的思路基本與我的一致，需要自豪一下。

第四個(gè)功能是類(lèi)型識(shí)別，像jQuery只提供了很少實(shí)現(xiàn)，isArray與isFunction，非常不夠用，有時(shí)我們還要判定字符串?dāng)?shù)字呢！不過(guò)，jQuery1.4中提供了一個(gè)isPlainObject，用于深拷貝，這函數(shù)要盜竊一下。

第五個(gè)功能是特征偵測(cè)，基本上用作內(nèi)部方法。這個(gè)我有專(zhuān)文介紹。

第六個(gè)功能是擴(kuò)展一下一些原生對(duì)象。讓原生對(duì)象也能漂亮的“鏈”起來(lái)。暫定對(duì)象為Array,String,Number,Function。

第七個(gè)功能是提供一個(gè)選擇器，我已經(jīng)實(shí)現(xiàn)了一個(gè)，正好為它找個(gè)好歸宿。做了一個(gè)框架，動(dòng)不動(dòng)要借用人家的選擇器非常可悲，這里特意點(diǎn)明批評(píng)一下Prototype1.7rc同學(xué)，實(shí)在太讓我失望了。

第八個(gè)功能是處理文檔，指創(chuàng)建節(jié)點(diǎn)，插入節(jié)點(diǎn)，替換節(jié)點(diǎn)，刪除節(jié)點(diǎn)與復(fù)制節(jié)點(diǎn)。創(chuàng)建節(jié)點(diǎn)中利用innerHTML可以大大提高效率。刪除節(jié)點(diǎn)方面，innerHTML在IE下又立功了，具體見(jiàn)我另一篇博文《IE中的 DOM 超空間與innerHTML》

第九個(gè)功能是遍歷文檔，指給定一個(gè)節(jié)點(diǎn)，找到其左鄰右鄰五姑六婆，具體可參考一下jQuery的API。

第十個(gè)功能是設(shè)置與獲取元素節(jié)點(diǎn)的屬性與樣式。對(duì)className的操作也列入此模塊。

第十一個(gè)功能是異步調(diào)用，換言之是Ajax，對(duì)于不同源者，還要用上動(dòng)態(tài)script。JSON的相關(guān)處理也列入此模塊。

第十二個(gè)功能是事件處理，主要工作是處理瀏覽器的差異性，二是提供一個(gè)觀察者模塊，實(shí)現(xiàn)自定義事件，三是提供一個(gè)（內(nèi)存）緩存系統(tǒng)。

第十三個(gè)功能是對(duì)元素進(jìn)行變形操作，以及基于其上的特效。具體可參考mootools的API。

第十四個(gè)功能是提供本地儲(chǔ)存，利用一切可用的資源，如cookie與userData，HTML5還帶來(lái)許多好東西。

第十五個(gè)功能是提供一個(gè)列隊(duì)機(jī)制，這應(yīng)該像dojo或Mochikit的Deferred模塊，而不是jQuery那個(gè)簡(jiǎn)單的queue與delay。

第十六個(gè)功能是統(tǒng)一對(duì)XML的操作。

嘛，基本上是這樣，功能很多，不過(guò)由于是對(duì)原生對(duì)象進(jìn)行了原型擴(kuò)展，許多方法會(huì)寫(xiě)得很精簡(jiǎn)的。如有什么好建議不妨提出來(lái)我聽(tīng)聽(tīng)。

總結(jié)

以上是生活随笔為你收集整理的一个javascript框架应有的功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。