javascript AOP的实现

以前学习java的Spring框架时，这是个很强大的东西，用于实现调用者和被调用者之间的解耦。虽然在JS中也提供了call与apply动态改变调用者，但在复杂的UI组件中，这是远远不够了。
以下是我最初的实现，它取用的方式是在某个实例方法的前面或后面织入通知函数。

// pointcut: 织入点对象 ,target:被织入的对象 ,method:被织入的方法名字 ,advice: 通知函数
function Person(){
  this.say =  function(){
    alert("高谈阔论！");
  }
  this.cry =  function(){
    alert("鬼哭神嚎！");
  }
  this.round =  function(){
    alert("天地无用！");
  }
}
Aspects = function(){};
Aspects.prototype={
  before:function(target,method,advice){
    (advice)();
    for(var i in target){
      if(i == method){
        target[i]();
      };
    };
  },
  after:function(target,method,advice){
 
    for(var i in target){
      if(i == method){
        target[i]();
      };
    };
    (advice)();
  },
  around:function(target,method,advice){
    (advice)();
    for(var i in target){
      if(i == method){
        target[i]();
      };
    };
    (advice)();
  }
}
window.onload = function(){
  var t = new Person;
  var a = new Aspects;
  a.before(t,"say",function(){alert("一马当先")})
  a.after(t,"cry",function(){alert("事后孔明")})
  a.around(t, "round", function(){alert("十面埋伏")})
  alert("===========================");
  t.say();
}

非常糟糕！它马上就执行了，而不等到我们调用t.say()时执行！改变一下思路，把通知函数织入实例方法中，然后在这个被织入的方法中执行原来的逻辑与新织入的逻辑！

function Person(){
        this.say =  function(name){
          alert("我的名字叫做"+name+"……");
        }
      }
      Aspects = function(){};
      Aspects.prototype={
        before:function(target,method,advice){
          var original  = target[method];
          target[method] = function(){
            (advice)();
            original();
          }
          return target
        },
        after:function(target,method,advice){
          var original  = target[method];
          target[method] = function(){
            original();
            (advice)();
          }
          return target
        },
        around:function(target,method,advice){
          var original  = target[method];
          target[method] = function(){
            (advice)();
            original();
            (advice)();
          }
          return target
        }
      }
      window.onload = function(){
        var t = new Person;
        var a = new Aspects;
        t = a.before(t,"say",function(){alert("请你介绍一下自己！")});
        alert("===========================")
        t.say("司徒正美");
      }

发现不能传入参数，我们可以用apply来绑定参数。之所以选择apply，是因为它比call更灵活。

/******************略**********************/
     before:function(target,method,advice){
           var original  = target[method];
          target[method] = function(){
            (advice)();
             original.apply(target, arguments);
          }
          return target
        },
/******************略**********************/

最后放出一个现实点的例子吧，看看你能联想到什么？！

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript">
     function voice(){
       alert("救命啊！");
     }
      Aspects = function(){};
      Aspects.prototype={
        before:function(target,method,advice){
           var original  = target[method];
          target[method] = function(){
            (advice)();
             original.apply(target, arguments);
          }
          return target
        },
        after:function(target,method,advice){
          var original  = target[method];
          target[method] = function(){
            original.apply(target, arguments);
            (advice)();
          }
          return target
        },
        around:function(target,method,advice){
          var original  = target[method];
          target[method] = function(){
            (advice)();
            original.apply(target, arguments);
            (advice)();
          }
          return target
        }
      }
      window.onload = function(){
        var bn = document.getElementById("bn");
        var a = new Aspects;
        a.after(bn,"onclick",function(){alert("HELP！HELP！")});
      }
    </script>  
    <title>非法修改button的onclick事件</title>
  </head>
  <body>
   <input onclick="voice()" type="button" id="bn" value="动我就叫人来">
  </body>
</html>

链接: https://fly63.com/article/detial/8547

javascript AOP的实现

JavaScript是怎样AOP实现？

设计模式之面向切面编程AOP

JS面向切面编程AOP