# 25、JS中常用的设计模式

# 设计模式的好处

对于开发来说

开发效率高，利于团队协作，逻辑清晰，代码严谨，可维护、可扩展性高。依托设计模式可以实现组件化，模块化、插件化、框架化以及一些常用类库方法的编写

# 插件、组件、类库、框架的区别

区别

类库：提供一些真实项目开发中常用的方法（方法做了完善处理：兼容处理，细节优化），方便我们开发和维护如JQuery、Zepto

插件：把项目中某一部分进行插件化封装（具备一些具体业务逻辑的，更有针对性），以后再有类似的需求，直接导入插件即可，相关业务逻辑代码不需要自己再编写了

jquery.drag.js
jquery.dialog.js
datepicker日历插件
echars统计图插件

组件：类似于插件，但是插件一般只是把JS部分封装了，组件不仅封装了JS部分，而且把css部分也封装了，以后再使用的时候，我们直接的按照文档使用说明引入css、js,搭建对应的结构，什么都不用做功能自然就有了；swiper组件、bootstrap组件

框架：比上面的三个都庞大，不仅提供了很多常用的方法、而且也可以支持一些插件的扩展（可以把一些插件集成到框架中运行），更重要的是提供了非常优秀的代码管理设计思想；

# 常用的设计模式

单例设计模式

构造函数设计模式

发布订阅设计模式

promise设计模式

# 单例设计模式

把实现当前模块所有的属性和方法汇总到同一个命名空间下（避免了全局变量的污染）

let Render=(function(){
  return {
    init:function(){
        //控制当前模块中具体的业务逻辑顺序
    }
  }
})();
Render.init();

想要实现具体的业务逻辑需求，都可以依赖于单例模式构建：我们把项目划分成各大板块或者模块，把实现同一个模块的方法放在同一个独立的命名空间下方便团队协作开发

# 构造函数设计模式

class Tool{
  constructor(){
    this.flag='getComputedStyle' in window;
  }
  //挂载到原型上的方法
  css(){

  }
  static distinct(){

  }
}
class A extends Tool{
  constructor(){
    super();
    this.xxx='xxx';
  }
  //写在原型上的方法
  bindData(){
    //可直接在此处使用父类原型上的方法
    this.css();
    //把父类当作对象添加的静态方法子类的实例是无法调用的；
    this.distinct();//会报undefined
    //想调用父类当作对象添加的方法
    Tool.distinct();//不会报错
  }
}

# 发布订阅模式（观察者模式）

也叫观察者模式

达到某个条件之后，要执行N个方法，我们都可以依托于发布订阅设计模式管理和规划我们的JS代码； 原理：

1、先创建一个容器
2、后期要做什么事，我们都把要处理的事情增加到容器中
3、当达到某个条件的时候，我们只需要让容器中的方法按照顺序依次执行即可；

jQery中的发布订阅模式

let $plan=$.Callbacks();//创建一个容器
let fn2=function(){
};
let fn1=function(){
}
//把需要执行的方法添加到容器中
$plan.add(fn2);
$plan.remove(fn2);
//让容器中的方法依次执行100，200是让方法执行传递给方法的参数
$plan.fire(100,200);

# promise设计模式

promise

promise是一个优秀的异步解决方案，解决AJAX异步请求层级嵌套的问题；目的是为了解决层级嵌套的问题

$.ajax({
  url:'A',
  async:true,
  success:function (data) {
    $.ajax({
      url:'B',
      async:true,
      success:function (data) {
          
      }
    })
  }
})

← 24、CSS3与H5 26、移动端常用类库 →