初学js者对javascript面向对象的认识分析
来源:asp之家 发布时间:2011-03-16 11:04:00
代码如下:
var obj = document.getElementById("name");
function clickMe() {
alert(this.value);
this.value += "!!!!";
alert(this.value);
}
var ActionBinder = function() {//定义一个类
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//注册doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//注册一个动作
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注册doms的动作
var binder = new ActionBinder();//按照ActionBinder的方法新建一个类
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
先上一段用js写的面向对象的代码,先建立一个ActionBinder的类,写法上也类似于java;因为js是基于html的dom对象来操作html的内容,在类中定义一个注册dom的方法registerDOM,用prototype将该方法原型化,方便调用;另外再增加一个注册事件的方法registerAction,也用prototype方法原型化;最后再用一个原型化的动作bind将已注册的dom和已注册的事件绑定在了一起,并执行。
再上一段原始的js代码片段:
Code
代码如下:
<body>
<script>
document.onload= function(){
var obj = document.getElementById("name");
obj.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name" />
</body>
代码也实现了要的效果,对于一些简单的应用,上面那段效果能够满足,但对于比较复杂的一些程序,应用起来就比较麻烦,代码上写起来也较繁琐;如代码片段
Code
代码如下:
<body>
<script>
document.onload= function(){
obj1 = document.getElementById("name1");
obj2 = document.getElementById("name2");
obj3 = document.getElementById("name3");
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name1" value="111" />
<input type="text" id="name2" value="222" />
<input type="text" id="name3" value="333" />
</body>
或者
Code
代码如下:
<body>
<script>
function clickMe(){alert(this.value);}
</script>
<input type="text" id="name1" value="111" onclick="return clickMe()" />
<input type="text" id="name2" value="222" onclick="return clickMe()" />
<input type="text" id="name3" value="333" onclick="return clickMe()" />
</body>
当然上面两段代码也有其他一些更简单的写法,总的来说还是出现很多冗余的代码。
用面向对象的方法写就比较灵活,如
Code
代码如下:
<body>
<script>
window.onload = function() {
var objs = document.getElementsByTagName("input");
function clickMe() {
alert(this.value);
}
var ActionBinder = function() {//定义一个类
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//注册doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//注册一个动作
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注册doms的动作
for (var i=0;i<objs.length;i++ ){
var binder = new ActionBinder();//按照ActionBinder的方法新建一个类
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
binder.bind();
};
}
</script>
<input type="text" id="name" value="111"/>
<input type="text" id="name1" value="222"/>
<input type="text" id="name2" value="333"/>
</body>
这样就不会有冗余的代码,而且js逻辑上也比较清爽,对于多个事件的绑定还有待研究。
猜你喜欢
- 到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下
- 讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面
- SEO是指搜索引擎优化,主要就是通过对网站的结构、标签、排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎
- 最近接触到Tencent的广告越来越多,户外广告牌和电视上都是,可以明显感觉到Tencent的扩张野心,以及对QQ品牌定位的重塑。摆脱低龄化
- 1、使用mysqldump工具将MySql数据库备份mysqldump -u root -p -c --default-character-
- CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看backgroun
- 前言: 这篇文章主要介绍RMAN的常用方法,其中包含了作者一些自己的经验,里面的实验也基本全在WIN 2K和ORACLE 8.1.6环境下测
- 老师罚学生抄写英文单词,结果学生给抄成这样……
- 请问如何在Oracle Setver端检测ODBC是否连接好了?首先,在SQLPLUS安装时勾选oracle open client ada
- 一、DAFONT 英文字体很多,分类很详细,字体多数都是免费,唯一的缺点中文字体少了些.http://www.dafont.co
- 本文列出了一些asp编程种可能会用到的正则表达式例子,大家可以方便的调用!如果您对asp种的正则表达式不是很了解可以看看这篇文章《ASP中R
- 1 丰富的二维动画/图形和视音频表现 Rich 2D animation/graphics with audio and video这点毋庸
- <%If(Request.QueryString("Page")="") ThenPage=1
- meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:<head> <meta&nbs
- ASP中查询数据库记录写入XML文件示例,把下面代码保存为Asp_XML.asp运行即可: &
- Javascript有没有内存泄露?如果有,如何避免?鉴于最近有好几个人问到我类似的问题,看来大家对这部分内容还没有系统的研究过,因此,打算
- SQL Server内存会不断增加当 SQL Server 数据库引擎在 Microsoft? Windows NT? 或 Windows?
- 如题:我写入关键字到数据库,多的时候用|隔开了,我提取再做相关文章搜索的时候,我怎么提取用|隔开的文字啊,这样我就好用关键字做搜索啊 回复:
- 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页
- 当成功安装了PHP,MYSQL后,我们一般要安装phpMyAdmin来管理你的mysql。本文介绍了phpMyAdmin 2.10.2的配置