資訊專欄INFORMATION COLUMN
摘要：最近在讀設(shè)計(jì)模式與開發(fā)實(shí)踐，在這里把文中的各種設(shè)計(jì)模式寫出來，以便加深記憶，也可以分享給初學(xué)者。經(jīng)紀(jì)人可以全權(quán)代表明星和客戶談判，最后把談判結(jié)果給明星，明星決定簽約與否。這也違反了面向?qū)ο笤O(shè)計(jì)原則中的單一職責(zé)原則。
最近在讀《javascript設(shè)計(jì)模式與開發(fā)實(shí)踐》，在這里把文中的各種設(shè)計(jì)模式寫出來，以便加深記憶，也可以分享給初學(xué)者。如果你不了解設(shè)計(jì)模式，那么強(qiáng)烈推薦你閱讀一下這本書，相信它可以顛覆你的編程思維，助你打通任督二脈。
假設(shè)有對(duì)象A和對(duì)象B,代理模式相當(dāng)于對(duì)象C，對(duì)對(duì)象A進(jìn)行封裝，對(duì)象B只需要與對(duì)象C進(jìn)行交流。對(duì)象C就是一個(gè)替身。簡(jiǎn)而言之就是用一個(gè)對(duì)象代表另外一個(gè)對(duì)象，對(duì)應(yīng)現(xiàn)實(shí)生活中的場(chǎng)景就是明星王寶強(qiáng)和經(jīng)紀(jì)人宋喆之間的關(guān)系。經(jīng)紀(jì)人可以全權(quán)代表明星和客戶談判，最后把談判結(jié)果給明星，明星決定簽約與否。
代理模式可以用在圖片延遲加載，延遲加載的原理是：先用loading圖片替代圖片的真實(shí)src，創(chuàng)建一個(gè)img元素(代理)加載圖片的真實(shí)src。加載完之后，圖片的src替換掉loading。下面就看看代碼怎么實(shí)現(xiàn)：
myImage = (function(){
var img = document.createElement("img");
document.body.appendChild(img);
return {
setSrc:function(src){
img.src = src;
}
}
})()
proxyImage = (function(){
var img = new Image;
img.onload = function(){
myImage .setSrc(this.src)
}
return {
setSrc:function(src){
myImage.setSrc("load.gif");
img.src = src;
}
}
})()
proxyImage.setSrc("http://test.jpg");
代理的意義
也許你會(huì)覺得一個(gè)小小的延遲加載何必要用到設(shè)計(jì)模式？不用代理模式的確也可以做到。那么引入代理模式有什么好處呢？下面我們拋開代理模式，用常用的方式實(shí)現(xiàn)圖片延遲加載：
myImage = (function(){
var img = document.createElement("img");
document.body.appendChild(img);
var imgNode = new Image;
imgNode.onload = function(){
img.setSrc(this.src)
}
return {
setSrc:function(src){
img.setSrc("load.gif");
imgNode.src = src;
}
}
})()
myImage.setSrc("http://test.jpg");
上面的myImage除了負(fù)責(zé)加載圖片以外，還負(fù)責(zé)延遲加載。將來網(wǎng)速越來越快，如果有一天不需要延遲加載，那么就需要修改myImage函數(shù)。這也違反了面向?qū)ο笤O(shè)計(jì)原則中的——單一職責(zé)原則。單一職責(zé)原則要求對(duì)象只有一個(gè)職責(zé)(功能)，引起對(duì)象變化的原因也只能有一個(gè)，如果對(duì)象有多個(gè)職責(zé)，那么這個(gè)對(duì)象會(huì)變得非常大，引起對(duì)象變化的原因有多個(gè)。單一職責(zé)也是為了程序低耦合高內(nèi)聚。
反觀代理模式，myImage只負(fù)責(zé)加載圖片，proxyImage只負(fù)責(zé)延遲加載，如果以后不需要延遲加載只需要修改調(diào)用方式即可。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83418.html
摘要：面向?qū)ο笤O(shè)計(jì)里的設(shè)計(jì)模式之代理模式，相信很多朋友已經(jīng)很熟悉了。代表當(dāng)前執(zhí)行方法的實(shí)例，即方法調(diào)用者。代表具體的方法名稱?，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（代理...
摘要：代理模式代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或者占位符以便控制對(duì)它的訪問引入代理模式，其實(shí)是為了實(shí)現(xiàn)單一職責(zé)的面向?qū)ο笤O(shè)計(jì)原則。 代理模式 代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或者占位符, 以便控制對(duì)它的訪問 引入代理模式，其實(shí)是為了實(shí)現(xiàn)單一職責(zé)的面向?qū)ο笤O(shè)計(jì)原則。 虛擬代理 將一些開銷很大的對(duì)象, 延遲到正真需要的時(shí)候執(zhí)行 // 針對(duì)大圖 增加loading圖 ...
支持原作者，購(gòu)買地址鏈接描述 概念 代理模式 代理模式(Proxy),為其他對(duì)象提供一種代理以控制對(duì)這個(gè)對(duì)象的訪問。 在現(xiàn)實(shí)生活中，可以找到很多代理模式使用的場(chǎng)景。明星都有經(jīng)紀(jì)人作為代理。如果請(qǐng)明星來演出，就要先同他的經(jīng)紀(jì)人溝通，談好相應(yīng)的細(xì)節(jié)與報(bào)酬。再交給明星。 需求：公司(Company)通過經(jīng)紀(jì)人(agent)找明星(start)開演唱會(huì) //演唱會(huì) var Concert = ...
摘要：注意事項(xiàng)聲明函數(shù)時(shí)候處理業(yè)務(wù)邏輯區(qū)分和單例的區(qū)別，配合單例實(shí)現(xiàn)初始化構(gòu)造函數(shù)大寫字母開頭推薦注意的成本。簡(jiǎn)單工廠模式使用一個(gè)類通常為單體來生成實(shí)例。 @(書籍閱讀)[JavaScript, 設(shè)計(jì)模式] 常見設(shè)計(jì)模式 一直對(duì)設(shè)計(jì)模式不太懂，花了一下午加一晚上的時(shí)間，好好的看了看各種設(shè)計(jì)模式，并總結(jié)了一下。 設(shè)計(jì)模式簡(jiǎn)介 設(shè)計(jì)模式概念解讀 設(shè)計(jì)模式的發(fā)展與在JavaScript中的應(yīng)用 ...
摘要：享元模式通過分析應(yīng)用程序的對(duì)象，將其解析為內(nèi)在數(shù)據(jù)和外在數(shù)據(jù)，減少對(duì)象數(shù)量，從而提高程序的性能。通過這種方式進(jìn)行事件綁定，可以減少事件處理程序的數(shù)量，這種方式叫做事件委托，也是運(yùn)用了享元模式的原理。事件處理程序是公用的內(nèi)在部分，每個(gè)菜單項(xiàng)各 github 全文地址 ： YOU-SHOULD-KNOW-JS JavaScript設(shè)計(jì)模式之外觀模式 概念 外觀模式：為一組復(fù)雜子系統(tǒng)接口提...
閱讀 2809·2021-10-08 10:04
閱讀 3198·2021-09-10 11:20
閱讀 524·2019-08-30 10:54
閱讀 3306·2019-08-29 17:25
閱讀 2302·2019-08-29 16:24
閱讀 885·2019-08-29 12:26
閱讀 1447·2019-08-23 18:35
閱讀 1931·2019-08-23 17:53
