js常見設(shè)計(jì)模式

// 單例模式
// ES5
function Person()  {
    this.money = 10
    if(Person.instance){
        return Person.instance
    }
    else{
        Person.instance = this
    }
}
// ES6
class Demo{
    constructor(){
        if(Demo.instance){
            return Demo.instance
        }
        else return Demo.instance=this
    }
    hh = 10
}


// 代理模式
// ES5
function girl(name){
    this.name = name 
}

function boy(girl){
    this.boyname = '小華' 
    this.girlname = girl.name
    this.altername = function(name){
        this.boyname = name
    }
    this.send = function(gift){
        console.log(this.boyname+'送了'+this.girlname+gift);
    }
}

function kdy(girl){
    this.skd = function(gift){
        new boy(girl).send(gift)
    }
}
var xz = new kdy(new girl('小芳'))
xz.skd('藍(lán)牙音箱')

// ES6
class es6girl{
    constructor(name){
        this.name = name
    }
}

class es6boy{
    constructor(girl){
        this.girlname = girl.name
    }
    send(gift){
        console.log('您好:'+this.girlname+'您的'+gift)
    }
}

class es6Proxy{
    constructor(girl){
        this.jjr = girl
    }
    ps(girl){
        new boy(this.jjr).send(gift)
    }
}

// 裝飾器模式
// ES5
function decoratorfn(fn,beforfn){
    return function(){
        var ret = beforfn.apply(this,arguments)
        if(ret !== false){
            fn.apply(this,arguments)
        }
    }
}

function skill() {
    console.log('數(shù)學(xué)');
}

function skillMusic() {
    console.log('音樂');
}

function skillRun() {
    console.log('跑步');
}

var skilldecorator = decoratorfn(skill,skillMusic)
skilldecorator();

//適配器模式
// ES6
const API = {
    qq: () => ({
        n: "菊花臺(tái)",
        a: "周杰倫",
        f: 1
    }),
    netease: () => ({
        name: "菊花臺(tái)",
        author: "周杰倫",
        f: false
    })
}

const adapter = (info = {}) => ({
    name: info.name || info.n,
    author: info.author || info.a,
    free: !!info.f
})
console.log(adapter(API.qq()))
console.log(adapter(API.netease()))

//命令模式  業(yè)務(wù)分離,低耦合
// ES5
// 點(diǎn)餐人員 關(guān)注的對象:菜單
// 廚房老大 關(guān)注的對象:分配
// 廚師     關(guān)注的對象:菜單

//廚師
var cook1 = {
    name: '王小二',
    make: function(foodType){
        switch(foodType){
            case 'tudou': 
                console.log(this.name,'做土豆');
                break;
            case 'jidan': 
                console.log(this.name,'做雞蛋');
                break;
            case 'fanqie': 
                console.log(this.name,'做番茄');
                break;
            default: 
                console.log('no cant')
                break;
        }
    }
}

var cook2 = {
    name: '王大二',
    make: function(foodType){
        switch(foodType){
            case 'tudou': 
                console.log(this.name,'做土豆加辣椒');
                break;
            case 'jidan': 
                console.log(this.name,'做雞蛋加白糖');
                break;
            case 'fanqie': 
                console.log(this.name,'做番茄加醬油');
                break;
            default: 
                console.log('no cant')
                break;
        }
    }
}

//服務(wù)員
var foodList = ['tudou','jidan','fanqie'];

//點(diǎn)餐系統(tǒng)/廚師長

function makeFoodCommand(cook,foodType){
    this.cook = cook
    this.foodType = foodType
}
makeFoodCommand.prototype.execute = function(){
    this.cook.make(this.foodType)
}

//做菜命令
var commands = []
for(let i=0; i<foodList.length; i++){
    var command = null
    if(i % 2 === 0){
        command = new makeFoodCommand(cook1,foodList[i])
    }
    else{
        command = new makeFoodCommand(cook2,foodList[i])
    }
    commands.push(command)
}
console.log(commands);
commands.forEach(function(cmd){
    console.log(cmd);
    cmd.execute();
})

//發(fā)布訂閱者模式
// ES5
var lk = {
    userList: {},
    addUser: function(type, target, action){
        if(!this.userList[type]){
            this.userList[type] = []
        }
        var obj = {target: target,action: action}
        this.userList[type].push(obj)
    },
    publishMsg: function(type, content){
        var user = this.userList[type] || []
        for(let i = 0; i< user.length; i++){
            var detailUser = user[i]
            var target = detailUser.target
            var action = detailUser.action
            action.call(target,content)
        }
    }
}
var stu1 = {name: '張三'}
var stu2 = {name: '李四'}

function response(msgcontent){
    console.log(msgcontent+'已經(jīng)推送給'+this.name);
}
lk.addUser('html',stu1,response)
lk.addUser('html',stu2,response)
lk.addUser('css',stu1,response)
lk.addUser('js',stu2,response)
lk.publishMsg('html','html太難了')
lk.publishMsg('css','css為層疊樣式表')
lk.publishMsg('js','js叫JavaScript')


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末殿遂,一起剝皮案震驚了整個(gè)濱河市壹堰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌爬骤,老刑警劉巖充石,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異霞玄,居然都是意外死亡赫冬,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門溃列,熙熙樓的掌柜王于貴愁眉苦臉地迎上來劲厌,“玉大人,你說我怎么就攤上這事听隐〔贡牵” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長风范。 經(jīng)常有香客問我咨跌,道長,這世上最難降的妖魔是什么硼婿? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任锌半,我火速辦了婚禮,結(jié)果婚禮上寇漫,老公的妹妹穿的比我還像新娘刊殉。我一直安慰自己,他們只是感情好州胳,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布记焊。 她就那樣靜靜地躺著,像睡著了一般栓撞。 火紅的嫁衣襯著肌膚如雪遍膜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天瓤湘,我揣著相機(jī)與錄音瓢颅,去河邊找鬼。 笑死弛说,一個(gè)胖子當(dāng)著我的面吹牛惜索,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播剃浇,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼巾兆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了虎囚?” 一聲冷哼從身側(cè)響起角塑,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎淘讥,沒想到半個(gè)月后圃伶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蒲列,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年窒朋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蝗岖。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侥猩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抵赢,到底是詐尸還是另有隱情欺劳,我是刑警寧澤唧取,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站划提,受9級特大地震影響枫弟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鹏往,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一淡诗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧伊履,春花似錦韩容、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奠货。三九已至介褥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間递惋,已是汗流浹背柔滔。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留萍虽,地道東北人睛廊。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像杉编,于是被迫代替她去往敵國和親超全。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

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

  • 1.寫出 構(gòu)造函數(shù)模式邓馒、混合模式嘶朱、模塊模式、工廠模式光酣、單例模式疏遏、發(fā)布訂閱模式的范例。 JS設(shè)計(jì)模式大全 構(gòu)造函數(shù)模...
    饑人谷_Leon閱讀 425評論 0 3
  • 常見的一些設(shè)計(jì)模式 構(gòu)造函數(shù)模式(Constructor) 工廠模式(factory) 工廠模式和構(gòu)造函數(shù)模式每次...
    DeeJay_Y閱讀 364評論 0 0
  • 構(gòu)造函數(shù)模式: 工廠模式: 模塊模式 混合模式 單例模式 發(fā)布訂閱模式
    饑人谷_流水閱讀 206評論 0 0
  • 發(fā)布訂閱模式 在“發(fā)布者-訂閱者”模式中救军,稱為發(fā)布者的消息發(fā)送者不會(huì)將消息編程為直接發(fā)送給稱為訂閱者的特定接受者财异,...
    Mstian閱讀 1,462評論 0 1
  • 以前我和她的距離很遠(yuǎn),但總是要抽出時(shí)間見面唱遭。 現(xiàn)在我離她不過1000迷戳寸,打開窗戶就能看到她的家,但我卻卻不能見她拷泽。
    文西我叫達(dá)文西閱讀 143評論 0 1