zoukankan      html  css  js  c++  java
  • *JS自定义方法

    在c#中有delegate,还有特殊的可以直接应用于事件编程的delegate,那就是event。而在js中没有c#的event,更没有delegate,有的只是dom元素内置的的native的不可扩展的event,比如无法为input元素添加事件,只能在其拥有的事件(如onclick=handler)上扩展应用。那么能不能做到自定义的事件模拟效果呢?答案是肯定的,也就是本文的主题。
        首先弄明白一下事件的意图——可以在发生一件事的时候执行额外的代码,如document.attachEvent('onclick', function(){alert('u click document')}),当点击页面时(事件发生了),就会执行我们为其挂接的其它代码(js中以function为语句集合,以下称为function),当然我们可以在一个事件上挂接任意多的function,这样就实现了一种灵活的可扩展编程接口。试想如果可以像在元素事件扩展应用一样可以在任意对象的任意方法上扩展,那对于js编程来讲就更加灵活了。先看一个例子,平时我们把相对对立的一个功能命名为一个function,并在需要的地方(通常是另一个function)调用以实现代码复用:
      function F(){
       this.method = function(){
       alert('f.method is called')
       g();
       }
      }
      function g(){
       alert(123)
      }
      var f = new F();
      f.method()
      
      
      我们把f.method中直接调用g改写一下,封装到一个Event对象中达到一样的效果,代码如下:
      var Event = {
       __list:[],
       observe:function(obj, ev, fun){
       this.__list.push({o:obj, e:ev, f:fun})
       },
       occor:function(obj, method){
       var arr = []
       for(var i=0; i<this.__list.length; i++){
       if(this.__list[i].o==obj && this.__list[i].e==method) arr.push(this.__list[i]);
       }
       for(var i=0; i<arr.length; i++){
       arr[i].f();
       }
       }
      }
      
      function F(){
       this.method = function(){
       alert('f.method is called')
       Event.occor(this, 'method');
       }
      }
      
      var f = new F();
      Event.observe(f, 'method', function(){alert(123)})
      f.method()这样乍看上去好像费了“太多”功夫,但却把“在f中调用g的写法”更通用化了,如果要在f中调用h则只需要多些一行Event.occor(this, 'methodName'),写到这里你肯定也注意到methodName的写法和最开始的写法是一样的,都是硬编的不具灵活性,如果在每个类的方法中都写入Event.occor(this, 'method')就太不雅观了,也背离了我们的初衷,动态修改一下method把它加到最后一行就ok了,下一步就是解决它,改进代码如下:
      
      var Event = {
       __list:[],
       observe:function(obj, ev, fun){
       this.__list.push({o:obj, e:ev, f:fun})
       },
       occor:function(obj, method){
       var arr = []
       for(var i=0; i<this.__list.length; i++){
       if(this.__list[i].o==obj && this.__list[i].e==method) arr.push(this.__list[i]);
       }
       for(var i=0; i<arr.length; i++){
       arr[i].f();
       }
       },
       inject:function(obj){
       for(var p in obj){
       obj[p] = new Function(obj[p].toString().replace('function(){', '').replace('}', 'Event.occor(this,p)'))
       }
       }
      }
      
      function F(){
       this.method = function(){
       alert('f.method is called')
       }
      }
      
      var f = new F();
      Event.inject(f);
      Event.observe(f, 'method', function(){alert(123)})
      f.method()我们把显示的在被调用方法体内调用Event.occor改写到Event.inject中。到此我们就简单(还有一些安全代码没有处理,如没有判断obj[p]是否需要被改写、没有测试效率问题,没有处理更多添加Event.occor时的逻辑判断,下一步准备把它实现为一个Observeable对象,就更加灵活了)的完成了自定义事件。
  • 相关阅读:
    把打好的war包部署到虚拟机上,mysql数据库在本机上,启动后,网页查询不到数据,异常
    NAT模式下的虚拟机
    Jsp有四种属性范围和Jsp的九大内置对象
    Tomcat笔记
    视频编解码相关基础知识(一)----H.264编码和H.265编码的区别
    相机中的一些常见参数及相关概念
    Linux常用命令
    基于Linux的C编程(一)
    Shell程序设计
    Linux文本编辑器
  • 原文地址:https://www.cnblogs.com/dwjaissk/p/595758.html
Copyright © 2011-2022 走看看