溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
js最好是一種面向對象的語言。它的出現時比較遲的。但是它是目前最火的腳本語言。而且，隨著近期的微信商城等頁面的興起，相信程序員和互聯網的從業者都知道了js正在勢頭上了。
那么，如果你想要在前端這條路上走得更遠，設計模式就必須要懂。下面介紹幾種常見的設計模式。
一、單例模式
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設計中較為簡單但是最為常用的一種設計模式。 在JavaScript里，實現單例的方式有很多種，其中最簡單的一個方式是使用對象字面量的方法，其字面量里可以包含大量的屬性和方法：
var mySingleton = {
property1: "something",
property2: "something else",
method1: function () {
console.log('hello world');
}};
如果以后要擴展該對象，你可以添加自己的私有成員和方法，然后使用閉包在其內部封裝這些變量和函數聲明。只暴露你想暴露的public成員和方法，樣例代碼如下：
var mySingleton = function () {
/* 這里聲明私有變量和方法 */
var privateVariable = 'something private';
function showPrivate() {
console.log(privateVariable);
}
/* 公有變量和方法（可以訪問私有變量和方法） */
return {
publicMethod: function () {
showPrivate();
},
publicVar: 'the public can see this!'
};
};
var single = mySingleton();
single.publicMethod(); // 輸出 'something private'
console.log(single.publicVar); // 輸出 'the public can see this!'
上面的代碼很不錯了，但如果我們想做到只有在使用的時候才初始化，那該如何做呢？為了節約資源的目的，我們可以另外一個構造函數里來初始化這些代碼，如下：
var Singleton = (function () {
var instantiated;
function init() {
/*這里定義單例代碼*/
return {
publicMethod: function () {
console.log('hello world');
},
publicProperty: 'test'
};
}
return {
getInstance: function () {
if (!instantiated) {
instantiated = init();
}
return instantiated;
}
};
})();
/*調用公有的方法來獲取實例:*/
Singleton.getInstance().publicMethod();
二、工廠模式
工廠模式是由一個方法來決定到底要創建哪個類的實例, 而這些實例經常都擁有相同的接口. 這種模式主要用在所實例化的類型在編譯期并不能確定， 而是在執行期決定的情況。 說的通俗點，就像公司茶水間的飲料機，要咖啡還是牛奶取決于你按哪個按鈕。
實例：
function A( name ){
this.name = name;
}
function ObjectFactory(){
var obj = {},
Constructor = Array.prototype.shift.call( arguments );
obj.__proto__ = typeof Constructor .prototype === 'number' ? Object.prototype
: Constructor .prototype;
var ret = Constructor.apply( obj, arguments );
return typeof ret === 'object' ? ret : obj;
}
var a = ObjectFactory( A, 'svenzeng' );
alert ( a.name ); //svenzeng
這段代碼來自es5的new和構造器的相關說明， 可以看到，所謂的new， 本身只是一個對象的復制和改寫過程， 而具體會生成什么是由調用ObjectFactory時傳進去的參數所決定的。
三、 適配模式
簡單的說，適配模式主要是為了解決一些接口不兼容產生的解決方法。借助于適配器我們可以在不修改這些不兼容接口的情況下給使用者提供統一的包裝過的適配接口。表面上又感覺和之前的門面模式比較像，均是對其他對象或者接口進行包裝再呈現，而適配器模式偏向的是解決兼容性問題，門面模式則偏向方便性為原則。
比如一個簡單的學生查詢學科成績的方法：
function selectScore( name, id, course_id ){
// arguments 姓名 學號 課程id
...
}
當我需要一個班級某門學科的整體成績列表，而我手上只有每個學生如下的數據
[
{ name: 'lily', studentID: '0911' },
{ name: 'suny', studentID: '0912' },
...
]
我需要查詢 英語 其課程ID為 101，那么對于該任務，寫一個適配器方式是很恰當不過的
function selectEnglishScore( stutentObj ){
selectScore( stutentObj.name, stutentObj.studentID , 101);
}
這是一個最簡單的關于適配器來處理參數方面兼容的形式。 其實簡單的來說，適配器模式意義上很簡單 - 適配，解決兼容問題。
例子二，比如你覺得jquery里邊的$選擇器需要改成$id才能和你的項目搭配，那么這時候寫一個方法，將$轉換成$id就很輕松了。如下：
$id = function( id ){
return jQuery( '#' + id )[0];
}
四、外觀模式
外觀模式(門面模式)，是一種相對簡單而又無處不在的模式。外觀模式提供一個高層接口，這個接口使得客戶端或子系統更加方便調用。 用一段再簡單不過的代碼來表示：
var getName = function(){
return ''svenzeng"
}
var getSex = function(){
return 'man'
}
如果你需要分別調用getName和getSex函數. 那可以用一個更高層的接口getUserInfo來調用.：
var getUserInfo = function(){
var info = a() + b();
return info;
}
也許你會問為什么一開始不把getName和getSex的代碼寫到一起, 比如這樣：
var getNameAndSex = function(){
return 'svenzeng" + "man";
}
答案是顯而易見的，飯堂的炒菜師傅不會因為你預定了一份燒鴨和一份白菜就把這兩樣菜炒在一個鍋里。他更愿意給你提供一個燒鴨飯套餐。同樣在程序設計中，我們需要保證函數或者對象盡可能的處在一個合理粒度，畢竟不是每個人喜歡吃燒鴨的同時又剛好喜歡吃白菜。 外觀模式還有一個好處是可以對用戶隱藏真正的實現細節，用戶只關心最高層的接口。比如在燒鴨飯套餐的故事中，你并不關心師傅是先做燒鴨還是先炒白菜，你也不關心那只鴨子是在哪里成長的。
最后寫個我們都用過的外觀模式例子：
var stopEvent = function( e ){ //同時阻止事件默認行為和冒泡
e.stopPropagation();
e.preventDefault();
}
好了，今天的額設計模式就先到這里。如果大家想要了解更多的設計模式可以去湯姆大叔的博客欣賞哦。還有，這里的很多的設計模式其實都是將解決問題的方法細化了的說法，如果去看一下prototype或者jquery都會知道，其實里邊的代碼很多都用到了設計模式的。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
