前端中的常用设计模式

对于前端的一些常用的设计模式做出一些总结,以下是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.职责链模式

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

 

 

posted @ 2019-11-20 21:26  whale~alince  阅读(668)  评论(0编辑  收藏  举报