系列文章導(dǎo)航：

JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類型

JavaScript學(xué)習(xí)筆記二——函數(shù)

JavaScript學(xué)習(xí)筆記三——作用域

JavaScript學(xué)習(xí)筆記四——Eval函數(shù)

JavaScript學(xué)習(xí)筆記五——類和對(duì)象

JavaScript學(xué)習(xí)筆記六：prototype的提出

Javascript學(xué)習(xí)筆記七——原型鏈的原理

Javascript學(xué)習(xí)筆記八——用JSON做原型

Javascript學(xué)習(xí)筆記九——prototype封裝繼承

Javascript學(xué)習(xí)筆記十——網(wǎng)頁(yè)運(yùn)行原理

Javascript學(xué)習(xí)筆記十一——包裝DOM對(duì)象

Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件

Javascript學(xué)習(xí)筆記十二——Ajax入門

我們?cè)谌粘５?a href=/pingce/yingyong/ target=_blank class=infotextkey>應(yīng)用中，使用Javascript大多數(shù)時(shí)間都是在用DOM ，以致于很多人都有一種看法就是DOM==JS，雖然這種看法是錯(cuò)誤的，但是也可以說(shuō)明DOM的重要性。

這就導(dǎo)致了我們?cè)趯慗S的時(shí)候，首先會(huì)考慮的是這個(gè)方法在頁(yè)面上會(huì)產(chǎn)生什么樣的變化之類的問(wèn)題，用架構(gòu)的思想來(lái)說(shuō)：我們可以說(shuō)這樣把用戶界面和業(yè)務(wù)邏輯摻雜到了一起。我們也知道，這樣對(duì)于一個(gè)稍大的項(xiàng)目來(lái)說(shuō)，滿腦袋都是DIV，都是CSS是做不好東西的。

那么怎么辦？我們還是用對(duì)象的角度，從邏輯上來(lái)考慮這個(gè)問(wèn)題，讓我們忘記那些DOM對(duì)象。

我們來(lái)舉一個(gè)例子吧：

對(duì)于某個(gè)回復(fù)，可能是回復(fù)本貼，也可能是舉報(bào)。那么暫時(shí)讓我們忘記那些DOM對(duì)象，讓我們想清楚邏輯：

點(diǎn)擊“回復(fù)本貼”時(shí)，隱藏舉報(bào)窗口，打開(kāi)回復(fù)窗口。

點(diǎn)擊“舉報(bào)本貼”時(shí)，隱藏回復(fù)窗口，打開(kāi)舉報(bào)窗口。

OK，也就是說(shuō)整個(gè)邏輯包含兩個(gè)對(duì)象，一個(gè)是舉報(bào)窗口對(duì)象，一個(gè)是回復(fù)窗口對(duì)象，每個(gè)對(duì)象有兩個(gè)方法，一個(gè)是打開(kāi)，一個(gè)是隱藏。由于某個(gè)頁(yè)面可能會(huì)有很多這樣的對(duì)象，每個(gè)對(duì)象都應(yīng)該是被創(chuàng)建的一個(gè)原型，于是就應(yīng)該有這樣的代碼：

<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();  //  關(guān)閉本頁(yè)面其它的回復(fù)窗口    var c = new Comment("1","1");    c.Create();}

舉報(bào)按鈕也近似如此。

好了大致邏輯如此，我們需要的只是實(shí)現(xiàn)原型中的創(chuàng)建和隱藏方法。

var Comment = function (x, y) {    var x = x;    var y = y;    var ConfirmComment = function () {        //Ajax提á交?評(píng)à論?    };};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對(duì)象包裝成符合我們自己業(yè)務(wù)邏輯的Javascript對(duì)象是一種非常好的做法，這也是企業(yè)JS庫(kù)形成的一個(gè)過(guò)程。

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

it知識(shí)庫(kù)：Javascript學(xué)習(xí)筆記十一——包裝DOM對(duì)象，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。