JS常見的四種設計模式

1 工廠模式

簡單的工廠模式可以理解為解決多個相似的問題;

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  

 

2單例模式

只能被實例化(構造函數給實例添加屬性與方法)一次

// 單體模式
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");  

 

3 沙箱模式

將一些函數放到自執行函數里面,但要用閉包暴露接口,用變量接收暴露的接口,再調用里面的值,否則無法使用里面的值

let sandboxModel=(function(){
    function sayName(){};
    function sayAge(){};
    return{
        sayName:sayName,
        sayAge:sayAge
    }
})()

 

4 發布者訂閱模式

就例如如我們關注了某一個公眾號,然后他對應的有新的消息就會給你推送,

//發布者與訂閱模式
    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常用的設計模式詳解