设计模式单例模式

已注销
91 阅读4分钟

单例模式

适用场景

“单例模式的特点，意图解决：维护一个全局实例对象。”

  1. 引用第三方库（多次引用只会使用一个库引用，如 jQuery）
  2. 弹窗（登录框，信息提升框）
  3. 购物车 (一个用户只有一个购物车)
  4. 全局态管理 store (Vuex / Redux)

项目中引入第三方库时，重复多次加载库文件时，全局只会实例化一个库对象，如 jQuery，lodash，moment ..., 其实它们的实现理念也是单例模式应用的一种

优缺点

  • 优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。
  • 缺点：不适用动态扩展对象，或需创建多个相似对象的场景。

代码实现

 class LoginForm {
    constructor() {
        this.state = 'hide'
    }
    show() {
        if (this.state === 'show') {
            alert('已经显示')
            return
        }
        this.state = 'show'
        console.log('登录框显示成功')
    }
    hide() {
        if (this.state === 'hide') {
            alert('已经隐藏')
            return
        }
        this.state = 'hide'
        console.log('登录框隐藏成功')
    }
 }
 LoginForm.getInstance = (function () {
     let instance
     return function () {
        if (!instance) {
            instance = new LoginForm()
        }
        return instance
     }
 })()

let obj1 = LoginForm.getInstance()
obj1.show()

let obj2 = LoginForm.getInstance()
obj2.hide()

console.log(obj1 === obj2)

升级封装

const aa = (function () {
        class LoginForm {
          constructor() {
            this.state = "hide";
          }
          show() {
            if (this.state === "show") {
              alert("已经显示");
              return;
            }
            this.state = "show";
            console.log("登录框显示成功");
          }

          hide() {
            if (this.state === "hide") {
              alert("已经隐藏");
              return;
            }
            this.state = "hide";
            console.log("登录框隐藏成功");
          }
        }

        let instance;
        return function () {
          if (!instance) {
            instance = new LoginForm();
          }
          return instance;
        };
      })();

      let yi = aa();
      yi.show();
      let y2 = aa();
      y2.hide();

策略模式

场景例子

  • 如果在一个系统里面有许多类，它们之间的区别仅在于它们的'行为'，那么使用策略模式可以动态地让一个对象在许多行为中选择一种行为。
  • 一个系统需要动态地在几种算法中选择一种。
  • 表单验证
  • 判断条件很多
  • 各个判断条件下的代码相互独立

优点

  • 利用组合、委托、多态等技术和思想，可以有效的避免多重条件选择语句
  • 提供了对开放-封闭原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，理解，易于扩展
  • 利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的代替方案

缺点

  • 会在程序中增加许多策略类或者策略对象
  • 要使用策略模式，必须了解所有的strategy，必须了解各个strategy之间的不同点，这样才能选择一个合适的strategy

案例1

商场打折 优惠 要是用if 很繁琐 不利于观察

const calcPrice = (function(){
      const calcList = {
        //es6新增属性名表达式
        //箭头函数
        '80%':total => (total * 0.8).toFixed(1),
        '70%':total => (total * 0.7).toFixed(1)
      }

      function inner(type,total){
        return calcList[type](total)
      }
      
      //函数也是一种对象 也可以添加属性 方法
      //添加方法
      inner.add = function(key,fn){
        calcList[key] = fn
      }
      //删除方法
      inner.sub = function(key){
        delete calcList[key]
      }

     //输出
      inner.cha = function(key){
        return calcList
      }
      return inner
    })()

    console.log(calcPrice('80%',13662))
    console.log(calcPrice.cha())

案例2

表#单验证

<html>
<head>
    <title>策略模式-校验表单</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
    <form id = "registerForm" method="post" action="http://xxxx.com/api/register">
        用户名：<input type="text" name="userName">
        密码：<input type="text" name="password">
        手机号码：<input type="text" name="phoneNumber">
        <button type="submit">提交</button>
    </form>
    <script type="text/javascript">
        // 策略对象
        const strategies = {
          isNoEmpty: function (value, errorMsg) {
            if (value === '') {
              return errorMsg;
            }
          },
          isNoSpace: function (value, errorMsg) {
            if (value.trim() === '') {
              return errorMsg;
            }
          },
          minLength: function (value, length, errorMsg) {
            if (value.trim().length < length) {
              return errorMsg;
            }
          },
          maxLength: function (value, length, errorMsg) {
            if (value.length > length) {
              return errorMsg;
            }
          },
          isMobile: function (value, errorMsg) {
            if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
              return errorMsg;
            }                
          }
        }
        
        // 验证类
        class Validator {
          constructor() {
            this.cache = []
          }
          add(dom, rules) {
            for(let i = 0, rule; rule = rules[i++];) {
              let strategyAry = rule.strategy.split(':')
              let errorMsg = rule.errorMsg
              this.cache.push(() => {
                let strategy = strategyAry.shift()
                strategyAry.unshift(dom.value)
                strategyAry.push(errorMsg)
                return strategies[strategy].apply(dom, strategyAry)
              })
            }
          }
          start() {
            for(let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
              let errorMsg = validatorFunc()
              if (errorMsg) {
                return errorMsg
              }
            }
          }
        }

        // 调用代码
        let registerForm = document.getElementById('registerForm')

        let validataFunc = function() {
          let validator = new Validator()
          validator.add(registerForm.userName, [{
            strategy: 'isNoEmpty',
            errorMsg: '用户名不可为空'
          }, {
            strategy: 'isNoSpace',
            errorMsg: '不允许以空白字符命名'
          }, {
            strategy: 'minLength:2',
            errorMsg: '用户名长度不能小于2位'
          }])
          validator.add(registerForm.password, [ {
            strategy: 'minLength:6',
            errorMsg: '密码长度不能小于6位'
          }])
          validator.add(registerForm.phoneNumber, [{
            strategy: 'isMobile',
            errorMsg: '请输入正确的手机号码格式'
          }])
          return validator.start()
        }

        registerForm.onsubmit = function() {
          let errorMsg = validataFunc()
          if (errorMsg) {
            alert(errorMsg)
            return false
          }
        }
    </script>
</body>
</html>

案例3 超市案例

具体规则如下：

  • 部分产品已预售：为鼓励客户预订，将在原价基础上享受 20% 的折扣。

  • 部分产品处于正常促销阶段：如果原价低于或等于100，则以10%的折扣出售；如果原价高于 100，则减 10 元。

  • 有些产品没有任何促销活动：它们属于 default 状态，并以原价出售。

function getPrice(originalPrice, status) {
    if (status === "pre-sale") {
        return originalPrice * 0.8;
    }

    if (status === "promotion") {
        if (origialPrice <= 100) {
            return origialPrice * 0.9;
        } else {
            return originalPrice - 20;
        }
    }

    if (status === "default") {
        return originalPrice;
    }
}

有三个条件，上面的代码写了三个 if 语句，这是非常直观的代码，但是这段代码组织上不好。

假设业务扩大了，现在还有另一个折扣促销：黑色星期五。折扣规则如下：

  • 价格低于或等于 100 元的产品以 20% 的折扣出售。
  • 价格高于 100 元但低于 200 元的产品将减少 20 元。
  • 价格高于或等于 200 元的产品将减少 20 元。
function getPrice(originalPrice, status) {
    if (status === "pre-sale") {
        return originalPrice * 0.8;
    }

    if (status === "promotion") {
        if (origialPrice <= 100) {
            return origialPrice * 0.9;
        } else {
            return originalPrice - 20;
        }
    }
    // 黑色星期五规则
    if (status === "black-friday") {
        if (origialPrice >= 100 && originalPrice < 200) {
            return origialPrice - 20;
        } else if (originalPrice >= 200) {
            return originalPrice - 50;
        } else {
            return originalPrice * 0.8;
        }
    }

    if (status === "default") {
        return originalPrice;
    }
}

每当增加或减少折扣时，都需要更改函数。这种做法违反了开闭原则（对扩展开放，对修改关闭）。修改已有的功能很容易出现新的错误，而且还会使得 getPrice 越来越臃肿。

那么如何优化这段代码呢？

首先，可以拆分这个函数 getPrice 以减少臃肿。

最终版本

/**
 * 预售商品价格规则
 * @param {*} origialPrice
 * @returns
 */
function preSalePrice(origialPrice) {
    return originalPrice * 0.8;
}
/**
 * 促销商品价格规则
 * @param {*} origialPrice
 * @returns
 */
function promotionPrice(origialPrice) {
    if (origialPrice <= 100) {
        return origialPrice * 0.9;
    } else {
        return originalPrice - 20;
    }
}
/**
 * 黑色星期五促销规则
 * @param {*} origialPrice
 * @returns
 */
function blackFridayPrice(origialPrice) {
    if (origialPrice >= 100 && originalPrice < 200) {
        return origialPrice - 20;
    } else if (originalPrice >= 200) {
        return originalPrice - 50;
    } else {
        return originalPrice * 0.8;
    }
}
/**
 * 默认商品价格
 * @param {*} origialPrice
 * @returns
 */
function defaultPrice(origialPrice) {
    return origialPrice;
}

function getPrice(originalPrice, status) {
    if (status === "pre-sale") {
        return preSalePrice(originalPrice);
    }

    if (status === "promotion") {
        return promotionPrice(originalPrice);
    }

    if (status === "black-friday") {
        return blackFridayPrice(originalPrice);
    }

    if (status === "default") {
        return defaultPrice(originalPrice);
    }
}

可以使用映射而不是冗长的 if-else 来存储映射，按照这个思路可以构造一个价格策略的映射关系（策略名称与其处理函数之间的映射），如下：

const priceStrategies = {
    "pre-sale": preSalePrice,
    promotion: promotionPrice,
    "black-friday": blackFridayPrice,
    default: defaultPrice,
};

将状态与折扣策略结合起来，价格函数就可以优化成如下：

function getPrice(originalPrice, status) {
    return priceStrategies[status](originalPrice);
}
avatar
文章
阅读
粉丝