大话JavaScript设计模式（一）——设计模式简介

设计模式简介

设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。

设计模式原则

• S – Single Responsibility Principle 单一职责原则

  • 一个程序只做好一件事
  • 如果功能过于复杂就拆分开，每个部分保持独立

• O – OpenClosed Principle 开放/封闭原则

  • 对扩展开放，对修改封闭
  • 增加需求时，扩展新代码，而非修改已有代码

• L – Liskov Substitution Principle 里氏替换原则

  • 子类能覆盖父类
  • 父类能出现的地方子类就能出现

• I – Interface Segregation Principle 接口隔离原则

  • 保持接口的单一独立
  • 类似单一职责原则，这里更关注接口

• D – Dependency Inversion Principle 依赖倒转原则

  • 面向接口编程，依赖于抽象而不依赖于具体
  • 使用方只关注接口而不关注具体类的实现

SO体现较多，举个栗子：（比如Promise）

• 单一职责原则：每个then中的逻辑只做好一件事
• 开放封闭原则（对扩展开放，对修改封闭）：如果新增需求，扩展then

再举个栗子：(此例来源-守候-改善代码的各方面问题)

//checkType('165226226326','mobile')
//result：false
let checkType=function(str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
        case 'mobile':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        default:
            return true;
    }
}

有以下两个问题：

• 如果想添加其他规则就得在函数里面增加 case 。添加一个规则就修改一次！这样违反了开放-封闭原则（对扩展开放，对修改关闭）。而且这样也会导致整个 API 变得臃肿，难维护。

• 比如A页面需要添加一个金额的校验，B页面需要一个日期的校验，但是金额的校验只在A页面需要，日期的校验只在B页面需要。如果一直添加 case 。就是导致A页面把只在B页面需要的校验规则也添加进去，造成不必要的开销。B页面也同理。

  建议的方式是给这个 API 增加一个扩展的接口:

 let checkType=(function(){
        let rules={
            email(str){
                return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
            },
            mobile(str){
                return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
            }
        };
        //暴露接口
        return {
            //校验
            check(str, type){
                return rules[type]?rules[type](str):false;
            },
            //添加规则
            addRule(type,fn){
                rules[type]=fn;
            }
        }
    })();

    //调用方式
    //使用mobile校验规则
    console.log(checkType.check('188170239','mobile'));
    //添加金额校验规则
    checkType.addRule('money',function (str) {
        return /^[0-9]+(.[0-9]{2})?$/.test(str)
    });
    //使用金额校验规则
    console.log(checkType.check('18.36','money'));

此例更详细内容请查看(守候i-重构-改善代码的各方面问题)

设计模式分类（23种设计模式）

• 创建型

  • 单例模式
  • 原型模式
  • 工厂模式
  • 抽象工厂模式
  • 建造者模式

• 结构型

  • 适配器模式
  • 装饰器模式
  • 代理模式
  • 外观模式
  • 桥接模式
  • 组合模式
  • 享元模式

• 行为型

  • 观察者模式
  • 迭代器模式
  • 策略模式
  • 模板方法模式
  • 职责链模式
  • 命令模式
  • 备忘录模式
  • 状态模式
  • 访问者模式
  • 中介者模式
  • 解释器模式