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被二次覆盖.
• 无侵入的统计代码.
• 组合代替继承.

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