JS的四种设计模式

工厂模式

简单的工厂模式可以理解为解决多个相似的问题

javascript 复制代码
function CreatePerson(name,age,sex) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    obj.sayName = function(){
        return this.name;
    }
    return obj;
}
var p1 = new CreatePerson("longen", 28 , 男 );
var p2 = new CreatePerson("tugenhua", 27 , 女 );
console.log(p1.name); // longen
console.log(p1.age);  // 28
console.log(p1.sex);  // 男
console.log(p1.sayName()); // longen
 
console.log(p2.name);  // tugenhua
console.log(p2.age);   // 27
console.log(p2.sex);   // 女
console.log(p2.sayName()); // tugenhua  

单例模式

只能被实例化(构造函数给实例添加属性与方法)一次

javascript 复制代码
// 单体模式
var Singleton = function(name){
    this.name = name;
};
Singleton.prototype.getName = function(){
    return this.name;
}
// 获取实例对象
var getInstance = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {//相当于一个一次性阀门,只能实例化一次
            instance = new Singleton(name);
        }
        return instance;
    }
})();
// 测试单体模式的实例,所以a===b
var a = getInstance("aa");
var b = getInstance("bb");  

沙箱模式

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

javascript 复制代码
let sandboxModel=(function(){
    function sayName(){};
    function sayAge(){};
    return{
        sayName:sayName,
        sayAge:sayAge
    }
})()

发布者订阅模式

就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送

通知所有的订阅者:

发布者触发时依次执行缓存列表里所有的订阅者回调

javascript 复制代码
//发布者与订阅模式
    var shoeObj = {}; // 定义发布者
    shoeObj.list = []; // 缓存列表 存放订阅者回调函数
 
    // 增加订阅者
    shoeObj.listen = function(fn) {
        shoeObj.list.push(fn); // 订阅消息添加到缓存列表
    }
 
    // 发布消息
    shoeObj.trigger = function() {
            // 当事件触发的时候(状态发生变化),依次执行回调函数
            for (var i = 0, fn; fn = this.list[i++];) {
                fn.apply(this, arguments);//第一个参数只是改变fn的this,
            }
        }


    // 小红订阅如下消息
    shoeObj.listen(function(color, size) {
        console.log("颜色是:" + color);
        console.log("尺码是:" + size);
    });
    // 小花订阅如下消息
    shoeObj.listen(function(color, size) {
        console.log("再次打印颜色是:" + color);
        console.log("再次打印尺码是:" + size);
    });
    shoeObj.trigger("红色", 40);
    shoeObj.trigger("黑色", 42);  

通知指定的订阅者:

javascript 复制代码
//发布者与订阅模式
    var shoeObj = {}; // 定义发布者
    shoeObj.list = []; // 缓存列表 存放订阅者回调函数
    // ['xiaohong88':[],'xiaohua88':[]]
 
    // 增加订阅者
    shoeObj.listen = function(key,fn) {
        if(!this.list[key]){
            this.list[key] = []
        }
        this.list[key].push(fn); // 订阅消息添加到缓存列表
    }
 
    // 发布消息
    shoeObj.trigger = function() {
            var key = Array.prototype.shift.call(arguments),
            fns = this.list[key]

            // 当事件触发的时候(状态发生变化),依次执行回调函数
            for (var i = 0, fn; i < fns.length; i++) {
                fns[i].apply(this, arguments);//第一个参数只是改变fn的this,
            }
        }


    // 小红订阅如下消息
    shoeObj.listen('xiaohong88',function(color, size) {
        console.log("颜色是:" + color);
        console.log("尺码是:" + size);
    });
    shoeObj.listen('xiaohong88',function(color, size) {
        console.log("再次打印颜色是:" + color);
        console.log("再次打印尺码是:" + size);
    });
    shoeObj.trigger('xiaohong88',"红色", 40);
    // shoeObj.trigger("黑色", 42);  

抽离成一个对象

javascript 复制代码
//发布者与订阅模式
    var Event = {
        list:[],
        listen:function(key,fn) {
            if(!this.list[key]){
                this.list[key] = []
            }
            this.list[key].push(fn); // 订阅消息添加到缓存列表
        },
        trigger(){
            var key = Array.prototype.shift.call(arguments),
            fns = this.list[key]

            // 当事件触发的时候(状态发生变化),依次执行回调函数
            for (var i = 0, fn; i < fns.length; i++) {
                fns[i].apply(this, arguments);//第一个参数只是改变fn的this,
            }
        }
    }
    function installEvent(target,Source){
        return Object.assign(target,Source)
    }
    var shoeObj= installEvent(shoeObj = {},Event)

    // 小红订阅如下消息
    shoeObj.listen('xiaohong88',function(color, size) {
        console.log("颜色是:" + color);
        console.log("尺码是:" + size);
    });
    shoeObj.listen('xiaohong88',function(color, size) {
        console.log("再次打印颜色是:" + color);
        console.log("再次打印尺码是:" + size);
    });
    shoeObj.trigger('xiaohong88',"红色", 40);
    // shoeObj.trigger("黑色", 42);  
相关推荐
胡侃有料8 小时前
【设计模式】1.简单工厂、工厂、抽象工厂模式
设计模式·抽象工厂模式
liang_jy10 小时前
观察者模式
设计模式·面试
~山有木兮11 小时前
C++设计模式 - 单例模式
c++·单例模式·设计模式
周某某~12 小时前
四.抽象工厂模式
java·设计模式·抽象工厂模式
勤奋的知更鸟13 小时前
Java编程之组合模式
java·开发语言·设计模式·组合模式
哆啦A梦的口袋呀13 小时前
基于Python学习《Head First设计模式》第九章 迭代器和组合模式
python·学习·设计模式
on the way 12313 小时前
行为型设计模式之Mediator(中介者)
java·设计模式·中介者模式
周某某~15 小时前
二.单例模式‌
java·单例模式·设计模式
十五年专注C++开发16 小时前
设计模式之单例模式(二): 心得体会
开发语言·c++·单例模式·设计模式
hstar952716 小时前
三十五、面向对象底层逻辑-Spring MVC中AbstractXlsxStreamingView的设计
java·后端·spring·设计模式·架构·mvc