快捷導(dǎo)航

javascript常用的設(shè)計模式

更新時間：2017年02月09日 17:02:20 作者：zhoujun

本文主要介紹了javascript常用的設(shè)計模式:單例模式;工廠模式;適配模式;外觀模式。下面跟著小編一起來看下吧

js最好是一種面向?qū)ο蟮恼Z言。它的出現(xiàn)時比較遲的。但是它是目前最火的腳本語言。而且，隨著近期的微信商城等頁面的興起，相信程序員和互聯(lián)網(wǎng)的從業(yè)者都知道了js正在勢頭上了。

那么，如果你想要在前端這條路上走得更遠(yuǎn)，設(shè)計模式就必須要懂。下面介紹幾種常見的設(shè)計模式。

一、單例模式

單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計中較為簡單但是最為常用的一種設(shè)計模式。在JavaScript里，實現(xiàn)單例的方式有很多種，其中最簡單的一個方式是使用對象字面量的方法，其字面量里可以包含大量的屬性和方法：

var mySingleton = {
property1: "something",
property2: "something else",
method1: function () {
  console.log('hello world');
}};

如果以后要擴(kuò)展該對象，你可以添加自己的私有成員和方法，然后使用閉包在其內(nèi)部封裝這些變量和函數(shù)聲明。只暴露你想暴露的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!'

上面的代碼很不錯了，但如果我們想做到只有在使用的時候才初始化，那該如何做呢？為了節(jié)約資源的目的，我們可以另外一個構(gòu)造函數(shù)里來初始化這些代碼，如下：

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;
    }
  };
})();
/*調(diào)用公有的方法來獲取實例:*/
Singleton.getInstance().publicMethod();

二、工廠模式

工廠模式是由一個方法來決定到底要創(chuàng)建哪個類的實例, 而這些實例經(jīng)常都擁有相同的接口. 這種模式主要用在所實例化的類型在編譯期并不能確定，而是在執(zhí)行期決定的情況。說的通俗點，就像公司茶水間的飲料機(jī)，要咖啡還是牛奶取決于你按哪個按鈕。

實例：

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和構(gòu)造器的相關(guān)說明，可以看到，所謂的new，本身只是一個對象的復(fù)制和改寫過程，而具體會生成什么是由調(diào)用ObjectFactory時傳進(jìn)去的參數(shù)所決定的。

三、適配模式

簡單的說，適配模式主要是為了解決一些接口不兼容產(chǎn)生的解決方法。借助于適配器我們可以在不修改這些不兼容接口的情況下給使用者提供統(tǒng)一的包裝過的適配接口。表面上又感覺和之前的門面模式比較像，均是對其他對象或者接口進(jìn)行包裝再呈現(xiàn)，而適配器模式偏向的是解決兼容性問題，門面模式則偏向方便性為原則。

比如一個簡單的學(xué)生查詢學(xué)科成績的方法：

  function selectScore( name, id, course_id ){
  // arguments 姓名 學(xué)號 課程id
  ...
}

當(dāng)我需要一個班級某門學(xué)科的整體成績列表，而我手上只有每個學(xué)生如下的數(shù)據(jù)

[
  { name: 'lily', studentID: '0911' },
  { name: 'suny', studentID: '0912' },
  ...
]

我需要查詢英語其課程ID為 101，那么對于該任務(wù)，寫一個適配器方式是很恰當(dāng)不過的

function selectEnglishScore( stutentObj ){
  selectScore( stutentObj.name, stutentObj.studentID , 101);
}

這是一個最簡單的關(guān)于適配器來處理參數(shù)方面兼容的形式。其實簡單的來說，適配器模式意義上很簡單 - 適配，解決兼容問題。

例子二，比如你覺得jquery里邊的$選擇器需要改成$id才能和你的項目搭配，那么這時候?qū)懸粋€方法，將$轉(zhuǎn)換成$id就很輕松了。如下：

$id = function( id ){
 return jQuery( '#' + id )[0];
}

四、外觀模式

外觀模式(門面模式)，是一種相對簡單而又無處不在的模式。外觀模式提供一個高層接口，這個接口使得客戶端或子系統(tǒng)更加方便調(diào)用。用一段再簡單不過的代碼來表示：

var getName = function(){
 return ''svenzeng"
}
var getSex = function(){
  return 'man'
}

如果你需要分別調(diào)用getName和getSex函數(shù). 那可以用一個更高層的接口getUserInfo來調(diào)用.：

var getUserInfo = function(){
 var info = a() + b();
 return info;
}

也許你會問為什么一開始不把getName和getSex的代碼寫到一起, 比如這樣：

var getNameAndSex = function(){
 return 'svenzeng" + "man";
}

答案是顯而易見的，飯?zhí)玫某床藥煾挡粫驗槟泐A(yù)定了一份燒鴨和一份白菜就把這兩樣菜炒在一個鍋里。他更愿意給你提供一個燒鴨飯?zhí)撞?。同樣在程序設(shè)計中，我們需要保證函數(shù)或者對象盡可能的處在一個合理粒度，畢竟不是每個人喜歡吃燒鴨的同時又剛好喜歡吃白菜。外觀模式還有一個好處是可以對用戶隱藏真正的實現(xiàn)細(xì)節(jié)，用戶只關(guān)心最高層的接口。比如在燒鴨飯?zhí)撞偷墓适轮?，你并不關(guān)心師傅是先做燒鴨還是先炒白菜，你也不關(guān)心那只鴨子是在哪里成長的。

最后寫個我們都用過的外觀模式例子：

var stopEvent = function( e ){  //同時阻止事件默認(rèn)行為和冒泡
 e.stopPropagation();
 e.preventDefault();
}

好了，今天的額設(shè)計模式就先到這里。如果大家想要了解更多的設(shè)計模式可以去湯姆大叔的博客欣賞哦。還有，這里的很多的設(shè)計模式其實都是將解決問題的方法細(xì)化了的說法，如果去看一下prototype或者jquery都會知道，其實里邊的代碼很多都用到了設(shè)計模式的。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript常用的設(shè)計模式

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具