策略模式
- 允许封装用于特定任务的备选算法的设计模式。它可以定义一系列算法，并以这样一种方式封装它们。它们在运行时可以互换调用顺序，而不需要编写额外的代码
1//策略列表
2const jobList = ['FE', 'BE'];
3var strategies = {
4 checkRole: function(value) {
5 if (value === 'registered') {
6 return true;
7 }
8 return false;
9 },
10 checkGrade: function(value) {
11 if (value >= 1) {
12 return true;
13 }
14 return false;
15 },
16 checkJob: function(value) {
17 if (jobList.indexOf(value) > 1) {
18 return true;
19 }
20 return false;
21 },
22 checkType: function(value) {
23 if (value === 'active user') {
24 return true;
25 }
26 return false;
27 }
28};
29//验证逻辑
30var Validator = function() {
31 // Store strategies
32 this.cache = [];
33 // add strategy to cache
34 this.add = function(value, method) {
35 this.cache.push(function() {
36 return strategies[method](value);
37 });
38 };
39 // check all strategies
40 this.check = function() {
41 for (let i = 0; i < this.cache.length; i++) {
42 let valiFn = this.cache[i];
43 var data = valiFn();
44 if (!data) {
45 return false;
46 }
47 }
48 return true;
49 };
50};
51//调用
52var compose1 = function() {
53 var validator = new Validator();
54 const data1 = {
55 role: 'register',
56 grade: 3,
57 job: 'FE',
58 type: 'active user'
59 };
60 validator.add(data1.role, 'checkRole');
61 validator.add(data1.grade, 'checkGrade');
62 validator.add(data1.type, 'checkType');
63 validator.add(data1.job, 'checkJob');
64 const result = validator.check();
65 return result;
66};
发布-订阅模式
- 一种消息传递范例，消息的发布者不直接将消息发送给特定的订阅者，而是通过消息通道广播消息，订阅者通过订阅获得他们想要的消息。
1const EventEmit = function() {
2 this.events = {};
3 this.on = function(name, cb) {
4 if (this.events[name]) {
5 this.events[name].push(cb);
6 } else {
7 this.events[name] = [cb];
8 }
9 };
10 this.trigger = function(name, ...arg) {
11 if (this.events[name]) {
12 this.events[name].forEach(eventListener => {
13 eventListener(...arg);
14 });
15 }
16 };
17};
18
19let event = new EventEmit();
20MessageCenter.fetch() {
21 event.on('success', () => {
22 console.log('update MessageCenter');
23 });
24}
25Order.update() {
26 event.on('success', () => {
27 console.log('update Order');
28 });
29}
30Checker.alert() {
31 event.on('success', () => {
32 console.log('Notify Checker');
33 });
34}
35event.trigger('success');
1//类似事件触发
2window.addEventListener('event_name', function(event){
3 console.log('得到标题为：', event.detail.title);
4});
5var myEvent = new CustomEvent('event_name', {
6 detail: { title: 'This is title!'},
7});
8// 随后在对应的元素上触发该事件
9if(window.dispatchEvent) {
10 window.dispatchEvent(myEvent);
11} else {
12 window.fireEvent(myEvent);
13}
装饰者模式
- 种给对象动态地增加职责的方式称为装饰者（decorator）模式。装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。跟继承相比，装饰者是一种更轻便灵活的做法，这是一种“即用即付”的方式
1//原始对象
2// 建立一架飞机
3var Plane = function(){}
4// 飞机有发射普通子弹的方法
5Plane.prototype.fire = function(){
6 console.log( '发射普通子弹' );
7}
8
9
10//接下来增加两个装饰类，分别是导弹和原子弹：
11var MissileDecorator = function( plane ){
12 this.plane = plane;
13}
14MissileDecorator.prototype.fire = function(){
15 this.plane.fire();
16 console.log( '发射导弹' );
17}
18var AtomDecorator = function( plane ){
19 this.plane = plane;
20}
21AtomDecorator.prototype.fire = function(){
22 this.plane.fire();
23 console.log( '发射原子弹' );
24}
25
26//调用
27var plane = new Plane();
28plane = new MissileDecorator( plane );
29plane = new AtomDecorator( plane );
30plane.fire();
31// 分别输出： 发射普通子弹、发射导弹、发射原子弹
责任链模式
- 为请求创建了一个接收者对象的链。多个对象均有机会处理请求，从而解除发送者和接受者之间的耦合关系。这些对象连接成为“链式结构”，每个节点转发请求，直到有对象处理请求为止
1 class Handler {
2 constructor() {
3 this.handler = null;
4 }
5 // 将下一个需要处理的操作缓存起来
6 setNextHandler(handler) {
7 this.next = handler;
8 }
9 }
10
11 class LogHandler extends Handler {
12 constructor() {
13 super();
14 this.name = 'log';
15 }
16
17 handle(type, msg) {
18 if (type == this.name) {
19 console.log(`${type} ---------- ${msg}`);
20 return;
21 }
22 // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
23 this.next && this.next.handle(...arguments);
24 }
25 }
26
27 class WarnHandler extends Handler {
28 constructor() {
29 super();
30 this.name = 'warn';
31 }
32
33 handle(type, msg) {
34 if (type == this.name) {
35 //假如传过来的类型与名字相同， 说明是当前操作处理
36 console.log(`${type} ---------- ${msg}`);
37 return;
38 }
39 // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
40 this.next && this.next.handle(...arguments);
41 }
42 }
43
44 class ErrorHandler extends Handler {
45 constructor() {
46 super();
47 this.name = 'error';
48 }
49
50 handle(type, msg) {
51 if (type == this.name) {
52 console.log(`${type} ---------- ${msg}`);
53 return;
54 }
55 // 假如下一个处理操作存在就继续往下处理，走到这里表示当前并非终点
56 this.next && this.next.handle(...arguments);
57 }
58 }
59
60 const logHandler = new LogHandler();
61 const warnHandler = new WarnHandler();
62 const errorHandler = new ErrorHandler();
63
64 //设置下一个处理的节点
65 logHandler.setNextHandler(warnHandler);
66 warnHandler.setNextHandler(errorHandler);
67
68 // 开始依次处理满足条件的日志
69 logHandler.handle('log', 'this is some logs!'); // log ---------- this is some logs!
70 logHandler.handle('warn', 'this is some warnings!'); // warn ---------- this is some warnings!
71 logHandler.handle('error', 'this is some errors!'); // error ---------- this is some errors!
评论