久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式

瀏覽:4日期:2023-10-02 13:33:37
概述

代理模式屬于設(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)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 泗阳县| 菏泽市| 博爱县| 长兴县| 勃利县| 石阡县| 当雄县| 杨浦区| 唐海县| 柳林县| 启东市| 高安市| 玉屏| 遂昌县| 元阳县| 敦化市| 新和县| 通州区| 富阳市| 北宁市| 沾化县| 颍上县| 河津市| 长宁区| 中阳县| 墨脱县| 鹿邑县| 台江县| 会同县| 鲁甸县| 佛冈县| 扶风县| 南陵县| 渑池县| 平舆县| 辽阳县| 赫章县| 昌乐县| 玉屏| 拉孜县| 海阳市|