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:

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

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

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!