javaScript设计模式
一、设计模式的分类
1、创建型设计模式(更好的创建对象、模块)
名称 | 22 |
---|---|
工厂模式 | 只关心最后的结果 |
建造者模式 | 关心创造的过程 |
原型模式 | |
单例模式 | |
2、结构型设计模式 | |
名称 | 22 |
– | – |
外观模式 | 只关心最后的结果 |
适配器模式 | 关心创造的过程 |
装饰者模式 | |
享元模式 | |
桥接模式 | |
3、行为型设计模式(解决模块之间的通信问题) | |
名称 | 22 |
– | – |
观察者模式 | 只关心最后的结果 |
状态模式 | 关心创造的过程 |
职责链模式 | |
访问者模式 | |
迭代器模式 | |
4、技巧型设计模式 (优化代码) | |
名称 | 22 |
– | – |
链模式 | 只关心最后的结果 |
委托模式 | 关心创造的过程 |
节流模式 | |
惰性模式 | |
等待者模式 |
二、 设计模式的原则
1、单一职责 (把一个大的功能划分成许多个小的功能,每一部分只负责一个功能)
2、对扩展开发对修改关闭
3、 里式替换原则 (组合大于继承)
4、接口隔离原则
5、依赖倒置原则 (忽略)
6、迪米特法则(高内聚低耦合)
三、 代码示例
1、工厂模式
/*
工厂模式
解决的问题:批量创建对象
目的:创建对象更方便
用法
*/
function factor(type,word,color) {
var _factor ={
js: function (word,color) {
var html = "<div class="+ color +">"+ word + "</div>"
return html
},
php: function (word,color) {
var html = "<div class="+ color +">"+ word + "</div>"
return html
}
}
var res = _factor[type]();
return res
}
factor('js','js设计模式','red');
//我们可以通过数组循环的方式循环输出不同的html代码
var arr = [
{
type:'php',
word:'',
color:''
},
{
type:'php',
word:'',
color:''
}
]
for (let i = 0; i < arr.length; i++) {
const element = array[i];
factor(element.type,element.word,element.color);
}
//这样就可以很方便的批量创建了