前端設(shè)計模式

1.寫出 構(gòu)造函數(shù)模式泣洞、混合模式、模塊模式默色、工廠模式球凰、單例模式、發(fā)布訂閱模式的范例腿宰。

構(gòu)造函數(shù)胡模式(constructor)

構(gòu)造函數(shù)用于創(chuàng)建特定類型的對象-不僅聲明了使用的對象呕诉,還可以接收參數(shù)以便第一次創(chuàng)建對象的時候設(shè)置對象的成員值。通過new關(guān)鍵字來調(diào)用自定義的構(gòu)造函數(shù)吃度,在構(gòu)造函數(shù)內(nèi)部甩挫,this關(guān)鍵字引用的是新創(chuàng)建的對象。

function Person(name,age){
    this.name = name
    this.age = age
}
Person.prototype = {
    sayName:function(){
        return this.name
    },
    showAge:function(){
        return this.age
    }
}
var student = new Person('小明',15)
student.sayName()
student.showAge()

工廠模式(factory)

解決多個類似對象聲明的問題;也就是為了解決實列化對象產(chǎn)生重復(fù)的問題椿每。

function createPerson(name){
    var person = {
        name: name,
        sayName:function(){
            console.log(this.name) 
        }
    }
    return person
}
createPerson('小明').sayName()

模塊模式(module)

模塊模式使用了一個返回對象的匿名函數(shù)伊者。在這個匿名函數(shù)內(nèi)部,先定義了私有變量和函數(shù)间护,供內(nèi)部函數(shù)使用亦渗,然后將一個對象字面量作為函數(shù)的值返回,返回的對象字面量中只包含可以公開的屬性和方法汁尺。這樣的話央碟,可以提供外部使用該方法;由于該返回對象中的公有方法是在匿名函數(shù)內(nèi)部定義的均函,因此它可以訪問內(nèi)部的私有變量和函數(shù)亿虽。

var Person = (function(){
    var name = 'xiaoming'
    function sayName(){
        console.log(name)
    }

    return {
        name:name,
        sayName:sayName
    }
})()

混合模式(mixin)

實現(xiàn)原型繼承,通過一個構(gòu)造函數(shù)來定義屬性苞也,把共享的方法定義在原型鏈上洛勉,減少系統(tǒng)中的重復(fù)功能及增加函數(shù)復(fù)用

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.getName = function(){
    console.log(this.name)
};    

function Male(name, sex, age){
   Person.call(this,name, sex);
   this.age = age;
}


var _prototype  = Object.create(Person.prototype);
// _prototype.constructor = Male; 
Male.prototype  = _prototype;

Male.prototype.getAge = function(){
    console.log(this.age)
};

var student = new Male('小明', '男', 15);
student.getName();

單例模式(singleton)

保證一個類只有一個實例,實現(xiàn)的方法一般是先判斷實例存在與否如迟,如果存在則直接返回收毫,如果不存在就創(chuàng)建了再返回,這就確保了一個類只有一個實例對象殷勘。在JavaScript中此再,單例作為一個命名空間提供者,從全局命名空間里提供一個唯一的訪問點來訪問該對象玲销。
js的作用域體現(xiàn)在函數(shù)中输拇,外界不能訪問到函數(shù)內(nèi)部的變量;
函數(shù)能訪問的上下文作用域是它定義的位置所決定贤斜;
閉包:隱藏函數(shù)內(nèi)部的變量策吠,存儲一個變量

var Person =(function(){
    var instance
    function init(name){
        return {
            name:name
        };
    }

    return {
        createPerson: function(name){
            if(!instance){
                instance = init(name)
            }
            return instance
        }
    }
})();

Person.createPerson('student') //{name:student}
Person.createPerson('teacher') //{name:student} 把原來的引用給拿出來

發(fā)布訂閱模式(pubish/subsciibe)

定義對象間的一種一對多的依賴關(guān)系逛裤,當(dāng)一個對象的狀態(tài)發(fā)生改變時,所有依賴于它的對象都將得到通知猴抹。對外導(dǎo)出的Api是on,fire,off

var EventCenter = (function(){
    var  events = {}; //存儲所有數(shù)據(jù)
    function on(evt,handler){
        //一開始events[evt] = []空數(shù)組
        events[evt] = events[evt] || [];
        //把handler添加到數(shù)組带族,handler為函數(shù)
        events[evt].push({
            handler:handler
        });
    }

    function fire(evt,args){
        if(!events[evt]){
            return;
        }

        for(var i=0; i<events[evt].length; i++){
            events[evt][i].handler(args)
        }
    }

    function off(name){
        delete events[name]
    }

    return {
        on:on,
        fire:fire,
        off:off
    }   
})()

2.使用發(fā)布訂閱模式寫一個事件管理器,可以實現(xiàn)如下方式調(diào)用

var Event = (function(){
    var  events = {}; 
    function on(evt,handler){
        events[evt] = events[evt] || [];
        events[evt].push({
            handler:handler
        });
    }

    function fire(evt,args){
        if(!events[evt]){
            return;
        }
        for(var i=0; i<events[evt].length; i++){
            events[evt][i].handler(args)
        }
    }

    function off(evt){
        delete events[evt]
    }

    return {
        on:on,
        fire:fire,
        off:off
    }   
})()
Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饑人谷');
Event.off('change');
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蟀给,一起剝皮案震驚了整個濱河市蝙砌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌跋理,老刑警劉巖择克,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異薪介,居然都是意外死亡祠饺,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進(jìn)店門汁政,熙熙樓的掌柜王于貴愁眉苦臉地迎上來道偷,“玉大人,你說我怎么就攤上這事记劈∩籽唬” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵目木,是天一觀的道長换途。 經(jīng)常有香客問我,道長刽射,這世上最難降的妖魔是什么军拟? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮誓禁,結(jié)果婚禮上懈息,老公的妹妹穿的比我還像新娘。我一直安慰自己摹恰,他們只是感情好辫继,可當(dāng)我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著俗慈,像睡著了一般姑宽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闺阱,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天炮车,我揣著相機(jī)與錄音,去河邊找鬼。 笑死示血,一個胖子當(dāng)著我的面吹牛棋傍,可吹牛的內(nèi)容都是我干的救拉。 我是一名探鬼主播难审,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼亿絮!你這毒婦竟也來了告喊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤派昧,失蹤者是張志新(化名)和其女友劉穎黔姜,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蒂萎,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡秆吵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了五慈。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纳寂。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖泻拦,靈堂內(nèi)的尸體忽然破棺而出毙芜,到底是詐尸還是另有隱情,我是刑警寧澤争拐,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布腋粥,位于F島的核電站,受9級特大地震影響架曹,放射性物質(zhì)發(fā)生泄漏隘冲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一绑雄、第九天 我趴在偏房一處隱蔽的房頂上張望展辞。 院中可真熱鬧,春花似錦绳慎、人聲如沸纵竖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽靡砌。三九已至,卻和暖如春珊楼,著一層夾襖步出監(jiān)牢的瞬間通殃,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留画舌,地道東北人堕担。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像曲聂,于是被迫代替她去往敵國和親霹购。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,654評論 2 354

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

  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法朋腋,類相關(guān)的語法齐疙,內(nèi)部類的語法,繼承相關(guān)的語法旭咽,異常的語法贞奋,線程的語...
    子非魚_t_閱讀 31,625評論 18 399
  • 前言 人生苦多,快來 Kotlin 穷绵,快速學(xué)習(xí)Kotlin轿塔! 什么是Kotlin? Kotlin 是種靜態(tài)類型編程...
    任半生囂狂閱讀 26,201評論 9 118
  • 寫給未來的自己:未來你只要超過一個人就可以仲墨,那個人就是現(xiàn)在的你自己勾缭。寫給正在拼搏的自己:只要在路上,就沒有到...
    行者L閱讀 728評論 2 1
  • 在獨斷專行的教育下宗收,往往把別人的話當(dāng)成自己的要求漫拭,別人的期待比自己重要,容易擔(dān)心自己是不是達(dá)不成別人的期待混稽,很容易...
    和自己較個勁閱讀 146評論 0 0
  • 老公是個攝影記者采驻,但我不怎么喜歡他的工作,不是因為攝影本身匈勋,而是因為他的任務(wù)礼旅,幾乎就是追拍明星。他拍攝的照片洽洁,我?guī)?..
    不加方糖的咖啡閱讀 377評論 0 0