JavaScript 設(shè)計(jì)模式

1、構(gòu)造函數(shù)constructor

function Contructor() {
    // public
    this.age = 18;
    // private
    var myname = 'tom';
    // public
    this.say = function () {
        console.log('say');
    };

    Contructor.prototype.father = 'bob';

    Contructor.prototype.tell = function () {
        console.log('tell');
    }

}

var contructor = new Contructor();
console.log(contructor.age);
console.log(contructor.myname);
console.log(contructor.father);
contructor.say();
contructor.tell();

2烛愧、模塊化 module

var module = (function () {
    //  private
    var myname = 'tom';
    // private
    var say = function () {
        console.log('say');
    };
    return {
        father: 'bob',
        tell: function () {
            console.log('tell');
        },
        // 將私有方法公開
        publicSay: say
    }
})();

console.log(module.myname);
console.log(module.father);
// module.say(); 私有方法無法使用
module.tell();
module.publicSay();

3油宜、揭示模塊 reavealing module

var revealingModule = function () {
    function say() {
        console.log('say');
    }

    function tell() {
        console.log('tell');
    }

    return {
        a: say,
        b: tell
    }
}();

revealingModule.a();
revealingModule.b();

4掂碱、單例模式 singleton

var singleton = (function () {
    var instance;

    function init() {
        // private
        function say() {
            console.log('say');
        }

        var myname = 'tom';
        var num = Math.random();
        return {
            // public
            publicSay: say,
            publicName: myname,
            publicNum: num
        }
    }

    return {
        getInstance: function () {
            if (!instance) {// 如果已經(jīng)有實(shí)例,則不再初始化慎冤。這樣全局就只有一個(gè)實(shí)例疼燥,不會重復(fù)實(shí)例化
                instance = init();
            }

            return instance;
        }
    }
})();

console.log(singleton.getInstance().publicNum);
console.log(singleton.getInstance().publicNum);

5、觀察者模式 observer

  • ObserverList 觀察者列表 : 就是用來儲存觀察者們的列表蚁堤,由Subject管理員進(jìn)行操作
  • Subject 管理員 : 對觀察者進(jìn)行增刪改查操作醉者,通知觀察者進(jìn)行改變。
  • Observer 觀察者 : 觀察目標(biāo)的變化违寿,接收到通知后湃交,更新自己的狀態(tài)。更新的內(nèi)容由觀察者自己決定藤巢。
  • ConcreteSubject 目標(biāo) : 目標(biāo)發(fā)生變化時(shí)搞莺,向管理員報(bào)告,要求管理員發(fā)通知給觀察者掂咒,同時(shí)存儲自己的狀態(tài)
  • 發(fā)布/訂閱模式 publish/subscribe
function Observer() {
    this.list = [];
}

Observer.prototype = {
    // 添加訂閱者
    subscribe: function (obj) {
        this.list.push(obj);
    },

    // 取消訂閱者
    unsubcribe: function (obj) {
        this.list = this.list.filter(function (item) {
            if (item !== obj) {
                return item;
            }
        })
    },

    publish: function (param) {
        this.list.forEach(function (item) {
            item.message = param;
        })
    }
};

var observer = new Observer();
var man1 = {age: 12, message: ''};
var man2 = {age: 13, message: ''};
observer.subscribe(man1);
observer.subscribe(man2);
observer.publish('hello');

console.log(man1.message, man1.age);
console.log(man2.message, man2.age);
observer.unsubcribe(man2);// 取消訂閱
observer.publish('hello2');
console.log(man1.message, man1.age);
console.log(man2.message, man2.age);

6才沧、中介者模式 mediator

var Mediator = (function () {
    var list = [];
    var subscribe = function (obj) {
        list.push(obj);
    };
    var unsubscribe = function (obj) {
        list = list.filter(function (item) {
            if (item !== obj) {
                return item;
            }
        })
    };
    var publish = function (param) {
        list.forEach(function (item) {
            item.message = param;
        })
    };

    return {
        Subscribe: subscribe,
        Unsubscribe: unsubscribe,
        Publish: publish
    };
})();

Mediator.Subscribe(man1);
Mediator.Subscribe(man2);
Mediator.Publish('hello3');
console.log(man1.message, man1.age);
console.log(man2.message, man2.age);

7、原型模式 prototype

var Person = {
    name: 'tom',
    say: function () {
        console.log('say');
    }
};

// bob自身是空對象绍刮,但bob通過Object繼承了Person温圆,即bob擁有__proto__這個(gè)屬性,指向Pserson孩革,所以直接可以使用name和say屬性
var bob = Object.create(Person);
console.log(bob);
console.log(bob.name);
bob.say();

var cindy = Object.create(Person, {"age": {"value": "23"}});
console.log(cindy);
console.log(cindy.name);
cindy.say();
console.log(cindy.value);

// Object.create()的使用

var obj1;// 將沒有原型
obj1 = Object.create(null);
console.log(obj1);

var obj2;
obj2 = Object.create({});
console.log(obj2);

var obj3 = {};
console.log(obj3);

var obj4 = Object.create({}, {//會有p屬性岁歉,p屬性要用一個(gè)對象來定義,value值膝蜈,writable是否可寫
    p: {value: 42, writable: true, enumerable: true, configurable: true}
});
console.log(obj4);

8锅移、命令模式 command

該模式旨在將方法調(diào)用、請示或者操作封裝到單一對象中饱搏。

(function () {
    var Person = {// 封裝到單一對象
        walk: function (step) {
            step++;
            return "我已經(jīng)走了" + step + "步";
        },
        say: function (name) {
            return name;
        }
    };
    console.log(Person.walk(2));// 在函數(shù)中執(zhí)行
    console.log(Person.say('wlc'));
})();

9非剃、工廠模式 factory

理解,如果單單只是造個(gè)小車推沸,那直接定義小車并用來造車即可备绽,但如果要調(diào)用多個(gè)構(gòu)造函數(shù)來造車不同類型的車,就要工廠來鬓催,工廠根據(jù)定單中的參數(shù)造不同的車

// 
// 造車工廠

//定義小車的構(gòu)造函數(shù)
function Car(option) {
    this.doors = option.doors || 4;
    this.brand = option.brand || '福特';
}
//定義卡車的構(gòu)造函數(shù)
function Truck(option) {
    this.wheels = option.wheels || 4;
    this.brand = option.brand || '東風(fēng)';
}
//定義工廠
function Factory() {

}
// 默認(rèn)創(chuàng)建小車
Factory.prototype.type = 'Car';
Factory.prototype.create = function (option) {
    if (option.type === 'Car') {
        this.createBy = Car;
    } else {
        this.createBy = Truck;
    }
    return new this.createBy(option)
};

var factory = new Factory();
var Benz = factory.create({
    type: 'Car',
    doors: 2,
    brand: '奔馳'
});
console.log(Benz);
var Fute = factory.create({
    type: 'Truck',
    wheels: 6,
    brand: '福特'
});
console.log(Fute);

10肺素、混入模式 mixin

沒有直接通過new來繼承,還是通過call來繼承了屬性深浮,再通過Object來繼承了原型

var Man = function (firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.sex = 'man';
};

var SuperMan = function (firstName, lastName, powers) {
    Man.call(this,firstName,lastName);
    this.powers = powers;
};

SuperMan.prototype = Object.create(Man.prototype);
var superMan = new SuperMan('a','b',['c','d']);
console.log(superMan);

11压怠、裝飾者模式 decorator

裝飾者模式和Mixin相類似,Decorator提供了將行為動態(tài)添加至系統(tǒng)的現(xiàn)有類的能力飞苇,裝飾本身對類原有的基本功能來說可能并不是必要的菌瘫,
不然最初的時(shí)候就應(yīng)該合并到父類中。裝飾者主要用于修改現(xiàn)有的系統(tǒng)布卡。希望在系統(tǒng)中為對象添加額外功能雨让,而不需要大量修改使用它們的底層代碼。

// 最初的類
function MacBook() {
    this.cost = function () {
        return 997;
    };
    this.size = function () {
        return 11.6;
    };
}

// 需要添加的插件,人具有改變最初的類的能力忿等,卻無須改動最初的類
function memory(macBook) {
    var cost = macBook.cost();
    mackBook.cost = function () {
        return cost+70;
    }
}

var mackBook = new MacBook();
memory(mackBook);
console.log(mackBook.cost());
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末栖忠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子贸街,更是在濱河造成了極大的恐慌庵寞,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件薛匪,死亡現(xiàn)場離奇詭異捐川,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)逸尖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門古沥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人娇跟,你說我怎么就攤上這事岩齿。” “怎么了苞俘?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵盹沈,是天一觀的道長。 經(jīng)常有香客問我吃谣,道長乞封,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任基协,我火速辦了婚禮歌亲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘澜驮。我一直安慰自己陷揪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布杂穷。 她就那樣靜靜地躺著悍缠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪耐量。 梳的紋絲不亂的頭發(fā)上飞蚓,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音廊蜒,去河邊找鬼趴拧。 笑死溅漾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的著榴。 我是一名探鬼主播添履,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼脑又!你這毒婦竟也來了暮胧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤问麸,失蹤者是張志新(化名)和其女友劉穎往衷,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體严卖,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡席舍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了妄田。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俺亮。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖疟呐,靈堂內(nèi)的尸體忽然破棺而出脚曾,到底是詐尸還是另有隱情,我是刑警寧澤启具,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布本讥,位于F島的核電站,受9級特大地震影響鲁冯,放射性物質(zhì)發(fā)生泄漏拷沸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一薯演、第九天 我趴在偏房一處隱蔽的房頂上張望撞芍。 院中可真熱鬧,春花似錦跨扮、人聲如沸序无。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帝嗡。三九已至,卻和暖如春璃氢,著一層夾襖步出監(jiān)牢的瞬間哟玷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工一也, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留巢寡,地道東北人喉脖。 一個(gè)月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像讼渊,于是被迫代替她去往敵國和親动看。 傳聞我的和親對象是個(gè)殘疾皇子尊剔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容