繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP > 初学js者对javascript面向对象的认识分析
- ASP
- 分享一段代码show.asp?id=26变成show/?26的形式
- 多域名一网站时如果返回最原来的域名
- [原创]完美解决ASP 不能更新。数据库或对象为只读。
- 5天学会asp
- TSYS中生成静态页时溢出: ''CInt''
- 对象标记具有无效的 ''MSWC.MyInfo'' ProgID
- [原创]随机增加网站点击的一个不错的方法
- Microsoft JET Database Engine 错误 ''80004005'' 未指定的错误的完美解决方法
- 反SPAM新思路—换Z-BLOG的验证码！
- 七步倒┈→专用asp后门
- asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码
- 使用ASP实现网站的“目录树”管理的代码
- ShowPage 显示“上一页 下一页”等信息的封装代码
- [原创]站长感慨asp编程究竟何去何从
- 响应对象 错误 ''ASP 0185 : 80020003'' 缺少默认属性
- [原创]asp下用实现模板加载的的几种方法总结
- [原创]asp获取URL参数的几种方法分析总结
- Access数据库中“所有记录中均未找到搜索关键字”的解决方法
- ASP程序中输出Excel文件实例一则
- ASP应用中如何限制同一表单被多次提交
ASP 中的 初学js者对javascript面向对象的认识分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 82 ::
收藏到网摘: n/a
初学js者对javascript面向对象的认识分析，需要学习的朋友可以参考下。
复制代码 代码如下:
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逻辑上也比较清爽，对于多个事件的绑定还有待研究。
评论 (0) All
