JS單例模式在工做中的使用

　　爲了儘量的減小全局變量的污染，在寫js的時候能夠採用單例模式，形式以下：

　　好比有一個js叫demo.js，那麼咱們能夠在js裏這樣寫：

var demo = {}

　　這樣作的目的是將整個js當成一個對象，這樣暴露在外的全局變量就只有demo這一個命名，不像咱們日常寫直接寫不少函數，這都是對全局空間的一種污染，一旦項目中別人也取了一樣的名稱，那麼就容易出問題了。

function xxx1(){}
function xxx2(){}
function xxx3(){}

　　同時爲了方便維護管理js，還能夠對demo內部進行劃分模塊，能夠按照頁面劃分，也能夠按照具體功能模塊劃分。

　　好比按照頁面劃分的寫法：

var demo = {
      page1: {
          setSlide:function(){
              //這裏去進行輪播圖的相關設置
          }
      },
      page2: {    
          setSlide:function(){
              //這裏去進行輪播圖的相關設置
          }
      }
}

　　能夠看到，若是單純按照頁面去劃分，那麼頁面與頁面的之間的js能夠分離的很清楚，可是也有一個弊端，即若是兩個甚至多個頁面擁有相同的功能，那麼會須要去調用其它頁面的js，這樣不是很利於維護。

　　因此咱們還能夠按照功能+頁面混合模式來劃分模塊，例如：

var demo = {
    // 將全部的公用功能抽離集成在一個模塊裏
    base:{
        setSlide: function(){
            // do something
        }
    },
    page1: {
        _setSlide: function(){
            // 直接調用通用方法
            demo.base.setSlide();
        }
    },    
    page2: {
        _setSlide: function(){
            // 直接調用通用方法
           demo.base.setSlide();
        }
    }
} 

 

　　以上代碼只是舉個例子，咱們能夠進一步完善一下:

var demo = {
    // 將全部的公用功能抽離集成在一個模塊裏
    base:{
        setSlide: function(){
            // do something
        }
    },
    page1: {
        Init: function(){
            this._setSlide().verify();
        },
        _setSlide: function(){
            // 直接調用通用方法
            demo.base.setSlide();
            //還能夠作其餘事情
            ......
            // 返回this,那麼就能實現鏈式調用了
            return this;
        },
        verify:function(){
            //作些事情
            ......
        }
    },    
    page2: {
        Init: function(){
            this._setSlide();
        },
        _setSlide: function(){
            // 直接調用通用方法
            demo.base.setSlide();
            //還能夠作其餘事情
        }
    }
}  

 

　　能夠看到，咱們在每一個頁面模塊裏增長了一個Init方法，咱們能夠叫它頁面初始化方法，它的做用就是集中調用其它方法，至關於這個頁面的入口，這樣咱們只要看到這個方法就大概能知道咱們調用了哪些方法了，而不須要在頁面裏去分別的調用。維護起來更方便些。

　　關於在工做中使用單例模式的方法就說到這了，有不足的地方歡迎大神指點，有不懂的地方歡迎留言。