JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式
代理模式屬于設(shè)計(jì)模式中結(jié)構(gòu)型的設(shè)計(jì)模式;
定義:
顧名思義就是為一個(gè)對(duì)象提供一個(gè)代用品或占位符,以便控制對(duì)它的訪問(wèn)!
白話解釋:
很多明星都是有經(jīng)紀(jì)人的,如果要聯(lián)系明顯進(jìn)行商演或者開演唱會(huì)之類的商業(yè)活動(dòng)通過(guò)是需要先跟經(jīng)紀(jì)人取得聯(lián)系的,跟經(jīng)紀(jì)人談好了合作事宜之后經(jīng)紀(jì)人再轉(zhuǎn)達(dá)給某明星,然后某明星才會(huì)去參加活動(dòng);同樣租房也是一個(gè)同樣的道理,我們不管是租房還是買房,第一反應(yīng)肯定是找鏈家這類的平臺(tái),因?yàn)槲覀冎恍枰溂疫M(jìn)行溝通,而鏈家去跟房東溝通,省去了我們直接和房東溝通的步驟;因?yàn)殒溂揖褪且粋€(gè)代理模式,它代理了這個(gè)房東的房源;
實(shí)現(xiàn)方法舉個(gè)例子:
你作為一個(gè)追星狂魔,是某明星的忠誠(chéng)粉絲;剛好某明星近期要過(guò)生日了,你準(zhǔn)備送上禮物代表你的心意,正常的流程:
var Fans = { flower(){star.reception('花'); }}var star = { reception:function(gift){console.log('收到粉絲的:'+gift); }}Fans.flower(); //收到粉絲的:花
你選擇了買花寄給她,希望她能感受到你的心意;但是往往理想很豐滿,現(xiàn)實(shí)很骨感!別忘了還有經(jīng)紀(jì)人,因?yàn)楹炇漳愕亩Y物的往往不是明星本人而是經(jīng)紀(jì)人:
var Fans = { flower(){Agent.reception('花'); }}var Agent = { reception:function(gift){console.log('粉絲送的:'+gift); //粉絲送的:花star.reception('花'); }}var star = { reception:function(gift){console.log('收到粉絲的:'+gift); }}Fans.flower(); //收到粉絲的:花
這里的經(jīng)紀(jì)人就是一個(gè)簡(jiǎn)單的代理了,粉絲需要先把禮物給經(jīng)紀(jì)人,經(jīng)紀(jì)人再轉(zhuǎn)給明星本人;
保護(hù)代理明星滿心歡喜的看到粉絲寄過(guò)來(lái)的包裹的時(shí)候,拆開一看,原來(lái)是花!明星很不屑,所以告訴經(jīng)紀(jì)人,以后凡是給我寄花的,通通不要給我了,你自己看著處理:
var Fans = { flower(){Agent.reception('花'); }}var Agent = { reception:function(gift){console.log('粉絲送的:'+gift); //粉絲送的:花if(gift != '花'){ star.reception('花');} }}var star = { reception:function(gift){console.log('收到粉絲的:'+gift); }}Fans.flower();
上面的程序中明星根本就沒(méi)有收到粉絲寄過(guò)來(lái)的花,因?yàn)樵诮?jīng)紀(jì)人那里就已經(jīng)攔截處理了;通過(guò)經(jīng)紀(jì)人來(lái)過(guò)濾掉一部分禮物,這種模式叫做保護(hù)代理;
虛擬代理粉絲送花明星收不到,那粉絲就轉(zhuǎn)換一下思路,送點(diǎn)錢自己去買想要的東西吧!于是找到經(jīng)紀(jì)人,給了經(jīng)紀(jì)人一百萬(wàn)現(xiàn)金,讓經(jīng)紀(jì)人轉(zhuǎn)達(dá)給明星本人;
function Money(){ this.total = '一百萬(wàn)現(xiàn)金' return this.total;}var Fans = { flower(){Agent.reception(); }}var Agent = { reception:function(){// console.log('粉絲送的:'+gift);let money = new Money();star.reception(money.total); }}var star = { reception:function(gift){console.log('收到粉絲的:'+gift); //收到粉絲的:一百萬(wàn)現(xiàn)金 }}Fans.flower();
明星收到了一百萬(wàn)就很開心;這一百萬(wàn)因?yàn)椴皇腔ǎ瑳](méi)有被經(jīng)紀(jì)人攔截過(guò)濾;所以明星本人就直接收到了,這種模式我們稱為虛擬代理模式;
虛擬代理實(shí)現(xiàn)圖片懶加載沒(méi)用代理的時(shí)候我們的代碼是這樣的:
// 創(chuàng)建一個(gè)本體對(duì)象var myImage = (function(){ // 創(chuàng)建標(biāo)簽 var imgNode = document.createElement( ’img’ ); // 添加到頁(yè)面 document.body.appendChild( imgNode ); return { // 設(shè)置圖片的src setSrc: function( src ){ // 更改src imgNode.src = src; } }})();myImage.setSrc( ’http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg’ );
虛擬代理
// 創(chuàng)建一個(gè)本體對(duì)象var myImage = (function(){ // 創(chuàng)建標(biāo)簽 var imgNode = document.createElement( ’img’ ); // 添加到頁(yè)面 document.body.appendChild( imgNode ); return { // 設(shè)置圖片的src setSrc: function( src ){ // 更改src imgNode.src = src; } }})();// 創(chuàng)建代理對(duì)象var proxyImage = (function(){ // 創(chuàng)建一個(gè)新的img標(biāo)簽 var img = new Image; // img 加載完成事件 img.onload = function(){ // 調(diào)用 myImage 替換src方法 myImage.setSrc( this.src ); } return { // 代理設(shè)置地址 setSrc: function( src ){ // 預(yù)加載 loading myImage.setSrc( ’file:// /C:/Users/svenzeng/Desktop/loading.gif’ ); // 賦值正常圖片地址 img.src = src; } }})();proxyImage.setSrc( ’http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg’ );
上面這段代碼運(yùn)用代理模式來(lái)實(shí)現(xiàn)圖片預(yù)加載,可以看到通過(guò)代理模式巧妙地將創(chuàng)建圖片與預(yù)加載邏輯分離,并且在未來(lái)如果不需要預(yù)加載,只要改成請(qǐng)求本體代替請(qǐng)求代理對(duì)象就行。
以上就是JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式的詳細(xì)內(nèi)容,更多關(guān)于JavaScript設(shè)計(jì)模式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP 連接Access數(shù)據(jù)庫(kù)的登陸系統(tǒng)2. phpstudy apache開啟ssi使用詳解3. 深入理解Android熱修復(fù)技術(shù)原理之代碼熱修復(fù)技術(shù)4. asp知識(shí)整理筆記4(問(wèn)答模式)5. ASP腳本組件實(shí)現(xiàn)服務(wù)器重啟6. Java雙向鏈表按照順序添加節(jié)點(diǎn)的方法實(shí)例7. Android實(shí)現(xiàn)簡(jiǎn)單用戶注冊(cè)案例8. Python實(shí)現(xiàn)播放和錄制聲音的功能9. python 爬取豆瓣網(wǎng)頁(yè)的示例10. AJAX的跨域問(wèn)題解決方案
