我们在日常的应用中,使用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对象,笑谈尔….

转自:http://www.cnblogs.com/kym/archive/2010/01/18/1650333.html

转:js包装DOM对象的更多相关文章

  1. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  2. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  3. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  5. js的dom对象(带实例超详细全解)

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  6. 前端之JavaScript:JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

  7. 前端之JavaScript:JS之DOM对象二

    继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...

  8. 前端之JavaScript:JS之DOM对象一

    js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...

  9. 继续JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

随机推荐

  1. LintCode-丢失的第一个正整数

    题目描述: 给出一个无序的正数数组,找出其中没有出现的最小正整数. 样例 如果给出 [1,2,0], return 3 如果给出 [3,4,-1,1], return 2 挑战 只允许时间复杂度O(n ...

  2. Linux的默认编码可以通过export LC_ALL=zh_CN.GBK来修改

    http://www.cnblogs.com/malecrab/p/5300486.html

  3. java 解析国密SM2算法证书

    首先说明用Java自带的解析x509证书类,是不能解析sm2算法的证书,执行会抛出异常. 用开源库bouncycastle能够解析.详细代码 private byte[] getCSPK(byte[] ...

  4. 介绍一个python的新的web framework——karloop框架

    karloop是一款轻型的web framework,和tornado.webpy类似.mvc分层设计,眼下已经公布早期版本号了,使用方便, 下载地址例如以下:https://github.com/k ...

  5. epoll相关

    1) 能不能给一个使用epoll相关API进行IO监控的示例?在<<epoll学习笔记>>中有一个简单的示例说明epoll相关API的使用, 但是这个示例是非常简单的, 它仅仅 ...

  6. Webstorm入门-----常用快捷键

    为了提高敲代码的速度.我们所需要关注的各种快捷键: 首先,快捷键的设置                  相关连接: http://www.cnblogs.com/dc10101/archive/20 ...

  7. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  8. HTML5.1就要来了

    原文来自https://www.w3.org/blog/2016/04/working-on-html5-1/ 总结一下几个点: 1.六个月内,也就是到九月份的时候,HTML5.1会和大家见面. 2. ...

  9. 3.5 用NPOI操作EXCEL--巧妙使用Excel Chart

    在NPOI中,本身并不支持Chart等高级对象的创建,但通过l模板的方式可以巧妙地利用Excel强大的透视和图表功能,请看以下例子. 首先建立模板文件,定义两列以及指向此区域的名称“sales”: 创 ...

  10. Web开发在线工具

    JSON: JSON格式化工具 JSON检验并格式化工具 专为Web开发者准备的 63个免费在线工具