faceplus's home

小伙子


  • 首页

  • 分类

  • 归档

  • 标签

  • 搜索

js设计模式笔记-桥接模式

发表于 2017-08-21

桥接模式

  1. 某些类型由于自身的逻辑,会向多个维度变化,使其不增加复杂度并达到解耦的目的
    • 将一个函数或者类当做一个桥梁,提取公共部分,将实现和抽象通过桥接的方法链接在一起
    • 针对多维度变化,可以创建许多个桥梁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
'use strict'
let log = console.log.bind(console)
function Speed (x, y) {
this.x = x
this.y = y
}

Speed.prototype.run = function () {
log('run')
}

function Color (cl) {
this.cl = cl
}

Color.prototype.draw = function () {
log('draw')
}

function Shape (sp) {
this.shape = sp
}

Shape.prototype.change = function () {
log('改变形状')
}

function Speek (word) {
this.word = word
}

Speek.prototype.say = function () {
log('fuck')
}

// 创建一座桥梁,在生成 Ball的时候直接 new Ball
function Ball (x, y, c) {
this.speed = new Speed(x, y)
this.color = new Color(c)
}

Ball.prototype.init = function () {
this.speed.run()
this.color.draw()
}

function People (x, y, f) {
this.speed = new Speed(x, y)
this.speek = new Speek(f)
}
People.prototype.init = function () {
this.speed.run()
this.speek.say()
}

// 通过桥梁生成实体
var ball = new Ball(1, 2, '#ccc')
ball.init()

js设计模式笔记--装饰者模式

发表于 2017-08-18

##装饰者模式

  • 不改变原对象的基础上,通过添加属性或方法使原对象满足要求
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    'use strict'
    // 装饰者
    var decorator = (function () {
    return function (input, fn) {
    // 获取事件源
    var input = document.getElementById(input)
    if (typeof input.onclick === 'function') {
    // 将之前的存起来,那之前有很多怎么办
    var old = input.onclick
    input.onclick = function () {
    old()
    // 看见吗就是执行了之前的函数,顺便加了个回调
    fn()
    }
    } else {
    input.onclick = fn
    }
    // do something

    }
    }())

    document.getElementById('btn').onclick = function() {
    console.log('fuck')
    }

    decorator('btn', function() {
    console.log('just go on')
    })

js设计模式笔记--代理模式

发表于 2017-08-18

代理模式

  1. 对于一个对象不能直接引用另一个对象,所以通过代理起个中介作用
  2. 没想到这一章讲的是跨域,我的妈呀,这怎么成了设计模式了
  3. 跨域解决方案:
    • jsonp 创建script标签获取数据,不能post
    • iframe 通过iframe拿数据,写起来麻烦,还很弱
    • nginx或者其他服务器进行跨域,或者设置http cors
    • … 其他

js设计模式笔记--适配器模式

发表于 2017-08-18

适配器模式

  • 什么是适配器,就是将数据转化了一下,防止出错或者数据改变
  1. 假设引入了JQ,而JQ和自己的代码库重叠了,怎么办?
    • window.my$ = jQuery 就是这么粗暴
  2. 比如你要的数据是[{},{}]这样的,后台给了你{},你怎么办
    • 写个适配器,转化一下。 噗!吐血

js设计模式笔记--外观模式

发表于 2017-08-18

外观模式

  • 这章坑爹,就是说了下兼容性的封装,在写个小小型代码库
1
2
3
4
5
6
7
8
9
10
'use strict'
var A = (function () {
var o = {
g: function (id) {
return document.getElementById(id)
}
}
// todo: 其余不想写了,就是获取元素,添加事件的封装
return o
}())

js设计模式笔记--单例模式

发表于 2017-08-18

单例模式

  • 只能实例化一次,第二次实例化将之前实例化好的对象返回,就可以共享实例的内存,可用于modal弹框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict'
var single = (function () {
var instance = null

function Fuck (bitch) {
this.bitch = bitch
}

Fuck.prototype.start = function () {
return this.bitch
}

return {
getInstance: function (bitch) {
if (!instance) {
instance = new Fuck(bitch)
}
return instance
}
}
})()

// 共享一个实例
var s = single.getInstance('fucker')
console.log(s)
var y = single.getInstance('dsfsd')
console.log(y)
console.log(y.start())

js设计模式笔记--原型模式

发表于 2017-08-18
  • 受不了了,什么都是设计模式,一个JS的原型链继承都能当做设计模式,也是醉了
  • 整篇我看最有用的就是那个继承函数
  • 说白了这个模式就像将原型的属性和方法进行共享

js设计模式笔记--建造者模式

发表于 2017-08-18

建造者模式

  • 创建出来的对象直接具有已实现的某些属性方法
  • 此模式参与对象的创建过程,干涉了对象的创建细节
  • 场景:已有内部给定的方法和属性,只需要选择需要的属性,就可以产生一个完整的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
~function () {
'use strict'

var Human = function (param) {
this.skill = param && param.skill || '保密'
this.hobby = param && param.hobby || '保密'
}

Human.prototype = {
getSkill: function () {
return this.skill
},
getHobby: function () {
return this.hobby
}
}

var Named = function (name) {
var _this = this
// 构造
~function (name, _this) {
_this.wholeName = name
if (name.indexOf(' ') > -1) {
_this.firstName = name.slice(0, name.indexOf(' '))
_this.secondName = name.slice(name.indexOf(' '))
}
}(name, _this)

}

var Work = function (work) {
var _this = this
~function (work, _this) {
switch (work) {
case 'code':
_this.work = '工程师'
_this.workDescript = '每天沉醉于编程'
break
case 'UI':
case 'UE':
_this.work = '设计师'
_this.workDescript = '设计更似一种艺术'
break
case 'teach':
_this.work = '教师'
_this.workDescript = '分享也是一种快乐'
break
default:
_this.work = work
_this.workDescript = '不清楚你的职业'
}
}(work, _this)
}

Work.prototype.changeWork = function (work) {
this.work = work
}

Work.prototype.changeDescript = function (descript) {
this.workDescript = descript
}

var Person = function (name, work) {
var _person = new Human()
_person.name = new Named(name)
_person.work = new Work(work)

return _person
}

var person = new Person('s b', 'UI')

console.log(person.skill)
console.log(person.name.firstName)

}()

js设计模式笔记--抽象工厂模式

发表于 2017-08-18

抽象工厂模式

  1. 抽象类:声明但是不能使用的类
  2. 创造一个通用的大类,通过这个类去创建一系列抽象类,让子类去继承父类定义的但不能使用的方法,子类然后去实现这个抽象的方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    ~function (global) {
    'use strict'
    var Car = function () {
    }
    Car.prototype = {
    getPrice: function () {
    return new Error('抽象方法不能调用')
    },
    getSpeed: function () {
    return new Error('抽象方法不能调用')
    }
    }

    // 抽象工厂方法
    var VehicleFactory = function (subType, superType) {
    if (typeof VehicleFactory[superType] === 'function') {
    // noinspection JSAnnotator
    function F () {
    }

    F.prototype = new VehicleFactory[superType]()
    subType.constructor = subType
    // 子类原型继承父类
    subType.prototype = new F()
    } else {
    throw new Error('未创建该抽象对象')
    }
    }

    VehicleFactory.Car = function () {
    this.type = 'car'
    }

    VehicleFactory.Car.prototype = {
    getPrice: function () {
    return new Error('抽象方法不能调用')
    },
    getSpeed: function () {
    return new Error('抽象方法不能调用')
    }
    }

    VehicleFactory.Bus = function () {
    this.type = 'bus'
    }

    VehicleFactory.Bus.prototype = {
    getPrice: function () {
    return new Error('抽象方法不能调用')
    },
    getSpeed: function () {
    return new Error('抽象方法不能调用')
    }
    }

    VehicleFactory.Truck = function () {
    this.type = 'truck'
    }

    VehicleFactory.Truck.prototype = {
    getPrice: function () {
    return new Error('抽象方法不能调用')
    },
    getSpeed: function () {
    return new Error('抽象方法不能调用')
    }
    }

    var BMW = function (price, speed) {
    this.price = price
    this.speed = speed
    }

    VehicleFactory(BMW, 'car')

    BMW.prototype.getPrice = function () {
    return this.price
    }

    BMW.prototype.getSpeed = function () {
    return this.speed
    }

    }(this)

js设计模式笔记--工厂模式

发表于 2017-08-18

工厂模式

  1. 工厂模式顾名思义就是一个工厂,里面可以创建各种类型的产品
  2. 工厂模式和类

    • 工厂模式可以根据所需产生不同的类
    • 类是一个厂内一个小型的团体
  3. 抽象工程模式

    • 父类不提供实体方法,只提供接口,通过子类去实现覆盖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
'use strict'
const log = console.log.bind(console)

log('--------简单工厂,就是一个简单的封装--------')

~function () {
function Button (type, placeholder) {
let o = Object.create(null)
o.content = placeholder
o.click = function () {
log(placeholder)
}

if (type === 'error') {
o.color = 'red'
} else {
o.color = 'blue'
}

return o
}

var errorBtn = Button('error', 'heheheheh')
var primaryBtn = Button('df', 'dfsdfsdfsdfd')
log(errorBtn.content)
log(primaryBtn.content)
}()

log('-------工厂方法模式---------')

~function () {
function Button (type, content) {
if (this instanceof Button) {
var o = new this[type](content)
return o
} else {
return new Button(type, content)
}
}

Button.click = function (content) {
log(content)
}

Button.prototype = {
constructor: 'Button',
error: function (content) {
this.color = 'red'
Button.click(content)
},
primary: function (content) {
this.color = 'blue'
Button.click(content)
}
}

var a = Button('error', 'content')
log(a.color)

}()
1234
slipkinem

slipkinem

37 日志
5 分类
23 标签
知乎 GitHub Email
© 2018 slipkinem
由 Hexo 强力驱动
主题 - NexT.Gemini