JavaScript中几种常用的设计模式
枫叶y 人气:0
*设计模式*：代码书写经验，为了应对各种场景，经过前人不断的总结，压缩，形成的一套又一套的代码的书写规范，形成了设计模式。
## 1.单例模式
*单例模式*是一种常用的设计模式，如果需要多次创建同一个对象，完成同一件事情，就会多次new出来很多个对象，而单例模式确保只有一个实例，并提供全局访问。
```
var f = (function(){
var instance;
return function(){
if(!instance){
// 如果没有则赋值，初始化
instance = new Person();
}
// 有的话直接返回
return instance;
}
})();
var p1 = f();
var p2 = f();
console.log(p1);
console.log(p2);
// 单例模式(唯一的)，每次获取的都是一个东西，所以他
两相等
console.log(p1 === p2);
```
## 2.组合模式
*组合模式*，将对象组合成树形结构以表示“部分-整体”的层次结构。将多个对象的功能，组成起来，实现批量执行。使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为。
```
// 先准备一些需要批量执行的功能
class GoHome{
init(){
console.log("到家了，开门");
}
}
class OpenComputer{
init(){
console.log("开电脑");
}
}
class OpenXiaoAi{
init(){
console.log("开音乐");
}
}
// 组合器，用来组合功能
class Comb{
constructor(){
// 准备容器，用来防止将来组合起来的功能
this.skills = [];
}
// 用来组合的功能，接收要组合的对象
add(task){
// 向容器中填入，将来准备批量使用的对象
this.skills.push(task);
}
// 用来批量执行的功能
action(){
// 拿到容器中所有的对象，才能批量执行
this.skills.forEach( val => {
val.init();
} );
}
}
// 创建一个组合器
var c = new Comb();
// 提前将，将来要批量操作的对象，组合起来
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenXiaoAi() );
// 等待合适的时机，执行组合器的启动功能
c.action();
// 在内部，会自动执行所有已经组合起来的对象的功能
```
## 3.观察者模式
也称*发布-订阅模式*，定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，就会通知所有的观察者对象。发布者：发布信息，会随时更新自身的信息或状态。 订阅者：接收信息，接收到发布者发布的信息，从而做出对应的改变或执行，订阅者可以随时加入或离开。
```
// 需要一个观察者，创建一个事件容器，并准备on等方法
function Observer(){
this.msg = {};
}
// 向事件容器中添加事件，消息
Observer.prototype.on = function(type, cb){
// 判断事件容器中，有没有当前传进来的这个类型
// 如何没有，走else
if(this.msg[type]){
// 如果有，直接给第一次设置的这个数组，添加个新数据
this.msg[type].push(cb);
}else{
// 给他设置一个对应的属性，同时，属性值需要提前写成数组
this.msg[type] = [cb];
}
}
Observer.prototype.emit = function(type){
// 首先判断事件容器中是不是已经记录
if(this.msg[type]){
var event = {
type:type
}
// 如果已经记录了信息，那么就去执行这个消息对应的所有的处理函数
this.msg[type].forEach(val=>{
val.call(this,event);
})
}
}
Observer.prototype.off = function(type, cb){
// 首先判断事件容器中是不是已经记录
if(this.msg[type]){
// 准备保存符合传参的处理函数的索引
var i = 0;
// 遍历，判断，当前类型对应的每一个处理函数，依次作比较
var onoff = this.msg[type].some((val, idx)=>{
i = idx;
return val === cb;
})
// 判断是否获取到重复的函数
if(onoff){
// 如果有，那么就在当前的消息处理函数的队列中，删除这个函数
this.msg[type].splice(i, 1);
}
}
}
// 首先创建一个观察者对象
var ob = new Observer();
// 准备两个处理函数
function a(){
console.log("没收");
}
function b(){
console.log("叫家长");
}
// 随便绑定一个消息，给了两个处理函数
ob.on("玩手机",a);
ob.on("玩手机",b);
// 模拟事件的执行
ob.emit("玩手机");
// 删除一个处理函数
ob.off("玩手机", b);
// 模拟事件的执行
ob.emit("玩手机");
```
## 4.MVC模式
*MVC模式*是一种架构模式,它将应用抽象为3个部分：M：model数据(模型);V：view视图;C：控制器
```
// 创建模型，管理多个数据
class Model{
model1(){
return "hello";
}
model2(){
return "world";
}
model3(){
return "你好";
}
}
// 创建视图，管理多种渲染方式
class View{
view1(data){
console.log(data);
}
view2(data){
document.write(data);
}
view3(data){
alert(data);
}
}
// 创建控制器，设定对应的指令
class Ctrl{
constructor(){
// 初始化模型和视图
this.m = new Model();
this.v = new View();
}
// 在指令中，可以读取对应的数据，放在对应的视图中
ctrl1(){
var data = this.m.model1();
this.v.view1(data);
}
ctrl2(){
var data = this.m.model2();
this.v.view3(data);
}
}
var c = new Ctrl();
c.ctrl1();
c.ctrl2();
```
加载全部内容