Javascript学习笔记十一——包装DOM对象

系列文章导航:

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对象。

我们来举一个例子吧:

image

对于某个回复,可能是回复本贴,也可能是举报。那么暂时让我们忘记那些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对象,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。