代理模式
代理模式的中文意義就是幫別人做事,javascript的解釋為:把對一個物件的存取, 交給另一個代理物件來操作.
程式碼實作:
// 补打卡事件 var fillOut = function (lateDate) { this.lateDate = lateDate; }; // 这是bigBoss var bigBoss = function (fillOut) { this.state = function (isSuccess) { console.log("忘记打卡的日期为:" + fillOut.lateDate + ", 补打卡状态:" + isSuccess); } }; // 助理代理大boss 完成补打卡审批 var proxyAssis = function (fillOut) { this.state = function (isSuccess) { (new bigBoss(fillOut)).state(isSuccess); // 替bigBoss审批 } }; // 调用方法: var proxyAssis = new proxyAssis(new fillOut("2016-9-11")); proxyAssis.state("补打卡成功"); // 忘记打卡的日期为:2016-9-11, 补打卡状态:补打卡成功
應用程式場景:
例如圖片的懶加載,我們就可以運用這種技術。在圖片未載入完成之前,給個loading圖片,載入完成後再替換成實體路徑。
var myImage = (function(){ var imgNode = document.createElement("img"); document.body.appendChild(imgNode); return function(src){ imgNode.src = src; } })(); // 代理模式 var ProxyImage = (function(){ var img = new Image(); img.onload = function(){ myImage(this.src); }; return function(src) { // 占位图片loading myImage("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif"); img.src = src; } })(); // 调用方式 ProxyImage("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png"); // 真实要展示的图片
當然,這種懶載入方法不用代理模式也是可以實現的,只是用代理模式。我們可以讓 myImage 只做一件事,只負責將實際圖片加入頁面中,而loading圖片交給ProxyImage去做。從而降低程式碼的耦合度。因為當我不想用loading的時候,可以直接呼叫myImage 方法。也即是說假如我門不需要代理對象的話,直接可以換成本體物件呼叫該方法即可。
外觀模式
外觀模式是很常見。其實它就是透過寫一個單獨的函數,來簡化對一個或多個更大型的,可能更為複雜的函數的存取。也就是說可以視外觀模式為一種簡化某些內容的手段。
說白了,外觀模式就是一個函數,封裝了複雜的操作。
程式碼實作:
例如一個跨瀏覽器的ajax呼叫
function ajaxCall(type,url,callback,data){ // 根据当前浏览器获取对ajax连接对象的引用 var xhr=(function(){ try { // 所有现代浏览器所使用的标准方法 return new XMLHttpRequest(); }catch(e){} // 较老版本的internet Explorer兼容 try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }catch(e){} try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }catch(e){} try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} // 如果没能找到相关的ajax连接对象,则跑出一个错误。 throw new Error("Ajax not support in this browser.") }()), STATE_LOADED=4, STATUS_OK=200; // 一但从服务器收到表示成功的相应消息,则执行所给定的回调方法 xhr.onreadystatechange=function{ if(xhr.readyState !==STATE_LOADED){ return; } if(xhr.state==STATUS_OK){ callback(xhr.responseText); } } // 使用浏览器的ajax连接对象来向所给定的URL发出相关的调用 xhr.open(type.toUpperCase(),url); xhr.send(data); } // 使用方法 ajaxCall("get","/user/12345",function(rs){ alert('收到的数据为:'+rs); })
應用場景:
當需要透過一個單獨的函數或方法來存取一系列的函數或方法調用,以簡化程式碼庫的其餘內容,使得程式碼更容易追蹤管理或者更好的維護時,可以使用外觀模式。其實我們平常程式碼中這種模式應該是用的比較多的。
以上是javascript代理模式、外觀模式使用場景和實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!