JavaScript implementation AOP (tangent-oriented programming)

What is AOP?

The main function of AOP (aspect-oriented programming) is to pull out functions unrelated to the core business logic modules, which are usually related to business logic, such as log statistics, security control, exception handling, and so on. After these functions are removed, they are then incorporated into the business logic module in the form of "dynamic weaving".

What benefits does AOP bring to us?

The advantage of AOP is that it can maintain the pure and high cohesion of the business logic module, and secondly, it can easily reuse the function modules such as log statistics.

JavaScript implementation of AOP ideas?

In general, the implementation of AOP in JavaScript refers to a function "dynamically weaving" into another function, the specific implementation of a number of techniques, the following I use the extension function.prototype to do this. Take a look at the following code:

Function.prototype.before =function(beforefn) {var_self = This;//Save the original function reference       return function() {//returns the "proxy function" that contains the original function and the new functionBeforefn.apply ( This, arguments);//execute new function, fix this           return_self.apply ( This, arguments);//executing the original function       }   }; Function.prototype.after=function(AFTERFN) {var_self = This; return function () {           varret = _self.apply ( This, arguments); Afterfn.apply ( This, arguments); returnret;   }   }; varFunc =function() {Console.log ("2")} func= Func.before (function() {Console.log ("1"); }). After (function() {Console.log ("3");  }) func (); 

The results of the implementation are as follows:

I put the two functions that are responsible for printing the number 1 and printing the number 3 to dynamically implant the Func function in an AOP manner. By executing the above code, we see that the console has successfully returned the execution Results 1, 2, 3.

This way of using AOP to add responsibility to a function is also a very special and ingenious decorator pattern implementation in JavaScript, let's try the Function.prototype.before's power, see the following code:

Function.prototype.before =function(beforefn) {var__self = This;//Save a reference to the original function        return function() {//returns the "proxy" function that contains the original function and the new functionBeforefn.apply ( This, arguments);//execute the new function, and ensure that this is not hijacked, the parameters accepted by the new function//will also be passed intact to the original function, the new function is executed before the original function            return__self.apply ( This, arguments);//executes the original function and returns the result of the original function, 2//and guarantees that this is not hijacked}} Function.prototype.after=function(AFTERFN) {var__self = This; return function () {            varret = __self.apply ( This, arguments); Afterfn.apply ( This, arguments); returnret;    }    }; document.getElementById= Document.getElementById.before (function() {alert (1);    }); varbutton = document.getElementById (' button ');

Execution Result:

We've done some decorating for document.getElementById (), and we'll execute the alert ("1") before each call to this method, but note that our statement is not written in document.getElementById ( The source of this method, but only in his outside to decorate him, so that the benefit is that we can not change the original method of the source of the case to add some new behavior for him. International practice, give a chestnut:

My colleague wrote a function to output the current time, and I now need to output the current weather and then output the current time, there are two ways to solve the idea:

(1) Traditional solution: Take a colleague's function and find out the code of his output time, and add the code to output the current weather before the code.

(2) Decorator mode solution: Take a colleague's function come over, do not look at his source code, directly to his function decoration, decorative things that is the output of the current weather code.

Both approaches solve the problem, but their starting point is completely different :

(1) The method is to transform the inside of the original function, we need to understand the source code, and then make changes.

(2) The method is to add a layer of the original function of the jacket, we do not have to control the internal implementation of the original function.

Now there's a new requirement: output the current temperature before the current time is output

(1) method, we in the first requirement has changed the colleague's code beyond recognition, and now have to re-understand the function inside, and modify (delete the output of the current weather code, and then add the output of the current temperature code).

(2) method, colleague original function is unchanged, we now give colleague's function to change a set (output current temperature) can be.

JavaScript implementation AOP (tangent-oriented programming)