丁鹿学堂:前端对象封装常用设计模式详解

58 阅读2分钟

设计模式探究之封装

我们经常说封装,封装的好处在哪里呢?
1 定义的变量不会污染外部
2 能够作为一个模块调用
3 遵循开闭原则。

什么样的封装才是优雅的呢?

1 保证变量外部不可见
2 设计好给外部调用我们封装的功能的接口
3 设计好一定的扩展接口,方便别人去扩展功能。

工厂模式

工厂模式可以方便我们大量创建对象。工厂模式的使用场景就是当某一个对象需要经常创建的时候,我们就考虑使用工厂模式了。
应用场景:编写分页组件,每个页码都是一个对象。或者项目中的弹窗有很多,就可以使用工厂模式。
套路:写一个方法,只需要调用这个方法,就能拿到我们想要的对象。
基本结构代码:根据不同类型返回不同的实力对象

function Factory(type){
  switch(type){
    case 'type1':
      return new Type1();
    case 'type2':
      return new Type2();
    case 'type3':
      return new Type3();
  }
}

建造者模式

建造者模式也用于封装对象,但是他是为了组合出全局对象。当要创建单个,比较复杂庞大的对象的时候,考虑使用建造者模式。
比如前段开发中如果要创建一个复杂的轮播图,有各种交互效果,这个时候就可以考虑使用建造者模式去创建。
套路:把一个复杂的类的各个部分,拆分成独立的类,然后再最终的一个类去再次组合。
基本结构代码:就是拆分重组。

function Mode1(){

}
function Mode2(){

}
function Result(){
  this.mode1 = new Mode1()
  this.mode2 = new Mode2()
}

单例模式

需要确保全局只有一个对象的时候,我们经常会使用单例模式。因为很多情况下,我们为了避免多个对象之间互相干扰,往往需要保证全局只有一个对象。
套路:通过定义一个方法,使用时,只能通过定义的这个方法获取到存在内部的同一实例化对象。
基本结构代码:判断,如果有实例,直接返回出去,如果没有,就创建一个

let SingleObj = function(value){
  this.value = value
}
SingleObj.getInstance = function(value){
  if(this.instance){
    return this.instance
  }
  return this.instance =  new SingleObj(value)
}