欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript设计模式之对单例模式的一些见解

程序员文章站 2022-04-03 19:41:54
JavaScript设计模式之对单例模式的一些见解 JavaScript设计模式主要分类: ①创建型设计模式,例如单例模式、工厂模式 ②结构型设计模式,例如装饰者模式、适配器...

JavaScript设计模式之对单例模式的一些见解

JavaScript设计模式主要分类:

①创建型设计模式,例如单例模式、工厂模式

②结构型设计模式,例如装饰者模式、适配器模式

③行为型设计模式,例如观察者模式、访问者模式

④技巧型设计模式,例如委托模式、数据访问队形模式

⑤结构型设计模式,例如MVC模式、MVVM模式、MVP模式

本文讨论的是JavaScript中最常见的设计模式:单例模式,适合对JavaScript设计模式没什么太多了解的伙伴。

单例模式出现的背景:

以下为一段用于前后端交互的js

    function getUserInfo() {
        // 获取用户信息
    }
    function setUserInfo(param) {
        // 设置用户信息
    }
    function getCount() {
        // 登录
    }
    function logout() {
        // 注销
    }

这样写的弊端:因为function getUserInfo(){}相当于 var getUserInfo = function(){},产生了很多全局变量,例子举的例子算是比较特殊的了,如果是比较大众一点的变量名,就很容易产生冲突。

如何解决?

使用单例模式定义命名空间:

var requestUtil = {
        getUserInfo: function () {
            // 获取用户信息
        },
        setUserInfo: function (param) {
            // 设置用户信息
        },
        login: function () {
            // 登录
        },
        logout: function () {
            // 注销
        }
    }

函数的调用:当需要获取用户信息时,requestUtil.getUserInfo()即可。

使用单例模式创建小型代码库:

  var X = {
      Util: {
          util1: function () {},
          util2: function () {}
      },
      Ajax: {
          get: function () {},
          post: function () {}
      },
      Others: {
          function1: function () {},
          function2: function () {}
      }
  }

使用方法:X.Ajax.get()

使用单例模式管理静态变量:

背景:我们都知道,JavaScript没有static这类关键字,所以定义任何变量理论上都是可以改变的(ES6前,因为ES6出现了类似的const,用于定义常量),那么在ES6前,想定义一个静态变量,原意是不想改变的,可实质上它又能被改变,应该如何做到不能被改变?答案如下:

  var Conf = (function () {
      // 私有变量
      var conf = {
          MAX_NUM: 100,
          MIN_NUM: 1,
          COUNT: 1000
      }
      // 返回取值函数
      return {
          get: function (name) {
              retrun conf[name]  conf[name] : null
          }
      }
  })()

没有定义赋值函数,因此里边的变量自然就不能被改变。

使用方法: var count = Conf.get('MAX_NUM')

惰性单例:

说明:用于延迟单例对象的创建,即惰性创建。

  var LazySingle = (function () {
      var _instance = null
      function Single () {
          return {
              publicMethod: function () {
                return this.publicProperty
              },
              publicProperty: '1.0'
          }
      }
      return function () {
          if (!_instance) {
              _instance = new Single()
          }
          return _instance
      }
  })()
    console.log(LazySingle().publicMethod())

JavaScript设计模式之对单例模式的一些见解