系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

我們在日常的應用中，使用Javascript大多數時間都是在用DOM ，以致于很多人都有一種看法就是DOM==JS，雖然這種看法是錯誤的，但是也可以說明DOM的重要性。

這就導致了我們在寫JS的時候，首先會考慮的是這個方法在頁面上會產生什么樣的變化之類的問題，用架構的思想來說：我們可以說這樣把用戶界面和業務邏輯摻雜到了一起。我們也知道，這樣對于一個稍大的項目來說，滿腦袋都是DIV，都是CSS是做不好東西的。

那么怎么辦？我們還是用對象的角度，從邏輯上來考慮這個問題，讓我們忘記那些DOM對象。

我們來舉一個例子吧：

對于某個回復，可能是回復本貼，也可能是舉報。那么暫時讓我們忘記那些DOM對象，讓我們想清楚邏輯：

點擊“回復本貼”時，隱藏舉報窗口，打開回復窗口。

點擊“舉報本貼”時，隱藏回復窗口，打開舉報窗口。

OK，也就是說整個邏輯包含兩個對象，一個是舉報窗口對象，一個是回復窗口對象，每個對象有兩個方法，一個是打開，一個是隱藏。由于某個頁面可能會有很多這樣的對象，每個對象都應該是被創建的一個原型，于是就應該有這樣的代碼：

<script type="text/Javascript">    var Comment = function (x, y) {        var x = x;        var y = y;    };    Comment.prototype.Create = function () {    };    Comment.prototype.Hide = function () {    };    var Report = function (x, y) {        var x = x;        var y = y;    };    Report.prototype.Create = function () {    };    Report.prototype.Hide = function () {    };script>

至于邏輯就是：

buttonCommert.onclick = function () {    GetReport(“id”).Hide();    HideOthers();  //  關閉本頁面其它的回復窗口    var c = new Comment("1","1");    c.Create();}

舉報按鈕也近似如此。

好了大致邏輯如此，我們需要的只是實現原型中的創建和隱藏方法。

var Comment = function (x, y) {    var x = x;    var y = y;    var ConfirmComment = function () {        //Ajax提á交?評à論?    };};Comment.prototype.Create = function () {    var com = document.createElement("div");    document.getElementById("XXXX").appendChild(com);    com.x = x;    com.y = y;    com.style.left = "XXpx";    com.style.top = "YYpx";    var txt = document.createElement("input");    txt.nodeType = "text";    com.appendChild(txt);    var btn = document.createElement("input");    btn.nodeType = "button";    btn.onclick = ConfirmComment();    com.appendChild(btn);};

以上皆為偽代碼，只是提供一種封裝DOM的思路。

在工程中，將DOM對象包裝成符合我們自己業務邏輯的Javascript對象是一種非常好的做法，這也是企業JS庫形成的一個過程。

說句極端話，如果足夠成熟后，也許頁面中寫JS看不到DOM，而皆為包裝好的JS對象，笑談爾….

it知識庫：Javascript學習筆記十一——包裝DOM對象，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。