javascript钩子之Backbone里的实现

  前段时间,项目里有个需求,就是在某函数之前要添加一下验证,犹豫有很多地方需要添加一样的函数,而且要在这函数之后去执行以前的方法,所以打算用钩子这种东西去实现功能。在网上也看到了一些前辈写的钩子函数,功能大相径庭。就是定义一个数组,把你需要之前的数据插入到一个数组里,调用钩子的时候在把需要执行的功能依次的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);
});

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

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

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

 

posted @ 2015-08-25 19:08  angel_loong  阅读(531)  评论(0编辑  收藏  举报