Explanation of the proxy mode of the JavaScript design mode, and the javascript Design Mode

Explanation of the proxy mode of the JavaScript design mode, and the javascript Design Mode

Proxy mode is a very common mode. For example, the VPN tool we use and the agent of star are examples of proxy mode. However, some people may wonder why a shell needs to be added in the middle because the object can be directly accessed? This also refers to the benefits of the proxy mode. In my opinion, the biggest advantage of the proxy mode is that it can add new features or actions to the original object while not moving the original object.

/*** Pre: Agent Mode * James pursues A. B is A good friend of A. James is rather shy. Sorry, he just handed over the flowers to A. * then James handed over the flowers to B, then B handed over to. * // ----------- Example 1 --------- // do not use the proxy var Flower = function () {}; var xiaoming = {sendFlower: function (target) {var flower = new Flower (); target. receiveFlower (flower) ;}}; var A = {receiveFlower: function (flower) {console. log ("received flowers:" + flower) ;}}; xiaoming. sendFlower (A); // ----------- Example 2 -------------- // use the proxy 1var Flower = func Tion () {}; var xiaoming = {sendFlower: function (target) {var flower = new Flower (); B. receiveFlower (flower) ;}}; var B ={ receiveFlower: function (flower) {. receiveFlower (flower) ;}}; var A = {receiveFlower: function (flower) {console. log ("received flowers:" + flower) ;}}; xiaoming. sendFlower (B); // --------------- Example 3 ---------------/** use proxy 2 * From Example 1 and example 2, you cannot see the usefulness of Using proxy, B only switched from the center once. * Next, let's think about it. How can we improve the success rate by giving flowers to people you like? * We all know that when a person is in a good mood or in a bad mood, when a beautiful woman is in a good mood, the probability of a successful flower delivery is naturally greater. * As a result, we upgraded our agent to listen to the beauty's mood and send flowers to her when she is in a good mood. * For demonstration, we assume that A is in A better mood after 2 seconds. */Var Flower = function () {}; var xiaoming = {sendFlower: function (target) {var flower = new Flower (); B. receiveFlower (flower) ;}}; var B ={ receiveFlower: function (flower) {. listenGoodMood (function () {. receiveFlower (flower) ;}}}; var A = {receiveFlower: function (flower) {console. log ("received flowers:" + flower) ;}, listenGoodMood: function (fn) {setTimeout (function () {fn. apply (this, arguments );}, 2000) ;}}; xiaoming. sendFlower (B); // ---------- Example 4 ---------------/** [proxy mode usage]: Virtual proxy * Here we take image loading as an example. We all know that when the network is poor and the image is too large, image loading is slow. * for better user experience, we will add the loading image before loading the original image. ** // -- 4 _ 01 No proxy -- var myImage = (function () {var imgNode = document. createElement ("img"); document. body. appendChild (imgNode); return {setSrc: function (src) {this. imgNode. src = src ;}}) (); myImage. setSrc ("xxx"); // -- 4_02 use proxy -- var proxyMyImage = (function () {var img = new Image (); img. onload = function () {myImage. setSrc (this. src) ;}; return {setSrc: function (src) {myImage. setSrc ("loading.jp G "); img. src = src ;}}) (); proxyMyImage. setSrc ("xxx");/** [note]: here we can see the benefits of the proxy mode: You can add new behaviors to the system without changing the original interface. * // --------- Example 5 ---------------/** [proxy mode usage]: Merge http requests * Here, select file synchronization as an example. * In the past, users used to synchronize files, which was triggered when users selected them. This method achieves real-time performance, but undoubtedly increases network overhead. * In actual use, it is often not necessary to synchronize immediately. * In proxy mode, the following requests are synchronized after the selected file is 2 seconds. ** // --- Contains a piece of html code, please add it to a file by yourself ------ 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.