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对象，笑谈尔….