// 單例模式
// 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')
js常見設(shè)計(jì)模式
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門溃列,熙熙樓的掌柜王于貴愁眉苦臉地迎上來劲厌,“玉大人,你說我怎么就攤上這事听隐〔贡牵” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長风范。 經(jīng)常有香客問我咨跌,道長,這世上最難降的妖魔是什么硼婿? 我笑而不...
- 正文 為了忘掉前任锌半,我火速辦了婚禮,結(jié)果婚禮上寇漫,老公的妹妹穿的比我還像新娘刊殉。我一直安慰自己,他們只是感情好州胳,可當(dāng)我...
- 文/花漫 我一把揭開白布记焊。 她就那樣靜靜地躺著,像睡著了一般栓撞。 火紅的嫁衣襯著肌膚如雪遍膜。 梳的紋絲不亂的頭發(fā)上,一...
- 文/蒼蘭香墨 我猛地睜開眼巾兆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了虎囚?” 一聲冷哼從身側(cè)響起角塑,我...
- 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎淘讥,沒想到半個(gè)月后圃伶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡蒲列,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年窒朋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蝗岖。...
- 正文 年R本政府宣布,位于F島的核電站划提,受9級特大地震影響枫弟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鹏往,卻給世界環(huán)境...
- 文/蒙蒙 一淡诗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧伊履,春花似錦韩容、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽奠货。三九已至介褥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間递惋,已是汗流浹背柔滔。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長得像杉编,于是被迫代替她去往敵國和親超全。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 1.寫出 構(gòu)造函數(shù)模式邓馒、混合模式嘶朱、模塊模式、工廠模式光酣、單例模式疏遏、發(fā)布訂閱模式的范例。 JS設(shè)計(jì)模式大全 構(gòu)造函數(shù)模...
- 常見的一些設(shè)計(jì)模式 構(gòu)造函數(shù)模式(Constructor) 工廠模式(factory) 工廠模式和構(gòu)造函數(shù)模式每次...
- 發(fā)布訂閱模式 在“發(fā)布者-訂閱者”模式中救军,稱為發(fā)布者的消息發(fā)送者不會(huì)將消息編程為直接發(fā)送給稱為訂閱者的特定接受者财异,...
- 以前我和她的距離很遠(yuǎn),但總是要抽出時(shí)間見面唱遭。 現(xiàn)在我離她不過1000迷戳寸,打開窗戶就能看到她的家,但我卻卻不能見她拷泽。