// 单例模式
// 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('蓝牙音箱')
// 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('数学');
}
function skillMusic() {
console.log('音乐');
}
function skillRun() {
console.log('跑步');
}
var skilldecorator = decoratorfn(skill,skillMusic)
skilldecorator();
//适配器模式
// ES6
const API = {
qq: () => ({
n: "菊花台",
a: "周杰伦",
f: 1
}),
netease: () => ({
name: "菊花台",
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()))
//命令模式 业务分离,低耦合
// ES5
// 点餐人员 关注的对象:菜单
// 厨房老大 关注的对象:分配
// 厨师 关注的对象:菜单
//厨师
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;
}
}
}
//服务员
var foodList = ['tudou','jidan','fanqie'];
//点餐系统/厨师长
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();
})
//发布订阅者模式
// 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+'已经推送给'+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常见设计模式
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 发布订阅模式 在“发布者-订阅者”模式中,称为发布者的消息发送者不会将消息编程为直接发送给称为订阅者的特定接受者,...