丁鹿学堂:前端设计模式学习之单例模式和享元模式

单例模式

通过一个需求案例,可以很好的理解单例模式的使用。
需求:项目中有一个全局的数据存储,这个存储只能有一个,否则会造成数据不同步的问题。
不管怎么调用它,都只会返回同样的一个对象。

function store (){
  this.store = {

  }
  if(store.install){
    return store.install
  }
  store.install = this
}
store.install = null

注意:
我们加了一个判断,就实现了单例模式。当第一次new调用的时候,我们会创建一个对象,上面有store属性。并且给store加一个install属性,这个属性指向的是this,即new实例化以后的对象。
第二次再new调用的时候,store.install 已经存在(就是第一次new调用的实例化对象),则直接返回的就是这个对象的指向。从而保证了只有一个实例对象的存在。

代码复用性的三个特点

1 对象可以重复使用,不用修改
2 重复的代码少
3 模块功能单一
针对复用代码,有一些常用的设计模式,分享给大家。

享元模式

享元模式的应用场景是当当代码中创建了大量类似对象和代码块的时候,就可以使用享元模式来减少重复。
享元模式的基本结构:
假设我们有很多种不同提示文字的弹窗,但是他们的样式和行为都是相同的,那么我们就没有必要针对不同的文字提示新建那么多弹窗的对象。

function Pop(){

}
Pop.prototype.action = function(){
    // todo code
}
Pop.prototype.show = function(){
    // todo code
}
let popContentList = [
    {content:'content1...',style:{color:'red'}},
    {content:'content2...',style:{color:'green'}},
]

let poper = new Pop()

popContentList.forEach((item)=>{
    poper.show(item)
})

注意:
1我们把公共的特征提取成一个类,不同的特性,
2 不同的部门,我们提取成一个数组
3 我们在show方法里面去根据不同的内容执行不同的操作。
总结:
享元模式就是当我们总结出我们的对象或者代码块,存在多个比较相近的内容,我们可以把相同的部分保留在类中,不同的部分提取出来作为公用的一个数据。

你可能感兴趣的:(前端培训丁鹿学堂分享站,单例模式,前端,设计模式)