作家
登录

初学js者对javascript面向对象的认识分析

作者: 来源:www.28hudong.com 2013-03-30 08:21:25 阅读 我要评论

复制代码 代码如下: 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逻辑上也比较清爽,对于多个事件的绑定还有待研究。

  推荐阅读

  asp删除mssql数据库中没有记录的图片代码

采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值>0,过可以得出结论 代码如下deal.asp 复制代码 代码如下:<%@ language="vbscri>>>详细阅读


本文标题:初学js者对javascript面向对象的认识分析

地址:http://www.17bianji.com/kaifa2/ASP/32018.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)