Implementation of JavaScript hooks in the backbone

　　Some time ago, the project has a requirement, is to add a validation before a function, hesitate there are many places need to add the same function, and after this function to execute the previous method, so it is intended to use hooks this thing to achieve the function. On the internet also saw some predecessors wrote the hook function, the function is very different. is to define an array, insert the data you need before inserting it into an array, and call the hooks to pop out the functions that need to be executed sequentially. There is also an implementation that is similar to the concept of code hijacking.

1 var _alert = alert; 2 function (s) {3        console.log ("hooked!") ); 4         _alert (s); 5 }

The former author's words are: this hook way with a joke, with the actual production of the general poor, inefficient.

On my own project, I used a similar interception implementation, because I don't have so many nested relationships, and I don't need arrays to add methods.

The project is an SAP application developed with Backbone+require.

Hook.js

' Use strict ';d efine ([' Backbone ',    ' Underscore ',    ' jquery '], function(backbone,underscore,$) {varHook = Backbone.hook =function(){         This. initialize.apply ( This, arguments); } _.extend (hook.prototype,backbone.events,{initialize:function() {_.bindall ( This, ' beforeaction ', ' Action ', ' beforeaction ');  This. Addlistenevent (); },        /** * Add validation hooks, handle permission validation, no permissions control method. * @param res*/premissionvalidate:function(res) {Console.log (res); },        /** * Hook constructor * @param actionname * @param args * @param callBack * @constructor */Action:function(args,callback) {varActionName =Args.actionname; if(ActionName = = =undefined) {                 This. DefaultAction (CallBack); }Else{                //This.trigger (actionname,callback)                 This[ActionName] (callBack); }        },        /** * Default hook handler function*/DefaultAction:function(callBack) {CallBack&&CallBack (); },        /** * Custom action * @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)}    }); returnHook;});

First, the hook class is registered in the main function.

new Hook ();

Calling methods

Set ActionName, which is the program name you want to execute before or after the code. The action is the constructor of the hook.

$.extend (options,{    viewer:viewer,    ' beforeaction '}); Backbone.hook.trigger (' Action ', options,function() {    /* * * *     Add hooks, Some special actions are performed before the page renders, and the default action is action.      */     Viewer.render (options);});

Summary: The hook function in this project's application scenario has two

First: Call the hook function before the page rendering, unified the entrance, convenient to add unified logic.

Second: Add a hook function to the public function, adding a validation method.

Implementation of JavaScript hooks in the backbone