This is the 25th day of my participation in Gwen Challenge

The article guide

The agency mode is long, which is divided into the first, middle and next three chapters.

Implementing the Proxy pattern in JavaScript (Part 1)

What is the proxy mode? The simple implementation of proxy mode

Links: juejin. Cn/post / 697850…

Implementing the Proxy Pattern in JavaScript (Part)

Overview: Analyze the various uses of the proxy pattern

Links: juejin. Cn/post / 697903…

Implementing the Proxy pattern in JavaScript (Part 2)

ES6 Proxy API to implement a more convenient Proxy mode

Links: juejin. Cn/post / 697924…

What is the proxy pattern

The proxy pattern is a kind of structured design pattern (xiao Gray’s article considers that it can also be regarded as a behavioral design pattern). The proxy pattern provides a proxy object to an object, and the proxy object controls the reference to the original object. This is the definition of the proxy pattern. In layman’s terms, the core of the proxy pattern is to add the role of a mediator, the proxy, between the called and the caller.

Figure from Xiao Grey’s article “What is proxy Mode?”

In real life, for example, if we have rental needs, we may need to go through a real estate agent to let us know who can find a suitable landlord.

When applying for high-paying jobs, we also need to find headhunters to recommend the right companies to us.

The agency model is everywhere in real life…

Of course, you might think that the proxy pattern might make simple things more complicated, but the role of mediator actually saves you a lot of trouble and cost. The proxy pattern can avoid intruding on business classes in the code and separate out non-business helper functions like logging and transactions.

The proxy mode has the following two advantages:

Mediation isolation role:

In some cases, a client class may not want or be able to directly reference a delegate object, while a proxy class object may act as an intermediary between the client class and the delegate object, characterized by the fact that the proxy class and the delegate class implement the same interface.

Conforming to open-closed principles of code design:

In addition to acting as an intermediary between the client class and the delegate class, we can extend the functionality of the delegate class by adding additional functionality to the proxy class. By doing so, we only need to modify the proxy class without modifying the delegate class, in accordance with the open-closed principle of code design.

The proxy class is responsible for pre-processing messages for the delegate class, filtering messages, forwarding messages to the delegate class, and post-processing the returned results. The proxy class itself does not actually implement the service, but rather provides specific services by calling the related methods of the delegate class.

The real business functions are still implemented by delegate classes, but some common services can be added before and after the implementation of business functions. For example, if we want to add caching and logging to the project, we can use the proxy class to do so without opening the wrapped delegate class.

The proxy mode is similar to the decorator mode, but the decorator mode adds functionality to the decorator object. The proxy mode does not change the source object.

The main disadvantage of the proxy pattern is that it increases the complexity of the system, depending on whether the current scenario really needs to introduce the proxy pattern.

Implementing the proxy pattern

Here’s an example from the book JavaScript Design Patterns and Development Practices.

Xiao Ming wants to chase after a little sister and send a bunch of flowers to her. Simple examples of not using proxy mode and using proxy mode.

Do not use proxy mode

ES5

/ / flowers
var Flower = function(){};
/ / xiao Ming
var xiaoming = {
    sendFlower: function( target ){
        var flower = newFlower(); target.receiveFlower( flower ); }};/ / a little sister
var cuteGirl = {
    receiveFlower: function( flower ){
        console.log( 'Received flowers'+ flower ); }};// Xiao Ming gave the flowers directly to little sister
xiaoming.sendFlower( cuteGirl );
Copy the code

ES6

/ / flowers
class Flower {}/ / xiao Ming
let xiaoming = {
    sendFlower(target){
        let flower = newFlower(); target.receiveFlower( flower ); }}/ / a little sister
let cuteGirl = {
    receiveFlower(flower){
        console.log( 'Received flowers'+ flower ); }}// Xiao Ming gave the flowers directly to little sister
xiaoming.sendFlower( cuteGirl );
Copy the code

Using proxy mode

The above is not the use of the agency model example, Xiao Ming does not understand the little sister’s preferences, rushed to directly express the probability of rejection is very large, but Xiao Ming’s good friend just know the little sister’s roommate, roommate will be in a good mood, help Xiao Ming put flowers to the little sister.

ES5

/ / flowers
var Flower = function(){};
/ / xiao Ming
var xiaoming = {
    sendFlower: function( target){
        var flower = newFlower(); target.receiveFlower( flower ); }};/ / a good friend
var goodFriend = {
    receiveFlower: function( flower ){
        cuteGirl.listenGoodMood(function(){    // Monitor A's good moodcuteGirl.receiveFlower( flower ); }); }};/ / a little sister
var cuteGirl = {
    receiveFlower: function( flower ){
        console.log( 'Received flowers' + flower );
    },
    listenGoodMood: function( fn ){
        setTimeout(function(){    // Suppose that after 10 seconds A's mood improves
            fn();
        }, 10000); }};// Xiao Ming will be flowers to a good friend, entrust a good friend in the little sister in a good mood will be flowers to the little sister
xiaoming.sendFlower( goodFriend );
Copy the code

ES6

/ / flowers
class Flower {}/ / xiao Ming
let xiaoming = {
    sendFlower(target){
        let flower = newFlower(); target.receiveFlower( flower ); }};/ / a good friend
let goodFriend = {
    receiveFlower(flower){
        cuteGirl.listenGoodMood(() = > {    // Monitor A's good moodcuteGirl.receiveFlower( flower ); }); }};/ / a little sister
let cuteGirl = {
    receiveFlower( flower ){
        console.log( 'Received flowers' + flower );
    },
    listenGoodMood( fn ){
        setTimeout(() = > {    // Suppose that after 10 seconds A's mood improves
            fn();
        }, 10000); }};// Xiao Ming will be flowers to a good friend, entrust a good friend in the little sister in a good mood will be flowers to the little sister
xiaoming.sendFlower( goodFriend );
Copy the code

The resources

[cuG-gz] Advance of front-end knowledge — proxy mode

www.yuque.com/cuggz/feplu…

Proxy patterns for front-end design patterns

Juejin. Cn/post / 684490…

Comics: What is “agency mode”?

Mp.weixin.qq.com/s/O8_A2Ms9M…

JavaScript design patterns and development practices

www.ituring.com.cn/book/1632

Relearning JavaScript design patterns from ES6 (5): Proxy patterns and Proxies

Segmentfault.com/a/119000001…

Optimize the application using JavaScript native Proxy

Juejin. Cn/post / 684490…