读书人
栏目▼

[设计形式]JavaScript钩子机制的应用场

发布时间： 2013-10-30 12:56:21 作者： rapoo

[设计模式]JavaScript钩子机制的应用场景与实现

当我们面对比较复杂的前端项目时，我们经常会采用模块化的方式来对JavaScript代码进行解耦，以方便对代码的管理和维护，以下是一个简单的立即执行函数实现的模块化例子：


  1. var Common = (function(){
  2.     var func = function(){
  3.         // 全局公用方法
  4.     }
  5.     return {
  6.         func : func
  7.     }
  8. })();
  10. var ModuleA = (function(){
  11.     var _count = 1;
  12.     var init = function(){
  13.         // 独立模块逻辑
  14.     }
  15.     var getCount = function(){
  16.         return _count;
  17.     }
  18.     return {
  19.         init : init,
  20.         getCount : getCount
  21.     }
  22. })();


模块只对外暴露外部需要的接口，而外部模块不需要关心其内部的运行逻辑，只需要知道调用接口的方式和返回结果，这样就实现了模块的“低耦合，高内聚”。


看起来很美好，可是当项目的逻辑变的越来越复杂时，比如A模块中某个针对全局公用的逻辑，可能在B模块的某种特定情况下需要进行一些额外的逻辑操作，该怎么办呢？


  1. var Common = (function(){
  2.     var func = function(){
  3.         // 全局公用方法
  4.         if(typeof ModuleA != 'undefined' && ModuleA.getCount() > 0){
  5.             // 模块A需要进行的额外逻辑操作
  6.         }
  7.     }
  8.     return {
  9.         func : func
  10.     }
  11. })();
  13. var ModuleA = (function(){
  14.     var _count = 1;
  15.     var init = function(){
  16.         // 独立模块逻辑
  17.     }
  18.     var getCount = function(){
  19.         return _count;
  20.     }
  21.     return {
  22.         init : init,
  23.         getCount : getCount
  24.     }
  25. })();


不知道当你看到Common.func中间的那一坨东西的时候，会不会突然怒吼一声：“卧槽，尼玛怎么这么恶心！”= =。。


明明是A模块的逻辑，却恶心地出现在了公用模块里，如果这样的特殊逻辑多起来之后，Common模块会不会变成这样？


  1. var Common = (function(){
  2.     var func = function(){
  3.         // 全局公用方法
  4.         if(typeof ModuleA != 'undefined' && ModuleA.getCount() > 0){
  5.             // 模块A需要进行的额外逻辑操作
  6.         }
  7.         if(typeof ModuleB != 'undefined' && ModuleB.getWhat() != 'something'){
  8.             // 模块B需要进行的额外逻辑操作
  9.         }
  10.         // ...
  11.         if(typeof ModuleZ != 'undefined' && ModuleB.isWhat() !== false){
  12.             // 模块Z需要进行的额外逻辑操作
  13.         }
  14.     }
  15.     return {
  16.         func : func
  17.     }
  18. })();


天哪，简直无法忍受。。


如果。。如果有这么一个钩子（Hook），可以把额外的逻辑代码挂在Common.func上，而Common.func执行的时候顺便把钩子上挂着的代码也执行了，那该多好啊。。这样的话既可以实现特殊的额外操作，又可以保持模块的低耦合和高内聚：


  1. var Common = (function(){
  2.     var func = function(){
  3.         // 执行挂在这个方法的钩子上的所有额外逻辑代码
  4.         Hook.doActions();
  5.         // 全局公用方法
  6.     }
  7.     return {
  8.         func : func
  9.     }
  10. })();
  12. var ModuleA = (function(){
  13.     var _count = 1;
  14.     var init = function(){
  15.         // 用钩子把额外的逻辑挂到Common.func上
  16.         Hook.addAction(Common.func, function(){
  17.             if(_count > 0){
  18.                 // 增加的额外逻辑操作
  19.                 console.log('看看执行到没？');
  20.             }
  21.         });
  22.         // 独立模块逻辑
  23.     }
  24.     var getCount = function(){
  25.         return _count;
  26.     }
  27.     return {
  28.         init : init,
  29.         getCount : getCount
  30.     }
  31. })();


没有不可能。借鉴了一下WordPress的Hook机制，一个基于JavaScript钩子机制模块就实现了。


当然，一个完整的钩子机制需要考虑的并不像上面说的那么简单，具体的实现大家请看代码，或者懒得看的可以自己尝试实现，我就不在赘述了：


  1. /**
  2.  * 钩子模块（动作是对方法的逻辑进行补充，过滤器是对方法的返回值进行处理）
  3.  *
  4.  * @author Lanfei
  5.  * @date 2013.10.28
  6.  * 
  7.  * function handler(num1, num2){ 
  8.  *     Hook.doActions();
  9.  *     var value = num1 + num2;
  10.  *     return Hook.applyFilters(value);
  11.  * }
  12.  * console.log('before hook:');
  13.  * console.log(handler(1, 2));
  14.  * function action(num1, num2){
  15.  *     console.log('the numbers are ' + num1 + ' and ' + num2 + '.');
  16.  * }
  17.  * function filter(value){
  18.  *     return 'the result is ' + value + '.';
  19.  * }
  20.  * Hook.addAction(handler, action);
  21.  * Hook.addFilter(handler, filter);
  22.  * console.log('after hook: ');
  23.  * console.log(handler(1, 2));
  24.  * 
  25.  */
  27. var Hook = (function(){
  29.     var addAction = function(method, action, priority){
  30.         _initHook(method);
  31.         var actions = method['__hooks__'].actions;
  32.         actions.push({
  33.             action : action,
  34.             priority : priority || 10
  35.         });
  36.         actions.sort(_compare);
  37.     }
  39.     var doActions = function(){
  40.         var method = Hook.doActions.caller;
  41.         _initHook(method);
  42.         var actions = method['__hooks__'].actions;
  43.         if(arguments.length == 0){
  44.             arguments = method.arguments;
  45.         }
  46.         for(var i in actions){
  47.             if(actions[i].action.apply(method, arguments) === false){
  48.                 return false;
  49.             }
  50.         }
  51.     }
  53.     var hasAction = function(method, action){
  54.         _initHook(method);
  55.         var actions = method['__hooks__'].actions;
  56.         if(actions.length > 0 && action !== undefined){
  57.             for(var i in actions){
  58.                 if(actions[i].action == action){
  59.                     return true;
  60.                 }
  61.             }
  62.             return false;
  63.         }else{
  64.             return actions.length > 0;
  65.         }
  66.     }
  68.     var removeAction = function(method, action){
  69.         _initHook(method);
  70.         var actions = method['__hooks__'].actions;
  71.         if(actions.length > 0){
  72.             if(action !== undefined){
  73.                 for(var i in actions){
  74.                     if(actions[i].action == action){
  75.                         delete actions[i];
  76.                         return;
  77.                     }
  78.                 }
  79.             }else{
  80.                 method['__hooks__'].actions = [];
  81.             }
  82.         }
  83.     }
  85.     var addFilter = function(method, filter, priority){
  86.         _initHook(method);
  87.         var filters = method['__hooks__'].filters;
  88.         filters.push({
  89.             filter : filter,
  90.             priority : priority || 10
  91.         });
  92.         filters.sort(_compare);
  93.     }
  95.     var applyFilters = function(value){
  96.         var method = Hook.applyFilters.caller;
  97.         _initHook(method);
  98.         var filters = method['__hooks__'].filters;
  99.         for(var i in filters){
  100.             value = filters[i].filter.call(method, value);
  101.         }
  102.         return value;
  103.     }
  105.     var hasFilter = function(method, filter){
  106.         _initHook(method);
  107.         var filters = method['__hooks__'].filters;
  108.         if(filters.length > 0 && filter !== undefined){
  109.             for(var i in filters){
  110.                 if(filters[i].filter == filter){
  111.                     return true;
  112.                 }
  113.             }
  114.             return false;
  115.         }else{
  116.             return filters.length > 0;
  117.         }
  118.     }
  120.     var removeFilter = function(method, filter){
  121.         _initHook(method);
  122.         var filters = method['__hooks__'].filters;
  123.         if(filters.length > 0){
  124.             if(filter !== undefined){
  125.                 for(var i in filters){
  126.                     if(filters[i].filter == filter){
  127.                         delete filters[i];
  128.                         return;
  129.                     }
  130.                 }
  131.             }else{
  132.                 method['__hooks__'].filters = [];
  133.             }
  134.         }
  135.     }
  137.     var _compare = function(hook1, hook2){
  138.         return hook1.priority < hook2.priority;
  139.     }
  141.     var _initHook = function(method){
  142.         if(! method['__hooks__']){
  143.             method['__hooks__'] = {
  144.                 actions : [],
  145.                 filters : []
  146.             };
  147.         }
  148.     }
  150.     return {
  151.         addAction : addAction,
  152.         doActions : doActions,
  153.         hasAction : hasAction,
  154.         removeAction : removeAction,
  155.         addFilter : addFilter,
  156.         applyFilters : applyFilters,
  157.         hasFilter : hasFilter,
  158.         removeFilter : removeFilter
  159.     };
  160. })();


PS：发现我写博客不怎么喜欢用图片，不知道大家看起来会不会不太喜欢= =。。



=======================签 名 档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/10/1730.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================


读书人网 >软件开发

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net