JavaScript设计模式简述

[NextBoy]

设计模式

什么是设计模式

设计模式是解决软件设计常见问题的解决方案
(解决问题的上策)

反模式是一种针对某个特定问题的不良解决方案,可能会导致糟糕的情况发生
(解决某个问题的下策,可能会埋下后患)

单例模式

确保一个类只有一个实例可以使用

• 优点: 节约资源,方便控制入口
• 缺点: 不可负担过重,拓展困难

##适配器模式( Adapter Pattern )

不影响现有的实现方式,实现调用旧接口的代码

• 优点: 简单,提高复用性
• 缺点: 过多的使用会导致系统层级太复杂

装饰器模式 ( Decorator Pattern )

在不修改类原来接口的情况下,动态地为对象添加功能

• 优点: 扩展对象更灵活,容易组合
• 缺点: 增加复杂性

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

• 优点: 更加解耦,可以进行广播
• 缺点: 观察者过多,则广播性能不理想

/**
 * 实现一个自定义事件 Event 对象
 */

var Event = {
     eventObj: {},
    on: function(topciName, callback){
        //如果不存在该监听者
        if(!this.eventObj[topciName]){
            this.eventObj[topciName] = [];
        }
        //加入事件
        this.eventObj[topciName].push(callback);
        
    },
    
    emit: function(topciName){
        
        if(this.eventObj[topciName]){
            this.eventObj[topciName].map(function(item){
            callback = item;
            callback();
        })
        }
        
    }
};


// 第一个监听观察 topic1
Event.on('someTopic', function () {
   console.log('someTopic1');
});
// 第二个监听观察 topic1
Event.on('someTopic', function () {
   console.log('someTopic2');
});
// 第一个监听观察 topic2
Event.on('otherTopic', function () {
    console.log('otherTopic');
});
Event.emit('someTopic'); // 输出 'someTopic1' 和 'someTopic2'
Event.emit('otherTopic'); // 输出 'otherTopic'

MVC模式

• Model: 业务数据模型
• View: 视图层/用户界面
• Controller: 逻辑控制器

一个例子:

1. 用户与 View 交互，触发用户事件；
2. 事件被 Controller 模块监听到；
3. 然后 Controller 根据不同的用户事件，调用 Model 层相应的接口；
4. 接口的调用执行，导致 Model 层数据的变化，进而触发相应的数据改变事件；
5. 事件又被 View 模块监听到；
6. 最后 View 根据新的数据改变自己的状态，完成了这次对用户事件的响应。

MVVM模式

Model-View-ViewModel

视图 ----- 视图模型 --- 数据模型