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方法,我们可以叫它页面初始化方法,它的作用就是集中调用其它方法,相当于这个页面的入口,这样我们只要看到这个方法就大概能知道我们调用了哪些方法了,而不需要在页面里去分别的调用。维护起来更方便些。

  关于在工作中使用单例模式的方法就说到这了,有不足的地方欢迎大神指点,有不懂的地方欢迎留言。

原文地址:https://www.cnblogs.com/mqfblog/p/5906219.html