标签：
前段时间，项目里有个需求，就是在某函数之前要添加一下验证，犹豫有很多地方需要添加一样的函数，而且要在这函数之后去执行以前的方法，所以打算用钩子这种东西去实现功能。在网上也看到了一些前辈写的钩子函数，功能大相径庭。就是定义一个数组，把你需要之前的数据插入到一个数组里，调用钩子的时候在把需要执行的功能依次的pop出来。还有一种实现是类似于代码劫持的概念。
1 var _alert = alert; 2 window.alert = function(s) { 3 console.log("Hooked!"); 4 _alert(s); 5 }
套用之前的作者的话就是：这种Hook方式跟闹着玩儿似的，用到实际生产上通用性不好，效率也不高。
就我自身的项目，我是采用了类似拦截的实现方式，因为我没有那么多的嵌套关系，不太需要数组去添加方法。
项目是用backbone+require开发的SAP应用。
hook.js
‘use strict‘; define([ ‘backbone‘, ‘underscore‘, ‘jquery‘ ], function(Backbone,underscore,$){ var Hook = Backbone.Hook = function(){ this.initialize.apply(this, arguments); } _.extend(Hook.prototype,Backbone.Events,{ initialize : function(){ _.bindAll(this,‘beforeAction‘,‘Action‘,‘beforeAction‘); this.addListenEvent(); }, /** * 添加验证钩子，处理权限验证时，无权限的控制方法。 * @param res */ premissionValidate : function(res){ console.log(res); }, /** * 钩子构造函数 * @param actionName * @param args * @param callBack * @constructor */ Action : function(args,callBack){ var actionName = args.actionName; if(actionName === undefined){ this.defaultAction(callBack); }else{ //this.trigger(actionName,callBack) this[actionName](callBack); } }, /** * 默认钩子处理函数 */ defaultAction : function(callBack){ callBack && callBack(); }, /** * 自定义的动作 * @param callBack */ beforeAction : function(callBack){ callBack && callBack(); }, afterAction : function(){ }, addListenEvent : function(){ this.on(‘Action‘,this.Action); this.on(‘beforeAction‘,this.beforeAction); this.on(‘premissionValidate‘,this.premissionValidate) } }); return Hook; });
首先在main函数里注册hook类
Backbone.hook = new hook();
调用方法
设置actionName, 为你之后要去在代码之前或之后执行的程序名。Action为钩子的构造函数。
$.extend(options,{ viewer : viewer, actionName : ‘beforeAction‘ }); Backbone.hook.trigger(‘Action‘,options,function(){ /** * 添加钩子，在页面渲染之前进行某些特殊的动作，默认动作为Action。 */ viewer.render(options); });
总结：钩子函数在本项目的应用场景有两个
第一：在页面渲染之前调用钩子函数，统一入口，方便添加统一逻辑。
第二：在公共的函数入添加钩子函数，增加验证方法。
标签：
原文地址：http://www.cnblogs.com/whitelist/p/4758367.html
