JavaScript implementation of AOP examples

The main function of AOP (aspect-oriented programming) is to extract some functions that have nothing to do with the core business logic module. These functions that have nothing to do with the business logic usually include log statistics, security control, exception handling, etc. After extracting these functions, they are then incorporated into the business logic module through "dynamic weaving". This article will share with you a method of implementing AOP in JavaScript (aspect-oriented programming, decorator pattern). It has a good reference value and I hope it will be helpful to everyone.

What benefits can AOP bring us?

The benefit of AOP is firstly that it can maintain the purity and high cohesion of business logic modules, and secondly that it can easily reuse functional modules such as log statistics.

What are the ideas for implementing AOP in JavaScript?

Usually, implementing AOP in JavaScript means "dynamically weaving" a function into another function. There are many specific implementation techniques. Below I use extended Function.prototype to do this. a little. Please look at the code below:

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函数引用
  return function () { //返回包含了原函数和新函数的"代理函数"
   beforefn.apply(this, arguments); //执行新函数，修正this
   return _self.apply(this, arguments); //执行原函数
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

The execution results are as follows:

I dynamically use AOP to print the two functions responsible for printing the number 1 and the number 3. Implant the func function. By executing the above code, we see that the console successfully returns execution results 1, 2, and 3.

This method of using AOP to add responsibilities to functions is also a very special and clever implementation of the decorator pattern in the JavaScript language. Let’s try the power of Function.prototype.before. Please see The following code:

Function.prototype.before = function (beforefn) {
  var __self = this; // 保存原函数的引用
  return function () { // 返回包含了原函数和新函数的"代理"函数
   beforefn.apply(this, arguments); // 执行新函数，且保证 this 不被劫持，新函数接受的参数 // 也会被原封不动地传入原函数，新函数在原函数之前执行
   return __self.apply(this, arguments); // 执行原函数并返回原函数的执行结果， 2 // 并且保证 this 不被劫持
  }
 }
 Function.prototype.after = function (afterfn) {
  var __self = this;
  return function () {
   var ret = __self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 document.getElementById = document.getElementById.before(function(){ alert (1);
 });
 var button = document.getElementById( 'button' );

Execution result:

We have made some decorations for document.getElementById(). In the future, we will first Execute the alert("1") statement, but please note that our statement is not written in the source code of the document.getElementById() method, but only decorated outside it, which brings benefits That is, we can add some new behaviors to the original method without changing the source code. International practice, for example:

My colleague wrote a function that can output the current time, and my current need is to output the current weather and then the current time. There are two solutions:

(1) Traditional solution: Take your colleague’s function, find his code that outputs the time, and add the code that outputs the current weather before these codes

(2) Decorator pattern solution: Take your colleague function, you don’t need to look at its source code, just decorate it directly. The decoration is the code that outputs the current weather.

Both methods solve the problem, but their starting points are completely different:

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

(2) The method is to add a layer of coat to the original function, and we don’t have to worry about the internal implementation of the original function at all.

Now there is a new requirement: before outputting the current time, output the current temperature first

(1) Method, in the first requirement, we have changed our colleague’s code beyond recognition. , now we need to re-understand the inside of the function and modify it (delete the code that outputs the current weather, and then add the code that outputs the current temperature).

(2) Method, the original function of the colleague has not changed. Now we can just change the function of the colleague (output the current temperature).

Related recommendations:

Explanation on how to implement aop annotation in spring

Why use AOP

Talk about AOP programming in Javascript

The above is the detailed content of JavaScript implementation of AOP examples. For more information, please follow other related articles on the PHP Chinese website!