设计模式

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
// 缺点：如果产品的种类非常多`switch case`的判断会变得非常多。不符合开放—封闭原则,如果要增加或删除一个产品种类，就要修改`switch case`的判断代码。
abstract class Coffee {
  constructor(public name: string) {

  }
}
class AmericanoCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}
class LatteCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}
class CappuccinoCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}

class Café {
  static order(name: string) {
    switch (name) {
      case 'Americano':
        return new AmericanoCoffee('美式咖啡');
      case 'Latte':
        return new LatteCoffee('拿铁咖啡');
      case 'Cappuccino':
        return new LatteCoffee('卡布奇诺');
      default:
        return null;
    }
  }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

// 应用场景 jQuery
class jQuery{
  constructor(selector){
    let elements = Array.from(document.querySelectorAll(selector));
    let length = elements?elements.length:0;
    for(let i=0;i<length;i++){
      this[i]=elements[i];
    }
    this.length = length;
  }
  html(html){
    if(html){
      this[0].innerHTML=html;
    }else{
      return this[0].innerHTML;
    }
  }
}
window.$ = function(selector){
  return new jQuery(selector);
}

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
export { }
abstract class Coffee {
  constructor(public name: string) {

  }
}
abstract class Factory {
  abstract createCoffee(): Coffee;
}
class AmericanoCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}

class AmericanoCoffeeFactory extends Factory {
  createCoffee() {
    return new AmericanoCoffee('美式咖啡')
  }
}

class LatteCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}
class LatteCoffeeFactory extends Factory {
  createCoffee() {
    return new LatteCoffee('拿铁咖啡')
  }
}
class CappuccinoCoffee extends Coffee {
  constructor(public name: string) {
    super(name);
  }
}
class CappuccinoFactory extends Factory {
  createCoffee() {
    return new CappuccinoCoffee('卡布奇诺')
  }
}
class Café {
  static order(name: string) {
    switch (name) {
      case 'Americano':
        return new AmericanoCoffeeFactory().createCoffee();
      case 'Latte':
        return new LatteCoffeeFactory().createCoffee();
      case 'Cappuccino':
        return new CappuccinoFactory().createCoffee();
      default:
        return null;
    }
  }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

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
export { };
abstract class AmericanoCoffee { }
abstract class LatteCoffee { }
abstract class CappuccinoCoffee { }

class StarbucksAmericanoCoffee extends AmericanoCoffee { }
class StarbucksLatteCoffee extends LatteCoffee { }
class StarbucksCappuccinoCoffee extends CappuccinoCoffee { }

class LuckinAmericanoCoffee extends AmericanoCoffee { }
class LuckinLatteCoffee extends LatteCoffee { }
class LuckinCappuccinoCoffee extends CappuccinoCoffee { }

abstract class CafeFactory {
  abstract createAmericanoCoffee(): AmericanoCoffee;
  abstract createLatteCoffee(): LatteCoffee;
  abstract createCappuccinoCoffee(): CappuccinoCoffee;
}
class StarbucksCafeFactory extends CafeFactory {
  createAmericanoCoffee() {
    return new StarbucksAmericanoCoffee();
  }
  createLatteCoffee() {
    return new StarbucksLatteCoffee();
  }
  createCappuccinoCoffee() {
    return new StarbucksCappuccinoCoffee();
  }
}
class LuckinCafeFactory extends CafeFactory {
  createAmericanoCoffee() {
    return new LuckinAmericanoCoffee();
  }
  createLatteCoffee() {
    return new LuckinLatteCoffee();
  }
  createCappuccinoCoffee() {
    return new LuckinCappuccinoCoffee();
  }
}

let starbucksCafeFactory = new StarbucksCafeFactory();
console.log(starbucksCafeFactory.createAmericanoCoffee());
console.log(starbucksCafeFactory.createCappuccinoCoffee());
console.log(starbucksCafeFactory.createLatteCoffee());

let luckinCafeFactory = new LuckinCafeFactory();
console.log(luckinCafeFactory.createAmericanoCoffee());
console.log(luckinCafeFactory.createCappuccinoCoffee());
console.log(luckinCafeFactory.createLatteCoffee());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 单例模式
export { };
class Window {
  private static instance: Window;
  private constructor() { }
  static getInstance() {
    if (!Window.instance) {
      Window.instance = new Window();
    }
    return Window.instance;
  }
}
//new Window();
var w1 = Window.getInstance();
var w2 = Window.getInstance();
console.log(w1 === w2);

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
// 单例与构建分离
export { }
interface Window {
  hello: any
}
function Window() {
}
Window.prototype.hello = function () {
  console.log('hello');
}

let createInstance = (function () {
  let instance: Window;
  return function () {
    if (!instance) {
      instance = new (Window as any)();
    }
    return instance;
  }
})();

let window1 = createInstance();
let window2 = createInstance();
window1.hello();
console.log(window1 === window2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 封装变化
export {};
function Window() {}
Window.prototype.hello = function () {
  console.log('hello');
};

let createInstance = function (Constructor: any) {
  let instance: any;
  return function (this: any) {
    if (!instance) {
      Constructor.apply(this, arguments);
      Object.setPrototypeOf(this, Constructor.prototype);
      instance = this;
    }
    return instance;
  };
};
let CreateWindow: any = createInstance(Window);
let window1 = new CreateWindow();
let window2 = new CreateWindow();
window1.hello();
console.log(window1 === window2);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Socket {
  output() {
    return '输出220V';
  }
}

abstract class Power {
  abstract charge(): string;
}
class PowerAdapter extends Power {
  constructor(public socket: Socket) {
    super();
  }
  //转换后的接口和转换前不一样
  charge() {
    return this.socket.output() + ' 经过转换 输出24V';
  }
}
let powerAdapter = new PowerAdapter(new Socket());
console.log(powerAdapter.charge());

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
// toAxiosAdapter
function toAxiosAdapter(options: any) {
  return axios({
    url: options.url,
    method: options.type
  }).then(options.success)
    .catch(options.error)
}


$.ajax = function (options: any) {
  return toAxiosAdapter(options)
}

$.ajax({
  url: '/api/user',
  type: 'GET',
  success: function (data: any) {
    console.log(data)
  },
  error: function (err: any) {
    console.error(err);
  }
})

// promisify
let fs = require('fs');
var Bluebird = require("bluebird");
let readFile = Bluebird.promisify(fs.readFile);

(async function () {
  let content = await readFile('./1.txt', 'utf8');
  console.log(content);
})()
function promisify(readFile: any) {
  return function (filename: any, encoding: any) {
    return new Promise(function (resolve, reject) {
      readFile(filename, encoding, function (err: any, data: any) {
        if (err)
          reject(err);
        else
          resolve(data);
      })
    });
  }
}

// computed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
    <title>vue</title>
</head>
<body>
<div id="root">
<p></p>
<p></p>
</div>
<script>
let vm=new Vue({
    el: '#root',
    data: {
        name:'pf'
    },
    computed: {
        upperName() {
            return this.name.toUpperCase();
        }
    }
});
</script>
</body>
</html>

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
abstract class Shape {
  abstract draw(): void;
}
class Circle extends Shape {
  draw() {
    console.log('绘制圆形');
  }
}
class Rectangle extends Shape {
  draw() {
    console.log('绘制矩形');
  }
}

abstract class ColorfulShape extends Shape {
  public constructor(public shape: Shape) {
    super();
  }
  abstract draw(): void;
}

class RedColorfulShape extends ColorfulShape {
  draw() {
    this.shape.draw();
    console.log('把边框涂成红色');
  }
}
class GreenColorfulShape extends ColorfulShape {
  draw() {
    this.shape.draw();
    console.log('把边框涂成绿色');
  }
}

let circle = new Circle();
let redColorfulShape = new RedColorfulShape(circle);
redColorfulShape.draw();

let rectangle = new Rectangle();
let greenColorfulShape = new GreenColorfulShape(rectangle);
greenColorfulShape.draw();

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
// 类装饰器：在类声明之前声明，用来监控、修改或替换类定义
namespace decorator_factory {
  interface Animal {
    swings: string;
    fly: any
  }
  function flyable(swings: number) {
    return function flyable(target: any) {
      console.log(target);

      target.prototype.swings = swings;
      target.prototype.fly = function () {
        console.log('I can fly');
      }
    }
  }

  @flyable(2)
  class Animal {
    constructor() { }
  }
  let animal: Animal = new Animal();
  console.log(animal.swings);
  animal.fly();
}

// 属性装饰器：表达式会在运行时当作函数被调用
namespace property_namespace {
    //实例属性target是类的原型对象,key是属性名称
    function instancePropertyDecorator(target: any, key: string) {
    }
    //类属性target是的构造函数
    function classPropertyDecorator(target: any, key: string) {
    }
    //实例方法装饰器target是原型对象,key方法名,descriptor是方法描述符
    function instanceMethodDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    }
    //类方法装饰器target是类的构造函数
    function classMethodDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    }
    class Person {
        @instancePropertyDecorator
        instanceProperty: string;
        @classPropertyDecorator
        public static classProperty: string;
        @instanceMethodDecorator
        instanceMethod() {
            console.log('instanceMethod');
        }
        @classMethodDecorator
        classMethod() {
            console.log('classMethod');
        }
    }
}

//core-decorator
let { readonly } = require('core-decorators');
function deprecate(msg: string, options: any) {
  return function (target: any, attr: any, descriptor: any) {
    //DEPRECATION Calculator#add: This function will be removed in future versions.
    let oldVal = descriptor.value;
    descriptor.value = function (...args: any[]) {
      let message = msg ? msg : `DEPRECATION ${target.constructor.name}#${attr}: This function will be removed in future versions.`;
      let see = options && options.url ? `see ${options.url}` : ``;
      console.warn(message + '\r\n' + see);
      return oldVal(...args);
    }
  }
}
class Calculator {
  @deprecate('stop using this', { url: 'http://www.baidu.com' })
  add(a: number, b: number) {
    return a + b;
  }
}
let calculator = new Calculator();
calculator.add(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
abstract class Star {
  abstract answerPhone(): void;
}

class Angelababy extends Star {
  public available: boolean = true;
answerPhone(): void {
  console.log('你好,我是Angelababy.');
}
}
class AngelababyAgent extends Star {
  constructor(private angelababy: Angelababy) {
    super();
  }
  answerPhone(): void {
    console.log('你好,我是Angelababy的经纪人.');
    if (this.angelababy.available) {
      this.angelababy.answerPhone();
    }
  }
}
let angelababyAgent = new AngelababyAgent(new Angelababy());
angelababyAgent.answerPhone();

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
abstract class Student {
    constructor(public teacher: Teacher) { }
    public abstract update();
}
class Xueba extends Student {
    public update() {
        console.log(this.teacher.getState() + ',学霸抬头举手');
    }
}
class Xuezha extends Student {
    public update() {
        console.log(this.teacher.getState() + ',学渣低头祈祷');
    }
}

class Teacher {
    private students: Student[] = new Array<Student>();
    public state: string = '老师讲课'
    getState() {
        return this.state;
    }
    public askQuestion() {
        this.state = '老师提问';
        this.notifyAllStudents();
    }
    attach(student: Student) {
        this.students.push(student);
    }
    notifyAllStudents() {
        this.students.forEach(student => student.update());
    }
}
let teacher = new Teacher();
teacher.attach(new Xueba(teacher));
teacher.attach(new Xueza(teacher));
teacher.askQuestion();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Promise
class Promise {
    private callbacks: Array<Function> = []
    constructor(fn) {
        let resolve = () => {
            this.callbacks.forEach(callback => callback())
        };
        fn(resolve);
    }
    then(callback) {
        this.callbacks.push(callback);
    }
}
let promise = new Promise(function (resolve) {
    setTimeout(function () {
        resolve(100);
    }, 1000);
});
promise.then(() => console.log(1));
promise.then(() => console.log(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
// EventEmitter
const EventEmitter = require('events');
let subject = new EventEmitter();
subject.on('click', function (name) {
  console.log(1, name);
});
subject.on('click', function (name) {
  console.log(2, name);
});
subject.emit('click', 'pf');

// events.js
class EventEmitter {
  constructor() {
    this._events = {};
  }
  on(type, listener) {
    let listeners = this._events[type];
    if (listeners) {
      listeners.push(listener);
    } else {
      this._events[type] = [listener];
    }
  }
  emit(type) {
    let listeners = this._events[type];
    let args = Array.from(arguments).slice(1);
    listeners.forEach((listener) => listener(...args));
  }
}
module.exports = EventEmitter;

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
// EventBus

// EventBus.js
import Vue from 'vue';
export default new Vue();

// 组件A
import EventBus from './EventBus';
EventBus.$on("customEvent", name => {
    console.log(name);
})

// 组件B
import EventBus from './EventBus';
EventBus.$emit("customEvent", 'pf')
<body>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
    <script>
        let EventBus = new Vue();
        EventBus.$on("customEvent", name => {
            console.log(name);
        })
        EventBus.$emit("customEvent", 'pf')
    </script>
</body>

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
class Agency {
  _topics = {}
  subscribe(topic, listener) {
    let listeners = this._topics[topic];
    if (listeners) {
      listeners.push(listener);
    } else {
      this._topics[topic] = [listener];
    }
  }
  publish(topic, ...args) {
    let listeners = this._topics[topic] || [];
    listeners.forEach(listener => listener(...args));
  }
}
class Landlord {
  constructor(public agent: Agency) { }
  lend(topic, area, money) {
    this.agent.publish(topic, area, money);
  }
}

class Tenant {
  constructor(public agent: Agency, public name: string) { }
  order(topic) {
    this.agent.subscribe(topic, (area, money) => {
      console.log(this.name, `${area}平米, ${money}元`);
    });
  }
}
let agent = new Agency();
let rich = new Tenant(agent, '大款');
let poor = new Tenant(agent, '北漂');
let landlord = new Landlord(agent);
rich.order('豪宅');
poor.order('单间');
landlord.lend('豪宅', 10000, 1000000);
landlord.lend('单间', 10, 1000);

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
class Sum {
  sum(a, b) {
    return a + b;
  }
}
class Minus {
  minus(a, b) {
    return a - b;
  }
}
class Multiply {
  multiply(a, b) {
    return a * b;
  }
}
class Calculator {
  sumObj;
  minusObj;
  multiplyObj;
  constructor() {
    this.sumObj = new Sum();
    this.minusObj = new Minus();
    this.multiplyObj = new Multiply();
  }
  sum(...args) {
    return this.sumObj.sum(...args);
  }
  minus(...args) {
    return this.minusObj.minus(...args);
  }
  multiply(...args) {
    return this.multiplyObj.multiply(...args);
  }
}
let calculator = new Calculator();
console.log(calculator.sum(1, 2));
console.log(calculator.minus(1, 2));
console.log(calculator.multiply(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
// 压缩
export {};
var zlib = require('zlib');
var fs = require('fs');
let path = require('path');
function open(input) {
  let ext = path.extname(input);
  switch (ext) {
    case '.gz':
      return unZip(input);
    case '.rar':
      return unRar(input);
    case '.7z':
      return un7z(input);
    default:
      break;
  }
}
function unZip(src) {
  var gunzip = zlib.createGunzip();
  var inputStream = fs.createReadStream(src);
  var outputStream = fs.createWriteStream(src.slice(0, -3));
  console.log('outputStream');

  inputStream.pipe(gunzip).pipe(outputStream);
}
function unRar(src) {
  console.log('Rar解压后的', src);
}
function un7z(src) {
  console.log('7z解压后的', src);
}
open('./source.txt.gz');

function zip(src) {
  var gzip = zlib.createGzip(); //创建压缩流
  var inputStream = fs.createReadStream(src);
  var outputStream = fs.createWriteStream(src + '.gz');
  inputStream.pipe(gzip).pipe(outputStream);
}
zip('source.txt');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vue createElement
const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
  props.children = children;
} else if (childrenLength > 1) {
  const childArray = Array(childrenLength);
  for (let i = 0; i < childrenLength; i++) {
    childArray[i] = arguments[i + 2];
  }
  if (__DEV__) {
    if (Object.freeze) {
      Object.freeze(childArray);
    }
  }
  props.children = childArray;
}

1
2
3
4
5
6
7
// createStore
export default function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState;
    preloadedState = undefined;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// axios
function getDefaultAdapter() {
  var adapter;
  if (
    typeof process !== 'undefined' &&
    Object.prototype.toString.call(process) === '[object process]'
  ) {
    adapter = require('./adapters/http');
  } else if (typeof XMLHttpRequest !== 'undefined') {
    adapter = require('./adapters/xhr');
  }
  return adapter;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createIterator(arr) {
  let index = 0;
  return {
    next() {
      return index < arr.length
        ? { value: arr[index++], done: false }
        : { done: true };
    },
  };
}
let it = createIterator([1, 2]);
console.log(it.next());
console.log(it.next());
console.log(it.next());

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
// Iterator
Array[Symbol.iterator] = function () {
  let index = 0;
  return {
    next: () => {
      return index < this.length ?
        { value: this[index++], done: false } :
      { done: true }
    }
  }
}
let arr = [1, 2];
let it = arr[Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());

// yield*
let generator = function* () {
  yield 1;
  yield* [2, 3];
  yield 4;
};
var iterator = generator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

// 二叉树遍历
// 二叉树是每个结点最多有两个子树的树结构。通常子树被称作左子树和右子树
// 先序遍历：根节点->左子树->右子树
// 中序遍历：左子树->根节点->右子树
// 后序遍历：左子树->右子树->根节点
class Tree {
  constructor(public left, public value, public right) {
  }
}
//['A', 'B', 'D','E', 'C', 'F','G']
function* leftOrder(tree) {
  if (tree) {
    yield tree.value;
    yield* leftOrder(tree.left);
    yield* leftOrder(tree.right);
  }
}
//['D', 'B', 'E','A', 'F', 'C','G']
function* inOrder(tree) {
  if (tree) {
    yield* inOrder(tree.left);
    yield tree.value;
    yield* inOrder(tree.right);
  }
}
//['D', 'E', 'B','F', 'G', 'C','A']
function* rightOrder(tree) {
  if (tree) {
    yield* rightOrder(tree.left);
    yield* rightOrder(tree.right);
    yield tree.value;
  }
}
function make(array) {
  if (array.length === 1) return new Tree(null, array[0], null);
  return new Tree(make(array[0]), array[1], make(array[2]));
}
let tree = make([[['D'], 'B', ['E']], 'A', [['F'], 'C', ['G']]]);
var result: any[] = [];
for (let node of rightOrder(tree)) {
  result.push(node);
}
console.log(result);

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
class Battery {
  constructor(state) {
    this.amount = 'high';
    this.state = new SuccessState();
  }
  show() {
    this.state.show();
    if (this.amount == 'high') {
      this.amount = 'middle';
      this.setState(new WarningState());
    } else if (this.amount == 'middle') {
      this.amount = 'low';
      this.setState(new DangerState());
    }
  }
  setState(state) {
    this.state = state;
  }
}
class SuccessState {
  constructor(battery) {
    this.battery = battery;
  }
  show() {
    console.log(`绿色 ${battery.amount}`);
  }
}
class WarningState {
  constructor(battery) {
    this.battery = battery;
  }
  show() {
    console.log(`黄色 ${battery.amount}`);
  }
}
class DangerState {
  constructor(battery) {
    this.battery = battery;
  }
  show() {
    console.log(`红色 ${battery.amount}`);
  }
}

let battery = new Battery();
battery.show();
battery.show();
battery.show();

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
// 点赞
let likeState = {
  render(element) {
    element.innerHTML = '赞👍';
  },
};
let likedState = {
  render(element) {
    element.innerHTML = '取消';
  },
};
class Button {
  constructor(container) {
    this.liked = false;
    this.state = likeState;
    this.element = document.createElement('button');
    container.appendChild(this.element);
    this.render();
  }
  setState(state) {
    this.state = state;
    this.render();
  }
  render() {
    this.state.render(this.element);
  }
}
let button = new Button(document.body);
button.element.addEventListener('click', () => {
  button.setState(button.liked ? likeState : likedState);
  button.liked = !button.liked;
});

// Promise
class Promise {
  constructor(fn) {
    this.state = 'initial';
    this.successes = [];
    this.fails = [];
    let resolve = (data) => {
      this.state = 'fulfilled';
      this.successes.forEach((item) => item(data));
    };
    let reject = (error) => {
      this.state = 'failed';
      this.fails.forEach((item) => item(error));
    };
    fn(resolve, reject);
  }
  then(success, fail) {
    this.successes.push(success);
    this.fails.push(fail);
  }
}
let p = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve(1);
  }, 1000);
});
p.then(
  (data) => console.log('成功'),
  (error) => console.error('失败')
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Customer {
  constructor() {
    this.kinds = {
      normal: function (price) {
        return price;
      },
      member: function (price) {
        return price * 0.9;
      },
      vip: function (price) {
        return price * 0.8;
      },
    };
  }
  cost(kind, amount) {
    return this.kinds[kind](amount);
  }
}
let c = new Customer();
console.log(c.cost('normal', 100));
console.log(c.cost('member', 100));
console.log(c.cost('vip', 100));