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

This article introduces the relevant knowledge of "how to implement the subscriber pattern in the javascript design pattern". Many people will encounter this dilemma in the operation of the actual case, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

one。 A preliminary understanding of the agency model

Proxy mode is to provide an object with a substitute or placeholder to control access to it. Its use is to provide a stand-in object to control access to an object when it is not convenient for customers to access an object directly or does not meet their needs. Generally speaking, the agent is a middleman who is responsible for transmitting information between the customer and the seller, filtering the useless information and transmitting the information conducive to the success of the transaction to the seller, thus increasing the success rate of the transaction.

two。 The realization idea of Agent Mode

Now let's implement the agent model through an example of Xiao Ming sending flowers to the goddess.

No proxy mode is used

Let Flower = function () {}; let xiaomingFirst = {sendFlower (target) {let flower = new Flower (); target.receiveFlower (flower) }} let A = {receiveFlower (flower) {console.log ('received flowers')}} xiaomingFirst.sendFlower (A)

Refactoring using proxy mode

Set a demand: AA is Xiao Ming's goddess, AA is more likely to accept Xiao Ming flowers when he is in a good mood, and B is a good friend of AA and Xiao Ming, so Xiao Ming will give flowers to B and let B tell him his heart when AA is in a good mood.

Analysis: a new object B is added to the refactored code. At this time, B is the agent of AA. B listens to AA's good mood. It is assumed in the code that AA is in a better mood after 5 seconds, and B will send flowers.

Let xiaomingSencend = {sendFlower (target) {let flower = new Flower (); target.receiveFlower (flower);}} let AA = {receiveFlower () {console.log ('received flowers') }, listenGoodMood (fn) {setTimeout () = > {fn ();}, 5000);}} let B = {receiveFlower (flower) {AA.listenGoodMood () = > {AA.receiveFlower (flower) );}} xiaomingSencend.sendFlower (B); III. Agent pattern classification

The agent mode in the above code may not be so important, but it embodies the idea of the agent. if the goddess has some requirements, the boy who sends him flowers must be handsome and rich, but he cannot appear so powerful. therefore, the agent can help him filter out these boys who do not meet the requirements, reduce a lot of trouble, and maintain a good image of themselves. this is the use of the agent. Moreover, it is very expensive to buy a flower, not just new. Boys do not want to waste their own money, so they want to make sure that the goddess accepts their own flowers, so ask the agent to ask for help. If the goddess accepts it, ask the agent to help buy one for the goddess. This reduces the loss of boys but also achieves the goal, which leads to the following two agency modes.

Protection agent: the requirements of the ontology are implemented directly in the agent to filter out requests from visitors who do not meet the requirements.

Virtual proxy: wait until you are ready to request an ontology for some expensive operations (mainly for actual development)

four。 Practical Application of Virtual Agent Mode

1. Realization of picture preloading by virtual agent

Analysis: first load the local image, and then start to initiate a request to obtain the image. When the image is loaded and obtained successfully, call myImage to replace the image displayed when the image is preloaded.

Let myImage = function () {let img = document.createElement ('img'); document.body.appendChild (img); return {setSrc (src) {img.src = src;} (); proxyImage = function () {let img = new Image Img.onload = function () {myImage.setSrc (this.src);} return {setProxyImage (src) {myImage.setSrc ("https://cache.yisu.com/upload/information/20220112/112/58.jpg@1280w_1l_2o_100sh.jpg");) / / here to load loading images to occupy space, local images (authors use network images) img.src = src;} (); proxyImage.setProxyImage ("https://cache.yisu.com/upload/information/20220112/112/59.jpg@1280w_1l_2o_100sh.jpg");"

two。 Cache proxy

Analysis: cache the results of ontology calculation in the proxy, and if you encounter the same request next time, get it directly from the cache to reduce access to the ontology and reduce performance consumption.

/ / function let mult = function (... arg) {console.log ('I executed') let m = 1; for (let I = 0 synchronousFile l = arg.length; I {synchronousFile (cache.join (',')); clearInterval (time); time = null Cache.length = 0;}, 3000);}} () / add Click to execute let checkboxList = document.getElementsByTagName ('input'); for (let I = 0, l = checkboxList.length; I < l If +) {checkboxList [I]. Onclick = function () {checkboxList (this.checked = true) {checkboxList [1];} five. The use significance and requirements of agents

Meaning: first of all, we introduce the principle of object-oriented design, the principle of single responsibility, an object should assume as little responsibility as possible, preferably one, if it takes on too much responsibility, it will improve the coupling of the code. this leads to fragile and low-cohesive designs. When a change occurs, the design may be accidentally destroyed, even if the implementation of the same requirements can encapsulate the code into a function, but the best way to deal with it is to introduce a proxy pattern

Requirements: agents and ontology interfaces should be consistent, and agents can be used instead of agents wherever ontology is used.

That's all for "how to implement the subscriber pattern in the javascript design pattern". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.