摘要:虛擬代理在開(kāi)發(fā)中,我們往往將這個(gè)對(duì)象的實(shí)例化操作,放到函數(shù)內(nèi)部執(zhí)行,這樣的操作會(huì)減少不必要的實(shí)例化對(duì)象的開(kāi)銷(xiāo),造成資源的浪費(fèi)。這種使用的情況我們將之成為虛擬代理。但是在中我們使用最多,也最常見(jiàn)的就是虛擬代理和緩存代理。
所謂的的代理模式就是為一個(gè)對(duì)象找一個(gè)替代對(duì)象,以便對(duì)原對(duì)象進(jìn)行訪問(wèn)。
使用代理的原因是我們不愿意或者不想對(duì)原對(duì)象進(jìn)行直接操作,我們使用代理就是讓它幫原對(duì)象進(jìn)行一系列的操作,等這些東西做完后告訴原對(duì)象就行了。就像我們生活的那些明星的助理經(jīng)紀(jì)人一樣。
我們舉一個(gè)明星買(mǎi)鞋子的例子。
1.明星自己去買(mǎi)鞋。
// 定義一個(gè)鞋子類(lèi) var Shoes = function(name){ this.name = name; }; Shoes.prototype.getName = function() { return this.name; }; // 定義一個(gè)明星對(duì)象 var star = { buyShoes: function(shoes) { console.log("買(mǎi)到了一雙" + shoes.getName()); } } star.buyShoes(new Shoes("皮鞋")); // "買(mǎi)到了一雙皮鞋"
當(dāng)然了,想買(mǎi)鞋這種事,一般都會(huì)交給助理去做。
2.明星讓助理代自己去買(mǎi)鞋。
// 定義一個(gè)鞋子類(lèi) var Shoes = function(name){ this.name = name; }; Shoes.prototype.getName = function() { return this.name; }; // 定義一個(gè)助理對(duì)象 var assistant = { buyShoes: function(shoes) { star.buyShoes(shoes.getName()) } }; // 定義一個(gè)明星對(duì)象 var star = { buyShoes: function(name) { console.log("買(mǎi)到了一雙" + name); } }; assistant.buyShoes(new Shoes("高跟鞋")); // "買(mǎi)到了一雙高跟鞋"
怎么樣,代理就是這么簡(jiǎn)單,可能到這里有的同學(xué)會(huì)比較疑惑,代理的實(shí)現(xiàn)結(jié)果不是和不使用一樣嗎?是的,一樣的實(shí)現(xiàn)結(jié)果是必須的,但是,值用代理并不是我們看到的那樣將簡(jiǎn)單的事情復(fù)雜化了,代理的使用場(chǎng)景當(dāng)然不是這種簡(jiǎn)單的場(chǎng)景,而是針對(duì)一些比較復(fù)雜或特殊的情況使用,這里只是為了舉例說(shuō)明代理的實(shí)現(xiàn)。下面就介紹一些使用場(chǎng)景。
代理使用場(chǎng)景繼續(xù)上面的明星買(mǎi)鞋子的問(wèn)題。在生活中我們會(huì)遇到商店在營(yíng)業(yè)時(shí)間,而你在工作時(shí)間,由于要掙錢(qián)同時(shí)又要花錢(qián),所以,會(huì)找一個(gè)代理;就像春節(jié)快到了,你沒(méi)時(shí)間或者搶不到票,就會(huì)找票販子一樣;像現(xiàn)在的代購(gòu),則是你不能出國(guó),或者對(duì)國(guó)外不了解,就找能出國(guó),對(duì)國(guó)外了解的人幫你買(mǎi)東西一樣。我們知道每家商店都有自己的營(yíng)業(yè)時(shí)間和休息時(shí)間,這里我們用(8:00~20:00)算作營(yíng)業(yè)時(shí)間。
// 定義一個(gè)鞋子類(lèi) var Shoes = function(name){ this.name = name; }; Shoes.prototype.getName = function() { return this.name; }; // 添加了一個(gè)business方法,通過(guò)當(dāng)前的時(shí)間來(lái)判斷是否能買(mǎi)到鞋子。 Shoes.prototype.business = function() { var curTime = new Date().getHours(); return curTime >= 8 && curTime <= 20 ? that.getName() : ""非營(yíng)業(yè)時(shí)間!""; } // 定義一個(gè)助理對(duì)象 var assistant = { buyShoes: function(shoes) { star.buyShoes(shoes.getName()) } }; // 定義一個(gè)明星對(duì)象 var star = { buyShoes: function(name) { console.log("買(mǎi)到了一雙" + name); } }; assistant.buyShoes(new Shoes("高跟鞋")); // "買(mǎi)到了一雙高跟鞋"保護(hù)代理
助理作為明星的代理,不僅可以幫助明星買(mǎi)東西,同時(shí)還有幫助明星過(guò)濾的東西的職責(zé),比如說(shuō),有粉絲要送明星花(不是什么樣的花都收的),有人要找明星代言廣告(不是什么樣的廣告都代言的)。
// 定義一個(gè)廣告類(lèi) var Ad = function(price){ this.price = price; }; Ad.prototype.getPrice = function() { return this.price; }; // 定義一個(gè)助理對(duì)象 var assistant = { init: function(ad) { var money = ad.getPrice(); if(money > 300) { this.receiveAd(money); } else { this.rejectAd(); } }, receiveAd: function(price) { star.receiveAd(price); }, rejectAd: function() { star.rejectAd(); } }; // 定義一個(gè)明星對(duì)象 var star = { receiveAd: function(price) { console.log("廣告費(fèi)" + price + "萬(wàn)元"); }, rejectAd: function() { console.log("拒絕小制作!"); } }; assistant.init(new Ad(5)); // "拒絕小制作!" assistant.init(new Ad(500)); // "廣告費(fèi)500萬(wàn)元"
像這種明星向助理授權(quán),如:什么樣價(jià)位的廣告可以接,什么樣的鮮花可以接等等。這樣將一些業(yè)務(wù)的處理交給助理或者經(jīng)紀(jì)人處理,而自己則位于幕后,無(wú)疑給自己減少了不必要的麻煩,這樣明星就處于一種保護(hù)狀態(tài)。在現(xiàn)實(shí)生活中的例子比比皆是,同樣在我們的程序語(yǔ)言開(kāi)發(fā)中也是比較常見(jiàn),尤其是網(wǎng)絡(luò)和進(jìn)程這方面,相信做過(guò)nodjs開(kāi)發(fā)的同學(xué)或多或少會(huì)遇到。
虛擬代理在開(kāi)發(fā)中,我們往往將 new Ad("5") 這個(gè)對(duì)象的實(shí)例化操作,放到函數(shù)內(nèi)部執(zhí)行,這樣的操作會(huì)減少不必要的實(shí)例化對(duì)象的開(kāi)銷(xiāo),造成資源的浪費(fèi)。這種使用的情況我們將之成為虛擬代理。
下面就介紹一個(gè)常見(jiàn)的虛擬代理——圖片的預(yù)加載。
圖片預(yù)加載是一種常見(jiàn)的前端技術(shù),由于圖片過(guò)大或者網(wǎng)絡(luò)不佳,我們不會(huì)直接給某個(gè)img標(biāo)簽節(jié)點(diǎn)設(shè)置src屬性,而是使用一張loading圖片作為占位符,然后用異步的方式來(lái)家在加載圖片,等到圖片加載完畢,我們?cè)侔阉畛涞絠mg的節(jié)點(diǎn)里。
var preImage = (function() { var imgNode = document.createElement("img"); document.body.appendChild(imgNode); var img = new Image; img.onload = function() { imgNode.src = img.src; }; return { setSrc: function(src) { imgNode.src = "../loading.gif"; img.src = src; } } })(); preImage.setSrc("https://cn.bing.com/az/hprichbg/rb/TadamiTrain_ZH-CN13495442975_1920x1080.jpg");
到這里,圖片的預(yù)加載功能已經(jīng)實(shí)現(xiàn),但是往往體現(xiàn)一段代碼的是否更優(yōu)秀,是看你的代碼是否易于維護(hù),特別是對(duì)于海量的代碼。第一點(diǎn),這段代碼不符合單一職責(zé),我們把負(fù)責(zé)圖片預(yù)加載的功能,對(duì)img元素的處理放在了一個(gè)函數(shù)體內(nèi),尤其是沒(méi)有將代碼變化的部分和未變化的部分分開(kāi);第二點(diǎn),就是將來(lái)我們的網(wǎng)速非常好,我們不用再擔(dān)心由于網(wǎng)絡(luò)不佳而造成的顯示效果問(wèn)題,那么關(guān)于圖片預(yù)加載的功能就要去掉。
我們可以嘗試使用代理來(lái)實(shí)現(xiàn),代碼如下:
var myImage = (function() { var imgNode = document.createElement("img"); document.body.appendChild(imgNode); return { setSrc: function(src) { imgNode.src = src; } } })(); var preImage = (function() { var img = new Image; img.onload = function() { myImage.setSrc = img.src; }; return { setSrc: function(src) { myImage.setSrc( "../loading.gif"); img.src = src; } } })(); preImage.setSrc("https://cn.bing.com/az/hprichbg/rb/TadamiTrain_ZH-CN13495442975_1920x1080.jpg");
這樣我們就將圖片預(yù)加載和為img元素節(jié)點(diǎn)設(shè)置src分開(kāi)來(lái)。
代理和被代理對(duì)象的一致性因?yàn)榇硪獙?shí)現(xiàn)和被代理對(duì)象實(shí)際處理一樣的效果,所以,在實(shí)現(xiàn)代理對(duì)象時(shí),原對(duì)象有的方法,代理對(duì)象一樣有,這樣可以保證,用戶(hù)在操作代理對(duì)象時(shí)就像在操作原對(duì)象一樣。
緩存代理緩存代理就是將代理加緩存,下面是一個(gè)求和的例子:
var multAdd = function() { var res = 0; for (var i = 0, l = arguments.length; i < l; i++) { res = res + arguments[i] } return res; }; var proxyAdd = (function() { var cache = {}; return function() { var args = Array.prototype.join.call(arguments, ","); if(args in cache) { return cache[args]; } return caches[args] = multAdd.apply(this, arguments); } })(); proxyAdd(1, 2, 3); // 6 proxyAdd(1, 2, 3); // 6
我們不用代理當(dāng)然也能實(shí)現(xiàn)緩存就和,但是為了達(dá)到單一職責(zé),我們可以讓multAdd實(shí)現(xiàn)求和,而緩存則放在代理中來(lái)實(shí)現(xiàn)。
當(dāng)然,還有其他的分類(lèi)代理,比如,智能代理,遠(yuǎn)程代理。但是在JavaScript中我們使用最多,也最常見(jiàn)的就是虛擬代理和緩存代理。
設(shè)計(jì)模式周周講
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/92641.html
摘要:面向?qū)ο笤O(shè)計(jì)里的設(shè)計(jì)模式之代理模式,相信很多朋友已經(jīng)很熟悉了。代表當(dāng)前執(zhí)行方法的實(shí)例,即方法調(diào)用者。代表具體的方法名稱(chēng)?,F(xiàn)在我們?cè)俅握{(diào)用,傳入構(gòu)造器返回的代理對(duì)象打印輸出,代理邏輯生效了和的一樣優(yōu)雅地實(shí)現(xiàn)了代理設(shè)計(jì)模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向?qū)ο笤O(shè)計(jì)里的設(shè)計(jì)模式之Proxy(代理...
摘要:注意事項(xiàng)聲明函數(shù)時(shí)候處理業(yè)務(wù)邏輯區(qū)分和單例的區(qū)別,配合單例實(shí)現(xiàn)初始化構(gòu)造函數(shù)大寫(xiě)字母開(kāi)頭推薦注意的成本。簡(jiǎn)單工廠模式使用一個(gè)類(lèi)通常為單體來(lái)生成實(shí)例。 @(書(shū)籍閱讀)[JavaScript, 設(shè)計(jì)模式] 常見(jiàn)設(shè)計(jì)模式 一直對(duì)設(shè)計(jì)模式不太懂,花了一下午加一晚上的時(shí)間,好好的看了看各種設(shè)計(jì)模式,并總結(jié)了一下。 設(shè)計(jì)模式簡(jiǎn)介 設(shè)計(jì)模式概念解讀 設(shè)計(jì)模式的發(fā)展與在JavaScript中的應(yīng)用 ...
摘要:保護(hù)代理和虛擬代理保護(hù)代理當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí),可以設(shè)置保護(hù)代理,通過(guò)一些條件判斷對(duì)請(qǐng)求進(jìn)行過(guò)濾。虛擬代理在程序中可以能有一些代價(jià)昂貴的操作。而虛擬代理是最常用的一種代理模式。 代理模式 代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或占位符,以便控制對(duì)它的訪問(wèn)。 保護(hù)代理和虛擬代理 保護(hù)代理:當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí),可以設(shè)置保護(hù)代理,通過(guò)一些條件判斷對(duì)請(qǐng)求進(jìn)行過(guò)濾。...
摘要:缺點(diǎn)不符合開(kāi)閉原則,如果要改東西很麻煩,繼承重寫(xiě)都不合適。預(yù)防低水平人員帶來(lái)的風(fēng)險(xiǎn)。開(kāi)閉原則,高拓展性。這里的訂閱者稱(chēng)為觀察者,而被觀察者稱(chēng)為發(fā)布者,當(dāng)一個(gè)事件發(fā)生,發(fā)布者會(huì)發(fā)布通知所有訂閱者,并常常以事件對(duì)象形式傳遞消息。 介紹 最近開(kāi)始給自己每周訂個(gè)學(xué)習(xí)任務(wù),學(xué)習(xí)結(jié)果反饋為一篇文章的輸出,做好學(xué)習(xí)記錄。 這一周(02.25-03.03)我定的目標(biāo)是《JavaScript 模式》...
摘要:著名的代理模式例子為引用計(jì)數(shù)英語(yǔ)指針對(duì)象。是一個(gè)構(gòu)造函數(shù),是被代理的對(duì)象,是聲明了各類(lèi)代理操作的對(duì)象,最終返回一個(gè)代理對(duì)象。在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作,比如在執(zhí)行時(shí)。 所謂的代理者是指一個(gè)類(lèi)別可以作為其它東西的接口。代理者可以作任何東西的接口:網(wǎng)絡(luò)連接、內(nèi)存中的大對(duì)象、文件或其它昂貴或無(wú)法復(fù)制的資源。 著名的代理模式例子為引用計(jì)數(shù)(英語(yǔ):reference...
摘要:虛擬代理延遲執(zhí)行虛擬代理的目的,是將開(kāi)銷(xiāo)大的運(yùn)算延遲到需要時(shí)再執(zhí)行。 showImg(https://segmentfault.com/img/bVbuitm?w=800&h=600); 代理模式:為一個(gè)對(duì)象提供一個(gè)代用品或占位符,以便控制它的訪問(wèn)。 當(dāng)我們不方便直接訪問(wèn)某個(gè)對(duì)象時(shí),或不滿(mǎn)足需求時(shí),可考慮使用一個(gè)替身對(duì)象來(lái)控制該對(duì)象的訪問(wèn)。替身對(duì)象可對(duì)請(qǐng)求預(yù)先進(jìn)行處理,再?zèng)Q定是否轉(zhuǎn)交給...
閱讀 7245·2021-09-22 15:36
閱讀 6047·2021-09-02 10:20
閱讀 1936·2019-08-30 15:44
閱讀 2723·2019-08-29 14:06
閱讀 1217·2019-08-29 11:17
閱讀 1672·2019-08-26 14:05
閱讀 3234·2019-08-26 13:50
閱讀 1618·2019-08-26 10:26