Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "sample analysis of the agent pattern in the web front end", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of the agent pattern in the web front end".

Agent mode (Proxy Pattern)

Is to provide a substitute or placeholder for an object to control access to it

Suppose that when A receives flowers when he is in a good mood, Xiao Ming has a chance of success in confessing his love.

60%, and when A receives flowers when he is in a bad mood, the success rate of Xiao Ming's confession is infinitely close to 0. Xiao Ming and A have only known each other for two days and can't tell when An is in a good mood. If you give the flowers to An inappropriately, there is a great possibility that the flowers will be thrown away directly. This bouquet of flowers was bought by Xiao Ming after eating instant noodles for 7 days. But A's friend B knows A very well, so Xiao Ming just gives the flowers to BMagee B to monitor A's mood changes, and then chooses A to hand over the flowers to A when he is in a good mood. The code is as follows:

Let Flower = function () {} let xiaoming = {sendFlower: function (target) {let flower = new Flower () target.receiveFlower (flower)}} let B = {receiveFlower: function (flower) {A.listenGoodMood (function () {A.receiveFlower (flower)})} let A = {receiveFlower: function (flower) {console.log ('received flowers' + flower)} ListenGoodMood: function (fn) {setTimeout (function () {fn ()}, 1000)} xiaoming.sendFlower (B)

Scene

HTML element event proxy

1 2 3 let ul = document.querySelector ('# ul'); ul.addEventListener ('click', event = > {console.log (event.target);})

Ruan Yifeng Proxy, proxy of ES6

JQuery.proxy () method

Advantages

The proxy mode can separate the proxy object from the called object, which reduces the coupling degree of the system. The proxy pattern acts as an intermediary between the client and the target object, which can protect the target object.

The proxy object can expand the function of the target object; it can be done by modifying the proxy object, which conforms to the principle of opening and closing.

Shortcoming

The speed of processing requests may be different, and there is overhead in indirect access.

The above is all the contents of the article "sample Analysis of Agent patterns in the web Front end". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.