javascript钩子之Backbone里的实现

　　前段时间，项目里有个需求，就是在某函数之前要添加一下验证，犹豫有很多地方需要添加一样的函数，而且要在这函数之后去执行以前的方法，所以打算用钩子这种东西去实现功能。在网上也看到了一些前辈写的钩子函数，功能大相径庭。就是定义一个数组，把你需要之前的数据插入到一个数组里，调用钩子的时候在把需要执行的功能依次的pop出来。还有一种实现是类似于代码劫持的概念。

var _alert = alert;
window.alert = function(s) {
       console.log("Hooked!");
        _alert(s);
}

套用之前的作者的话就是：这种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);
});

 总结：钩子函数在本项目的应用场景有两个

第一：在页面渲染之前调用钩子函数，统一入口，方便添加统一逻辑。

第二：在公共的函数入添加钩子函数，增加验证方法。