Javascript學習筆記11——封裝DOM對象

我們在日常的應用中，使用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對象，笑談爾….