JS设计模式简介

1、什么是设计模式?

设计模式是程序员针对特定问题, 给出的简洁而优化的处理方案。
一个设计模式 A，只能解决 A 类型的问题，针对 B 类型的问题, 设计模式 A 解决不了。同一个问题, 在不同的位置, 是不一定能用同一种方案解决
所以设计模式, 只在特定的情况, 特定的时期, 针对特定的问题使用。

2.常用的设计模式

• 单例模式：只允许存在一个实例的模式
• 组合模式：把若干个启动方式一样的构造函数放在一起，准备一个总开关, 总开关一启动, 那么这些构造函数就都启动了
• 观察者模式：又称发布订阅者模式，经典案例：事件监听，一个元素同时监听多个同类型事件，元素对象即为发布者，每一个事件处理函数即为订阅者
• 代理模式：代理模式（Proxy），为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码
• 工厂模式：工厂函数就是做一个对象创建的封装，并将创建的对象return出去
• 策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换，从而避免很多if语句

3.上述的几个模式的具体应用原理及部分核心代码

单例模式

单例模式的简单应用

• 弹出层 alert() 比较丑, 用户体验极度不好
• 好多网站会使用一个自己写的 div 盒子, 当作弹出层
• 再自己写的过程中, 一个网站不可能只弹出一次
  不能每次弹出就创建一个 div
  每次弹出的都是之前创造好的那个 div, 只是文字改变了

// 单例模式 核心代码
function Person() {
this.name = 'Jack'
}
var instance = null
function singleton() {
if (instance === null) {
instance = new Person()
}
return instance
}

组合模式

应用场景

• 轮播图:
  基础版本的轮播图依靠定时器在左右移动
  一旦我切换页面以后, DOM 不动, 定时器在动, 等你再切换回来页面的时候就出问题了
  当我离开当前页面的时候, 应该关闭定时器，等我再次回到当前页面的时候, 应该再从新启动定时器
  一旦一个页面多个轮播图的时候, 我们就可以做一个组合模式
• 做一个总开关,离开页面的时候, 所有的轮播图都停止定时器
• 再做一个总开关, 回到页面的时候, 所有的轮播图再次启动

// 组合模式的代码
class Compose {
constructor () {
// 用来承载每一个实例的数组
this.composeArr = []
}
// 向数组里面添加内容
add (instance) {
this.composeArr.push(instance)
}
// 把数组里面的每一个内容调用了
init () {
console.log('总开关启动了')
this.composeArr.forEach(item => item.init())
}
}
// c 就是一个总开关
var c = new Compose()
// 每一次执行 add 方法就是向总开关上添加内容
c.add(new Play())
c.add(new Eat())
c.add(new Sleep())
// 只要我的总开关一启动
// 里面的每一个构造函数就同时都启动了
c.init()
console.log(c)

观察者模式(订阅发布者模式)

• 经典案例：事件监听，一个元素同时监听多个同类型事件，元素对象即为发布者，每一个事件处理函数即为订阅者。

//自定义事件的订阅和发布
function addEvent(obj,type,fn){
//订阅函数
obj.listener = obj.listener||{};
obj.listener[type] = obj.listener[type]||[];
obj.listener[type].push(fn)
}
function fireEvent(obj,type){
//发布函数
var fnArr = obj.listener[type];
for(var i=0;i<fnArr.length;i++){
fnArr[i]()
}
}
addEvent(div,'a',function(){
console.log("通知小红a主播开播了")
})
addEvent(div,'a',function(){
console.log("通知小李a主播开播了")
})
addEvent(div,'a',function(){
console.log("通知小张a主播开播了")
})
fireEvent(div,'a')

代理模式

案例：准备三个对象,用户委托快捷方式打开exe,为了不暴露执行对象的部分代码,男孩委托快递小哥给女孩送礼物

var girl = function(name){
this.name = name;}//隐藏复杂，不愿意修改的的方法
var boy = function(girl){
this.girl = girl;
this.send = function(gift){
alert("你好："+this.girl.name+",给你一个"+gift);
}}var proxyBro = function(girl){
this.send = function(gift){
new boy(girl).send(gift);
}}var pro = new proxyBro(new girl("Lisa"));
pro.send("么么哒");
pro.send("玫瑰花");

工厂模式

• 工厂函数就是做一个对象创建的封装，并将创建的对象return出去

function newObj(name,age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
var obj = newObj();

策略模式

案例：比如公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍

var obj = {
"A": function(salary) {
return salary * 4;
},
"B" : function(salary) {
return salary * 3;
},
"C" : function(salary) {
return salary * 2;
}};var calculateBouns =function(level,salary) {
return obj[level](salary);};
//假如小张的绩效为A
console.log(calculateBouns('A',10000)); // 40000

总结

设计模式即设计代码的方式。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

• 点赞
• 收藏
• 分享
• 文章举报