一、单例模式

一个类只能new出一个实例

      // 懒汉式单例
      function A() {
        const instance = { name: '单例' }
        if (!A.attr) A.attr = instance
        return A.attr
      }

      const a1 = new A()
      const a2 = new A()

      console.log(a1 === a2)

      // 饿汉式单例
      const A = (function () {
        const instance = { name: '单例' }
        return function () {
          return instance
        }
      })()

      const a1 = new A()
      const a2 = new A()
      console.log(a1 === a2)

单例模式的例子：设计一个函数，创建一个弹出层。弹出层可以反复打开和关闭

      function Popup() {
        if (!Popup.instance) {
          const div = document.createElement('div')
          div.setAttribute('style', 'width:30px;height:30px;background:red;')
          document.body.appendChild(div)
          const instance = {}
          instance.show = function () {
            div.style.display = 'block'
          }
          instance.hide = function () {
            div.style.display = 'none'
          }
          Popup.instance = instance
        }
        return Popup.instance
      }
      const p = new Popup()
      p.hide()
      p.show()
      const p1 = new Popup()
      console.log(p === p1)

      const Popup = (function () {
        const div = document.createElement('div')
        div.setAttribute('style', 'width:30px;height:30px;background:red;')
        document.body.appendChild(div)
        let instance = null
        return function () {
          if (instance === null) {
            instance = new Object()
            instance.show = function () {
              div.style.display = 'block'
            }
            instance.hide = function () {
              div.style.display = 'none'
            }
          }
          return instance
        }
      })()
      const p = new Popup()
      p.hide()
      p.show()
      const p1 = new Popup()
      console.log(p === p1)

二、工厂模式

工厂模式就是将new操作简单封装，将创建对象的过程封装在一个函数中，这个函数就叫工厂。

由一个工厂函数决定应该根据哪个类去实例化对象。在实际的权限系统开发时，高级权限的用户所拥有的页面有些是不能被低级权限的用户查看的，所以我们可以在不同权限等级用户的构造函数中，保存该用户能看到的页面，再根据权限实例化用户，代码如下：

      const UserFactory = function (role) {
        const obj = {
          superAdmin: function () {
            this.name = '超级管理员'
            this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理']
          },
          admin: function () {
            this.name = '管理员'
            this.viewPage = ['首页', '通讯录', '发现页', '应用数据']
          },
          user: function () {
            this.name = '普通用户'
            this.viewPage = ['首页', '通讯录', '发现页']
          }
        }
        return new obj[role]()
      }
      const superAdmin = UserFactory('superAdmin')
      const admin = UserFactory('admin')
      const user = UserFactory('user')
      console.log(superAdmin)
      console.log(admin)
      console.log(user)

UserFactory就是一个工厂，当调用工厂函数时，只需要传递superAdmin、admin、user这个三个参数便可以获取对应的实例。

常见的工厂模式：

1. document.createElement()
2. jq的$()是一个工厂
3. React.createElement()
4. vue的异步组件