系列文章導航：

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對象，笑談爾….