How to implement AOP in JavaScript

Below I will share with you an article on how to implement AOP in JavaScript (aspect-oriented programming, decorator pattern). It has a good reference value and I hope it will be helpful to everyone.

What is AOP?

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 and security control. , exception handling, etc. After extracting these functions, they are then incorporated into the business logic module through "dynamic weaving".

What benefits can AOP bring us?

The benefit of AOP is firstly that it can keep the business logic module pure and highly cohesive, 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. Please look at the following code:

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 result is as follows:

I am responsible for printing the numbers 1 and The two functions that print the number 3 are dynamically implanted with the func function through AOP. 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 did some for document.getElementById() Decoration, we will execute the alert("1") statement every time we call this method in the future, but please note that our statement is not written in the source code of the document.getElementById() method, but only in it. Decoration is added to the outside of it. The advantage of this is that we can add some new behaviors to it without changing the source code of the original method. 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 its function. The decoration is the code that outputs the current weather.

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

(1) Method is to transform the original function Internally, we need to understand the source code and then make modifications.

(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, first output the current temperature

(1) Method, we are in Chapter 1 A requirement has changed a colleague's code beyond recognition, and now it is necessary 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).

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to write the multiplication table using JS

How to implement HTML attribute binding in Angular4

Use Nodejs to connect to mysql to implement basic operations

How to configure Sass in vue scaffolding

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