2017补全计划-前端AOP编程-学习笔记

AOP的学习笔记，参考资料

JavaScript 基于对象事件的 AOP 实现

用AOP改善JavaScript代码

学习笔记 ： AOP 主要思想是把一些与业务无关但又在多个模块使用的功能分离出来

如下面代码片段（注释是我的理解），如果想在函数a之前加入一段代码（又不希望直接修改函数a），可以用 a.before(b)的方式，b是另一个函数，把需要的代码段写在b里面。

Function.prototype.before = function( func ) {  
           // func是加入的新函数 如在a函数前加入b函数
           // 应该写成 a.before(b)
           // 这里的this指a函数 ， func指b函数

           // 作用域问题，copy this
           var __self = this;  
           return function() {  
                  // 在返回的函数内部，实现方式都不一样
                  // 关键的逻辑在于
                  // 1.需要调用新函数b 2.再调用函数a
                  if ( func.apply( this, arguments ) === false ) {  
                        return false;  
                  }  
               return __self.apply( this, arguments );  
           }  
    }  

    // after逻辑和before相同，区别在于a和b的调用顺序相反
    Function.prototype.after = function( func ) {  
        var __self = this;  
           return function() {  
                  var ret = __self.apply( this, arguments );  
                  if( ret === false) {  
                         return false;  
                  }  
                  func.apply( this, arguments );  
                  return ret;  
           }  
    }  

对于AOP编程的进一步使用，比如职责链模式，a.before(b) 只是为了不污染a的函数环境，而 如果在 a前面需要连续加多个代码端，比如 注册验证，需要检验多个信息（基本信息，身份证，密码确认等等），就需要 a.before(b).before(c).before(d)这样子，而且如果b c d任意一个不通过就注册不成功，这时候需要修改before函数

Function.prototype.before = function( func ) {  
           var __self = this;  
           return function() {  
               // 如果 函数 执行不成功
               if ( func.apply( this, arguments )) {  
                     //return回去，不进行原函数调用;  
                     return ;  
               }  
               return __self.apply( this, arguments );  
           }  
    }  

修改后的before函数，只要新增函数执行返回false，就不再继续进行原函数调用，也就是b c d其中一个false，注册过程不成功

这是目前对AOP的学习笔记，后续还有：

• 防止window.onload被二次覆盖.
• 无侵入的统计代码.
• 组合代替继承.

这些学习过程中觉得似懂非懂的（可能需要实战才真的理解）