初学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逻辑上也比较清爽,对于多个事件的绑定还有待研究。
猜你喜欢
- 某天和一个产品经理聊起:以用户为中心是一个理想概念。经历了太多的项目,看到了太多的限制条件。而我向来不是一个有着设计洁癖的完美主义者。做为所
- 前言网上关于PyCharm快捷键的文章数不胜数,但是我发现有以下几个缺陷:具体基于哪个配置? 因为Windows / Mac 的配置各不同,
- pip的基本使用安装pip1. cd 到你的python安装目录下的的Scripts文件夹下:2.执行easy_install.exe pi
- 可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因
- 安装好所需要的插件和包:python、django、pip等版本如下:采用Django REST框架3.01、在python文件夹下D:\p
- 1 之前我们学习了列表,知道列表可以用来存储一组数据,可以增删改查,可以遍历2 之前我们学习了字典,知道字典可以用来存储键值对,与列表类似,
- 1.什么是虚拟DOM 以前M的命令式操作DOM即使用jQuery操作DOM节点,随着状态的增多,DOM的操作就会越来越频繁,程序的
- 相比大家都听过自动化生产线、自动化办公等词汇,在没有人工干预的情况下,机器可以自己完成各项任务,这大大提升了工作效率。编程世界里有各种各样的
- 读文件:#!perlopen filetxt,"/path/a.txt"; # fi
- Java开发者对于面向对象编程思维与命令行编程思维的协调程度,取决于他们如下几种能力的水平:技巧(任何人都可以编写命令行形式的代码)教条(有
- 一、概述 对象是Oracle8i以上版本中的一个新的特性,对象实际是对一组数据和操作的封装,对象的抽象就是类。在面向对象技术中,对象涉及到以
- 今天介绍下用 Python 去除 PDF (图片)的水印。思路很简单,代码也很简洁。首先来考虑 Python 如何去除图片的水印,然后再将思
- Python-opencv+KNN求解数独最近一直在玩数独,突发奇想实现图像识别求解数独,输入到输出平均需要0.5s。整体思路大概就是识别出
- 在Python中是没有Switch / Case语句的,很多人认为这种语句不够优雅灵活,在Python中用字典来处理多条件匹配问题字典会更简
- 1.小猫运动游戏源码# @Author : 辣条'''多行注释本程序运行后会有一只小猫向前走安装模块 pip ins
- 在asp里通过以下两个函数实现javascript里的escape函数和unescape函数加密功能。在ajax post或get时内容存在
- 第一种方式:将用户名和密码封装在Properties类中首先,导入数据库连接包这个是毋庸置疑的。创建一个jdbc驱动dirver。将数据库(
- 1查找字符位置函数: strpos($str,search,[int]):查找search在$str中的第一次位置从int开始; strip
- 一.一维数组的转置描述一维数组的重塑就是将一行或一列的数组转换为多行多列的数组重塑之后的数组应于原有数组形状兼容(数组元素应该相等)用法和参
- 本文我们讲述通过 array_unique()函数删除数组中重复元素。array_unique()函数,将数组元素的值作为字符串排序,然后对