這篇文章主要介紹了動手創建JavaScript框架的詳細教程,包括DOM和各種屬性的調試等各個方面,超級推薦!需要的朋友可以參考下

　　覺得Mootools不可思議?想知道Dojo是如何實現的?對JQuery的技巧感到好奇?在這篇教程里，我們將探尋框架背后的秘密，然后試著自己動手建立一個你所喜愛的框架的簡易版本。

　　我們幾乎每天都在使用各種各樣的JavaScript框架。當你剛入門的時候，方便的DOM(文檔對象模型)操作讓你覺得JQuery這樣的東西非常棒。這是因為：首先，對于新手來說DOM太難理解了;當然，對于一個API來說難以理解可不是什么好事。其次，瀏覽器間的兼容性問題非常令人困擾。

　　我們將元素包裝成對象是因為我們想要能夠為對象添加方法。

　　在這個教程里，我們將試著從頭實現這些框架之一。是的，這會很有趣，不過在你太過興奮前我要澄清幾點：

　　這不會是一個功能很完善的框架。的確，我們要寫很多東西，但它還算不上JQuery。可是我們將要做的事情會讓你體驗到在真正編寫框架的感覺。

　　我們不打算保證全方位的兼容性。我們將要編寫的框架能夠在 Internet Explorer 8+、Firefox 5+、Opera 10+、Chrome和Safari上工作。

　　我們的框架不會覆蓋到所有可能的功能。比如說，我們的append和preappend方法只有在你傳給它一個我們框架的實例時才能工作;我們不會用原生的DOM節點和節點列表。

　　另外：盡管在教程中我們不會為我們的框架編寫測試用例，但是我已經在第一次開發它的時候做好了。你可以從 Github上獲取框架和測試用例的代碼。

　　第一步: 創建框架模板

　　我們將從一些包裝代碼開始，它將容納我們的整個框架。這是典型的立即函數(IIFE).

　　?

　　你可以看到，我們的框架叫做dome，因為它是一個基本的DOM框架。沒錯，基本(lame有“瘸子”、“不完整”的意思，dom加lame等于dome)的。

　　我們已經有了一些東西。 首先，我們有了一個函數;它將成為構造框架的對象實例的構造函數;那些對象將會包含我們選擇和創建的元素。

　　然后，我們有了一個dome對象，它就是我們的框架對象;你可以看到它最終作為函數的返回值返回給了函數調用者(譯注：賦值給了window.dome)。這里還有一個空的get函數，我們將用它從頁面里選取元素。那么，我們來填充代碼吧。

　　第二步: 獲取元素

　　dome的get函數只有一個參數，但是它可以是很多東西。如果它一個string(字符串)，我們將假定它是一個CSS(層疊樣式表)選擇器;不過我們也可能得到一個DOM節點或者DOM節點列表。

　　?