JS 单例

1、普通的单例

 

    //通过确保单例对象只存在一个实例
    //你就可以确信自己在所有的代码中使用的是全局资源
   (function() {
      //UserInfo 已经被实例化 而且只能实例化一次 单体
      // 先来看一个最简单的单体
      // 用户登录后的信息可以用一个单体存储
      var UserInfo = {
        name: "s",
        code: "00101",
        deptName: "PD",
        deptCode: "PD001",
        getName: function() {
          return "sssjjj"
        }
      }
      alert(UserInfo.getName())
      //这就是一个简单地单体，
      //它用来划分命名空间，并且将一群相关的属性方法组织到一起
      //我们可以用.来访问它
      var comm = {} //简单单体 命名空间使用
      comm.UserInfo = {
        name: 's',
        code: '0101'
      }
      comm.funcInfo = {
        funcName: '',
        funcCode: ''
      }
      //在大型项目下 存在你写的代码 还有你引用的js类库 还有其他同事写的代码和类库
      //我们通过单体模式就可以很好地区分他
   })()

2、具有局部变量的强大单例

 

    function Ajax() {

    }
    Ajax.request = function(url,fn) {
      if(true) {
        fn('sd.com','extjs4')
      }
    }
    //我们通过闭包的原理解决在上个例子中出现的问题 1、UserInfo 应该要ajax获取 2、实例化过程没有
    var UserInfo = (function() {
      //利用闭包使单体有自己的私有局部变量
      var name = "";
      var code = "";
      //利用ajax访问数据库去的数据
      Ajax.request("www.sd.com",function(n,c) {
        name = n
        code = c
      })

      return {  //为这个单例添加后台返回的两个局部变量数据
        name: name,
        code: code
      }

    })()

    alert(UserInfo.name)
    // 弊端 在于 return数据如果太大的话 系统加载上来就执行 影响性能 ---》 引出下一章 惰性单体

 3、惰性单体

 

    function Ajax() {

    }
    Ajax.request = function(url,fn) {
      if(true) {
        fn('sd.com','extjs4')
      }
    }
    //我们通过闭包的原理解决在上个例子中出现的问题 1、UserInfo 应该要ajax获取 2、实例化过程没有
    var UserInfo = (function() {
      var userInfo = "";//私有变量
      function init(){
        //利用闭包使单体有自己的私有局部变量
        var name = "";
        var code = "";
        //利用ajax访问数据库去的数据
        Ajax.request("www.sd.com",function(n,c) {
          name = n
          code = c
        })

        return {  //为这个单例添加后台返回的两个局部变量数据
          name: name,
          code: code
        }
      }

      return {
        getInstance: function() {
          if(userInfo) {
            return userInfo
          }else {
            userInfo = init()
            return userInfo
          }
        }
      }

    })()

    alert(UserInfo.getInstance().name)

 

4、分支单体

 

  //分支单体 在做ajax的时候根据不同浏览器 获得不同 xhr
  //在不同分辨率的情况下初始化不一样的界面
  //得到机器的分辨率
    (function() {
      var screenWidth = window.screen.width;
      var screenHeight = window.screen.height;
      // 单体
      var portalInfo = (function() {
        var $12801024 =  {info:'1,2,3,5'}
        var $1024768 =  {info:'4,2,1,2'}
        var $other = {info: 'other'}
        if (screenWidth == 1280) {
          return $12801024
        }else if(screenWidth == 1024) {
          return $1024768
        }else {
          return $other
        }
      })()
      alert(portalInfo.info)
    })()

 

转载于:https://www.cnblogs.com/suanmei/p/11201349.html