JavaScript設計模式之門面模式原理與實現方法分析
本文例項講述了JavaScript設計模式之門面模式原理與實現方法。分享給大家供大家參考,具體如下:
外部與一個子系統的通訊必須通過一個系統的一個門面物件進行,這就是門面模式。
門面模式具備如下兩個角色:
1. 門面角色
客戶端可以呼叫這個角色方法,此角色中有子系統的應用(知曉相關的(一個或多個)子系統的功能和責任)。本角色會將所有從客戶端發來的請求委派到相應的子系統去。
2. 子系統角色
可以同時有一個或多個子系統。每一個子系統都不是一個單獨的類,而是一些類的集合。每一個子系統都可以被客戶端直接呼叫(這樣客戶端程式碼會多),或被門面角色呼叫。子系統並不知道門面的存在,對於子系統而言,門面僅僅是另一個客戶端而已。
下面我們來看一個可以提現門面模式的簡單需求:主人為自己的寵物狗辦理的相應的寵物領養證件
從這個簡單的需求中我們可以大致分析出我們需要:主人Person類和寵物狗Dog類 的一些相關資訊
在下面的例子中國會涉及到介面的驗證,現在先將程式碼貼出來
//(定義一個靜態方法來實現介面與實現類的直接檢驗 //靜態方法不要寫出Interface.prototype,因為這是寫到介面的原型鏈上的 //我們要把靜態的函式直接寫到類層次上 //定義一個介面類 var Interface=function (name,methods) {//name:介面名字 if(arguments.length<2){ alert("必須是兩個引數") } this.name=name; this.methods=[];//定義一個空陣列裝載函式名 for(var i=0;i<methods.length;i++){ if(typeof methods[i]!="string"){ alert("函式名必須是字串型別"); }else { this.methods.push( methods[i]); } } }; Interface.ensureImplement=function (object) { if(arguments.length<2){ throw new Error("引數必須不少於2個") return false; } for(var i=1;i<arguments.length;i++){ var inter=arguments[i]; //如果是介面就必須是Interface型別 if(inter.constructor!=Interface){ throw new Error("如果是介面類的話,就必須是Interface型別"); } //判斷介面中的方法是否全部實現 //遍歷函式集合 for(var j=0;j<inter.methods.length;j++){ var method=inter.methods[j];//介面中所有函式 //object[method]傳入的函式 //最終是判斷傳入的函式是否與介面中所用函式匹配 if(!object[method]||typeof object[method]!="function" ){//實現類中必須有方法名字與介面中所用方法名相同 throw new Error("實現類中沒有完全實現介面中的所有方法") } } } }
(1)主人類(Person類)
function Person() { this.name="測試"; this.address="居住在中國"; this.getInfo=function () { return "名字"+this.name+" 地址"+this.address; }; this.learn=function () { alert("學習的方法"); } this.marray=function () { alert("marray"); } //驗證介面 Interface.ensureImplement(this,PersonDao);//驗證該類是否全部實現介面中的方法 }
(2)寵物狗(Dog類)
var DogDao=new Interface("DogDao",["getInfo","call","run"]); var Dog=function () { this.name="gg"; this.getInfo=function () { return "狗狗的名字"+this.name; }; this.call=function () { }; this.run=function () {}; Interface.ensureImplement(this,DogDao);//驗證介面 }
(3)現在可以主人可以給自己的寵物狗辦理寵物領養證件了 -----客戶端程式碼
第一種方法:不用門面的方式客戶端的程式碼如下
function action(person,dog) { var r="GG"+new Date().getDay()+Math.floor(Math.random()*11); var str="辦證成功:編號"+r +"<br/>主人資訊"+person.getInfo() +"<br>狗狗的資訊:"+dog.getInfo(); return str; }document.write(action(new Person(),new Dog()));
第二種方法:使用門面模式-----將複雜的事交給門面來做,客戶端壓力可以減小
#1:門面中進行如下的處理
function facade(person,dog) { var r="GG"+new Date().getDay()+Math.floor(Math.random()*11); var str="辦證成功:編號"+r +"<br/>主人資訊"+person.getInfo() +"<br>狗狗的資訊:"+dog.getInfo(); this.action=function () {//相當於例項的方法 return str; }; }
#2,客戶端負責使用的程式碼為
function action2(person,dog) { document.write(new facade(person,dog).action()); } action2(new Person(),new Dog());
總結,我們可以看出不適用門面模式的客戶端需要處理較為複雜的業務,使用門面後,在門面中處理複雜的東西,而客戶端只需要簡單的呼叫即可。
一個簡單理解門面模式的圖結構:
感興趣的朋友可以使用線上HTML/CSS/JavaScript前端程式碼除錯執行工具:http://tools.jb51.net/code/WebCodeRun測試上述程式碼執行效果。
更多關於JavaScript相關內容還可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。