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

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

  • 相关阅读:
    两数之和等于目标值
    Atitit.软件仪表盘(0)--软件的子系统体系说明
    获取 exception 对象的字符串形式(接口服务返回给调用者)
    SELECT LAST_INSERT_ID() 的使用和注意事项
    @RequestParam 注解的使用
    Eclipse中修改SVN用户名和密码方法
    淘淘商城上传图片按钮不显示的问题
    spring集成webSocket实现服务端向前端推送消息
    Mybatis中jdbcType和javaType对应关系
    MySQL数据库中tinyint字段值为1,读取出来为true的问题
  • 原文地址:https://www.cnblogs.com/mqfblog/p/5906219.html
Copyright © 2011-2022 走看看