前端中的常用设计模式

对于前端的一些常用的设计模式做出一些总结，以下是5中设计模式：

1.工厂模式

工厂模式抽象了创建具体对象的过程，即：发明一种函数，用函数来封装以特定接口创建对象的细节

例如：

function createPerson (name, age, job) {
    var o = new Object();
    o.name = name;         
    o.age = age;   
    o.job = job;
    o.sayName = function () {
        alert(this.name);
    }
    return o;
}
var person1 = createPerson('hello', 29, 'software engineer');
var person2 = createPerson('world', 30, 'Doctor');

该函数createPerson就相当于工厂，能够根据接收的参数来构建一个个包含所有必要信息的person对象，可以无数次的调用这个函数，其每次都会返回一个包含该三个属性一个方法的对象。

2.单例模式

它是最简单的一个模式，指的是在系统中保存一个实例，相当于定义了一个全局变量，如果要使用可以直接调用，但是如果更改，可能会影响其他调用时场景。

3.观察者模式

这个模式就比较重要，在vue及react等框架中就是依赖于此模式。即:一种对多种的依赖对象，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知，高耦合。

观察者模式也叫发布-订阅模式，发布时订阅的人会看到，就相当于对象更改时，调用的一起更改。

最简单的观察者模式：

$('.btn').addEventListener('click', function() {
    console.log('hello world!');
});

$('.btn')首先是订阅点击事件，等真正点击时即发布，随后执行函数

以下为自定义的观察者模式：

var saleOffies = {};
saleOffies.clientList = [];
saleOffies.listen = function (fn){
    this.clientList.push(fn);
}
saleOffies.trigger = function (){
    for(var i = 0, fn; fn = this.clientList[i++];){
        fn.apply(this,arguments);
    }
}
//调用
saleOffies.listen(function (price, squareMeter){
    console.log('价格' + price);
    console.log('squareMeter' + squareMeter);
});
saleOffies.trigger(20000,89);

 

4.命令模式

用来对方法调用进行参数化处理和传送，经过这样处理过的方法调用可以在任何需要的时候执行。

总的来说，就是将函数的调用、请求和操作封装成一个单一的对象。

例如下方点击按钮：

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
//总的定义
var setCommand = function(button,func) {
    button.onclick = function(){
        func();
    }
 }; 
 var MenuBar = {
    refersh: function(){
        alert("刷新菜单界面");
    }
 };
 var SubMenu = {
    add: function(){
        alert("增加菜单");
    }
 };
 // 刷新菜单
 var RefreshMenuBarCommand = function(receiver) {
    return function(){
        receiver.refersh();    
    };
 };
 // 增加菜单
 var AddSubMenuCommand = function(receiver) {
    return function(){
        receiver.add();    
    };
 };
 var refershMenuBarCommand = RefreshMenuBarCommand(MenuBar);
 var addSubMenuCommand = AddSubMenuCommand(SubMenu);

 setCommand(btn1,refershMenuBarCommand);
 setCommand(btn2,addSubMenuCommand);

5.职责链模式

使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。（大函数分割成一个个小函数，清晰，各司其职）