史上最全的JS设计模式（一）

模块模式

var obj=(function(){    
    var count=0;    
    return {        
        addCount:function(){ count++ },        
        getCount:function(){ return count }    
    }
})()

obj.addCount() // 1
obj.getCount() // 1
obj.count // undefined

• 应用场景：

• 需要管理大量私有变量/方法，希望屏蔽内部处理逻辑，只对外暴露接口的独立模块

• 优点：

• 采用封装的思想，只有本模块才能享有私有变量，不会暴露于外部模块

• 减少对全局作用域的影响，避免命名空间污染；

• 模块化有助于保持代码的整洁、隔离和条理性。

• 缺点：

• 无法访问方法调用后产生的私有变量

揭示模块模式

var obj=(function(){    
    var count=0;    
    function addCount(){ count++ }    
    function getCount(){ return count }    
    return {        
        addCount: addCount,       
        getCount: getCount    
    }
})()

• 优点：

• 方法从private改为public非常简单，只需要改属性映射

• 返回的对象不包含任何函数定义，公开的函数和变量一目了然，有助于提高代码的可读性

• 缺点：

• 导致私有函数升级困难。如果一个私有函数引用一个公有函数，在需要打补丁时，公有函数是不能被覆盖的。eg:

function rmpUrlBuilder(){  
    var _urlBase ="http://my.default.domain/";  
    var _build = function(relUrl){    
        return _urlBase + relUrl;  
    };  
    return {    
        urlBase: _urlBase,    
        build: _build  }
}

var builder = new rmpUrlBuilder();
builder.urlBase ="http://stackoverflow.com";
console.log(builder.build("/questions"); 
// 打印结果是 "http://my.default.domain/questions" 
// 而不是 "http://stackoverflow.com/questions"

单例模式

let instance = null;
function User() {  
    if(instance) {    
        return instance;  
    }  
    instance = this;  
    this.name = 'Peter';  
    this.age = 25;  
    return instance;
}

const user1 = new User();
const user2 = new User();
console.log(user1 === user2); // 打印 true

当调用这个构造函数时，它会检查实例对象是否存在。如果对象不存在，它就将这个变量赋给实例变量。如果对象存在，它只返回那个对象。

const singleton = (function() {  
    let instance;  
    function init() {    
        return {      
            name: 'Peter',      
            age: 24,    };  
        }  
    return {    
        getInstance: function() {
            if(!instance) {
                instance = init();      
            }      
            return instance;    
        }  
    }
})();

const instanceA = singleton.getInstance();
const instanceB = singleton.getInstance();
console.log(instanceA === instanceB); // 打印 true

• 应用场景：

• 应用中有对象需要是全局的且唯一。比如页面全局蒙层。

• 优点：

• 适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。

• 缺点：

• 不适用动态扩展对象，或需创建多个相似对象的场景

简单工厂模式

class Email {
    constructor(options) {
        this.message = options.message || '我是emial信息';
        this.type = options.type || 'email',
        this.sender = options.user;
        this.receiver = options.receiver;
        this.sendTime = options.sendTime || new Date()
    }
}
class Weixin {
    constructor(options) {
        this.msg = options.message || '我是微信信息';
        this.type = options.type || 'weixin',
        this.sender = options.user;
        this.receiver = options.receiver;
    }
}
class MessageFactory {
    create(options) {
        switch (option.type) {
        case 'email':
            return new Email(options);
        case 'weixin':
            return new Weixin(options);
        default:
            return null;
        }
    }
}

const factory = new MessageFactory();
const emailMsg = factory.create({
    type: 'email',
    message: '你好，有兴趣了解下安利吗',
    user: 'xiaojia',
    receiver: 'xx1',
});
const weixinMsg = factory.create({
    type: 'weixin',
    message: 'i m 卖保险',
    user: 'xiaojia',
    receiver: 'xx2',
});

• 应用场景：

• 需要处理共享多个相同属性的小型对象/组件

• 可以根据不同的环境/参数生成对象的不同实例

• 对象的类型已知、有限

• 优点：

• 能解决创建多个相似对象的问题。

• 缺点：

• 违背了开放封闭原则。每增加一个产品，都需要修改工厂类的代码

• 对象的类型不知道

工厂模式

class MessageFactory {
    create(options) {
        throw new Error('需要create方法')
    }
}
class EmailMsgFactory extends MessageFactory {
    create(options) {
        return new Email(options)
    }
}

• 应用场景：

• 需要处理多个复杂产品对象

• 不同的工厂和产品可以提供客户端不同的服务或功能

• 产品对象的类型会动态增加

• 优点：

• 克服了简单工厂违背开放-封闭原则的缺点，后期维护更加容易。

• 缺点：

• 每增加一个产品，相应的也要增加一个子工厂，加大了额外的开发量

原型模式

var myCar = {
    name: "Ford Escort",
    drive: function() {
        console.log("Weeee. I'm driving!");
    },
    panic: function() {
        console.log("Wait. How do you stop this thing?");
    }
}; 

// Use Object.create to instantiate a new car
var yourCar = Object.create( myCar );

// Now we can see that one is a prototype of the other
console.log( yourCar.name );

• 应用场景：

• 需要大量复制已存在的对象，对象间又相互独立

• 优点：

• / 实现功能吧，没想出什么优点

• 缺点：

• /

// 主体，发送消息
function sendMsg(msg) {
    console.log(msg);
}

// 代理，对消息进行过滤
function proxySendMsg(msg) {
    // 无消息则直接返回
    if (typeof msg === 'undefined') {
        console.log('deny');
        return;
    }

    // 有消息则进行过滤
    msg = ('' + msg).replace(/敏感信息/g, '****');

    sendMsg(msg);
}

sendMsg('敏感信息'); // 敏感信息
proxySendMsg('敏感信息'); // ****
proxySendMsg(); // deny

// 函数防抖，频繁操作中不处理，直到操作完成之后（再过 delay 的时间）才处理
function debounce(fn, delay) {
    delay = delay || 200;

    var timer = null;

    return function() {
        var arg = arguments;

        // 每次操作时，清除上次的定时器
        clearTimeout(timer);
        timer = null;

        // 定义新的定时器，一段时间后进行操作
        timer = setTimeout(function() {
            fn.apply(this, arg);
        },
        delay);
    }
};

function dataConvenrt(data){    
    // do something    
    return dealData
}

function on(target, event, callback) {
    if (target.addEventListener) {
        // 标准事件监听
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // IE低版本事件监听
        target.attachEvent(event, callback)
    } else {
        // 低版本浏览器事件监听
        target[`on$ {
            event
        }`] = callback
    }
}

var A = {    
    score: 10
};

A.score = '分数：' + A.score;

function Person() {}

Person.prototype.skill = function() {
    console.log('数学');
};

// 装饰器，还会音乐
function MusicDecorator(person) {
    this.person = person;
}

MusicDecorator.prototype.skill = function() {
    this.person.skill();
    console.log('音乐');
};

// 装饰器，还会跑步
function RunDecorator(person) {
    this.person = person;
}

RunDecorator.prototype.skill = function() {
    this.person.skill();
    console.log('跑步');
};

var person = new Person();

// 装饰一下
var person1 = new MusicDecorator(person);
// 再装饰一下
person1 = new RunDecorator(person1);

person.skill(); // 数学
person1.skill(); // 数学 音乐 跑步

// 文件夹 组合对象
function Folder(name) {
    this.name = name;
    this.parent = null;
    this.files = [];
}

Folder.prototype = {
    constructor: Folder,

    add: function(file) {
        file.parent = this;
        this.files.push(file);

        return this;
    },

    scan: function() {
        // 委托给叶对象处理
        for (var i = 0; i < this.files.length; ++i) {
            this.files[i].scan();
        }
    },

    remove: function(file) {
        if (typeof file === 'undefined') {
            this.files = [];
            return;
        }

        for (var i = 0; i < this.files.length; ++i) {
            if (this.files[i] === file) {
                this.files.splice(i, 1);
            }
        }
    }
};

// 文件 叶对象
function File(name) {
    this.name = name;
    this.parent = null;
}

File.prototype = {
    constructor: File,

    add: function() {
        console.log('文件里面不能添加文件');
    },

    scan: function() {
        var name = [this.name];
        var parent = this.parent;

        while (parent) {
            name.unshift(parent.name);
            parent = parent.parent;
        }

        console.log(name.join(' / '));
    }
};

var web = new Folder('Web');
var fe = new Folder('前端');
var css = new Folder('CSS');
var js = new Folder('js');
var rd = new Folder('后端');

web.add(fe).add(rd);

var file1 = new File('HTML权威指南.pdf');
var file2 = new File('CSS权威指南.pdf');
var file3 = new File('JavaScript权威指南.pdf');
var file4 = new File('MySQL基础.pdf');
var file5 = new File('Web安全.pdf');
var file6 = new File('Linux菜鸟.pdf');

css.add(file2);
fe.add(file1).add(file3).add(css).add(js);
rd.add(file4).add(file5);
web.add(file6);

rd.remove(file4);

// 扫描
web.scan();
// 结果
// Web / 前端 / HTML权威指南.pdf
// Web / 前端 / JavaScript权威指南.pdf
// Web / 前端 / CSS / CSS权威指南.pdf
// Web / 后端 / Web安全.pdf
// Web / Linux菜鸟.pdf

fcuntion tosUpload(){    
    // 先获取上传token    
    // 执行上传    
    // 上传后将附件数据发送给业务后台服务
}

function Subject(){    this.observerList=[] // 初始化观察者队列}function Observer(){    this.update = function(ctx){        // do something wiht ctx    }}// 增加观察者Subject.prototype.addObserver = function(observer){    this.observerList.push(observer)}// 通知观察者Subject.prototype.notify = function(ctx){    this.observerList.forEach(observer=>{        observer.update(ctx)    })}

var calculateBouns = function(salary, level) {
    if (level === 'A') {
        return salary * 4;
    }
    if (level === 'B') {
        return salary * 3;
    }
    if (level === 'C') {
        return salary * 2;
    }
}; 

// 调用如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500

var obj = {
    "A": function(salary) {
        return salary * 4;
    },
    "B": function(salary) {
        return salary * 3;
    },
    "C": function(salary) {
        return salary * 2;
    }
};
var calculateBouns = function(level, salary) {
    return obj[level](salary);
};
console.log(calculateBouns('A', 10000)); // 40000

// 面试
function Interview(companyName) {
    this.companyName = companyName
}

Interview.prototype = {
    constructor: Interview,
    // 模板，按顺序执行
    init: function() {
        this.writtenTest();
        this.techTest();
        this.leaderTest();
        if (this.needHrTest()) { // 钩子函数
            this.hrTest();
        }
    },

    // 笔试
    writtenTest: function() {
        throw new Error('必须传递 writtenTest 方法');
    },

    // 面试
    techTest: function() {
        throw new Error('必须传递 techTest 方法');
    },

    // leader面
    leaderTest: function() {
        throw new Error('必须传递 leaderTest 方法');
    },

    // 是否需要hr面
    needHrTest: function() {
        return true
    },

    // hr面
    hrTest: function() {
        throw new Error('必须传递 hrTest 方法');
    }
};

var TouTiaoInterview = function() {};
TouTiaoInterview.prototype = new Interview();

// 子类重写方法 实现自己的业务逻辑
TouTiaoInterview.prototype.writtenTest = function() {
    console.log("先来个红黑树");
}
TouTiaoInterview.prototype.techTest = function() {
    console.log("你对什么比较了解");
}
TouTiaoInterview.prototype.leaderTest = function() {
    console.log("leader谈笑风生");
}
TouTiaoInterview.prototype.hrTest = function() {
    console.log("人力资源太不给力了，我等的花儿都谢了！！");
}
var TouTiaoInterview = new TouTiaoInterview();
TouTiaoInterview.init();

function Person(name) {
    this.name = name this.currentState = null;

    // 状态
    this.workState = new WorkState(this) this.sleepState = new SleepState(this)

    this.init()
}

Person.prototype.init = function() {
    this.currentState = this.workState; // 设置初始状态
    this.currentState.behaviour(); // 开始初始状态的行为
};
Person.prototype.setState = function(state) {
    this.currentState = state;
    this.currentState.behaviour();
}

// 工作状态
function WorkState(person) {
    this.person = person
}
WorkState.prototype.behaviour = function() {
    console.log(this.person.name + ' 上班摸鱼了8小时')
    // 触发[睡觉]状态
    setTimeout(() = >{
        this.person.setState(this.person.sleepState);
    },
    2 * 1000);
}
// 睡觉状态
function SleepState(person) {
    this.person = person
}
SleepState.prototype.behaviour = function() {
    console.log(this.person.name + ' 睡了了14小时')
    // 触发[睡觉]状态
    setTimeout(() = >{
        this.person.setState(this.person.workState);
    },
    2 * 1000);
}

var person = new Person('老王')

//参与者
var Participant = function(name) {
    this.name = name;
    this.chatroom = null;
};
//定义参与者方法
Participant.prototype = {
    send: function(message, to) {
        this.chatroom.send(message, this, to);
    },
    receive: function(message, from) {
        log.add(from.name + " to " + this.name + ": " + message);
    }
};

//聊天室（中介者）
var Chatroom = function() {
    var participants = {};
    return {
        register: function(participant) {
            participants[participant.name] = participant;
            participant.chatroom = this;
        },
        send: function(message, from, to) {
            if (to) {
                to.receive(message, from);
            } else {
                for (key in participants) {
                    if (participants[key] !== from) {
                        participants[key].receive(message, from);
                    }
                }
            }
        }
    }
}
//查看聊天记录
var log = (function() {
    var log = ""
    return {
        add: function(msg) {
            log += msg + "\n"
        },
        show: function() {
            alert(log);
            log = ""
        }
    }
})()
//使用
function run() {
    var yoko = new Participant("Yoko") 
    var john = new Participant("John") 
    var paul = new Participant("Paul") 
    var ringo = new Participant("Ringo") 
    var chatroom = new Chatroom() 
    chatroom.register(yoko) 
    chatroom.register(john) 
    chatroom.register(paul) 
    chatroom.register(ringo) 
    yoko.send("All you need is love.") 
    yoko.send("I love you John.") 
    john.send("Hey, no need to broadcast", yoko) 
    paul.send("Ha, I heard that!") 
    ringo.send("Paul, what do you think?", paul) 
    log.show()
}