Programming approach — AOP (Aspect oriented programming)

What is AOP (Aspect Oriented Programming)

A technique for dynamically and uniformly adding a particular function to a program without modifying the source code by precompiling and running its dynamic proxy implementation. AOP is actually a continuation of the GoF design pattern, which strives for decoupling between caller and caller, improving code flexibility and extensibility, and AOP can be said to be an implementation of this goal.

Its core concept is a side-oriented design concept that separates crosscutting concerns from main concerns, and separates specific codes from business logic. Business codes do not contain specific codes, and the relationship between business logic and specific codes is encapsulated and maintained through the side.

The main points:

• Sides are used to describe cross-cutting concerns that are scattered across a class, function, or object, such as the common part of an immovable object
• The aspect concept is derived from the improvement of OOP (object-oriented programming), which can also improve traditional functions. AOP is not a replacement but a complement to OOP
• Separating crosscutting concerns from primary concerns is a core concept of side-oriented programming

The main scene

Logging, performance statistics, security controls, transaction handling, exception handling, and more. Here’s an example: For example, a buried spot scenario:

const logger = console.log
// It can be used when it is introduced
logger(The button was clicked.)

function doSomething(){
    // Business logic
}

const hadnlerCLICK = () = >Logger (Log logic"); doSomething() logger("Some logic")}Copy the code

If there are 30 buttons, the business logic is different, and the information is the same, then we need to write 30 of these functions, and they are coupled with the business, and maintenance is very troublesome.

Separation of concerns

Implementation approach

As for JS, due to the characteristics of the language itself, it has the ability to dynamically insert logic at runtime. The point is that adding functionality to the original function does not change the function itself.

After all, functions can take arguments of any kind, including functions. When we pass in a function, we have a lot of leeway to manipulate it. We can do this by saving the original function and adding call or apply with subsequent arguments. In addition, to add a property to each function, we can operate on the prototype.

Function.prototype.befored = function (fn) {
  let that = this;
  return function () {
    fn.apply(this.arguments);
    that.apply(this.arguments); }}Function.prototype.after = function (fn) {
  let that = this;
  return function () {
    that.apply(this.arguments);
    fn.apply(this.arguments); }}const doSomething = () = >{
    console.log('doSomething')}let clickHandler = () = >{
   // n lines of code
   doSomething() 
   / / n lines of code
}
clickHandler = clickHandler.before(() = >{
     logger('doSomething before')
}).after(() = >{
     logger('after the doSomething')
})
clickHandler() // The results are as expected
Copy the code

conclusion

AOP combined with THE characteristics of JS, can try a variety of possibilities, combined with business, choose the appropriate programming mode, such as HOC, ES7 decorator pattern, HOF, etc