二、面向对象

2.1 搭建环境

2.2 什么是面向对象

三要素：

继承：父子继承
class Student extends Person{    constructor(){    }}
封装：数据权限与窃密
// 应用tspublicprotectedprivate
多态：对立接口的不同实现

总结：面向对象是为了“数据”结构化。编程就是为了简略和形象。

2.3 UML类图

unified Modeling Language 对立建模语言，uml包含很多种图，与本课程相干的是类图。次要讲泛化与关联。

泛化示意继承
关联示意援用

2.4 总结

3 设计准则

3.1 设计准则

  • 即依照哪一种思路欧哲规范来实现性能
  • 性能雷同，能够有不同设计方案来设计
  • 随同着需要减少，设计的作用能力体现进去

何为设计？
《unix/linux设计哲学》

  • 准则一： 小即是美
  • 准则二：让每个程序只做好一件事
  • 准则三：疾速建设原型
  • 准则四：舍弃高程序性而取可移植性
  • 准则五：采纳纯文原本存储数据
  • 准则六：充沛利用软件的杠杆效应
  • 准则七：利用shell来进步杠杆效应和可移植性
  • 准则八：防止强制性的用户界面
  • 准则九：让每个程序成为过滤器

小准则：

  • 容许配置
  • 尽量更加小的内核而轻量
  • 沉默是金
  • 各局部之和大于整体
  • 寻求90%的解决方案

五大设计准则：

  • s-繁多职责准则
  • o-凋谢关闭准则 对扩大凋谢 对批改关闭
  • l-子类能笼罩父类 继承用的不是那么多
  • i-接口独立 ts中应用
  • d-依赖导致准则 依赖于形象而不依赖于形象
// 应用promisefunction loadImg(src) {    let promise = new Promise(function (resolve, reject) {        let img = document.createElement('img');        img.onload() = function () {            return resolve(img)        }        img.onerror() = function () {            return reject("图片加载失败");        }        img.src = src;    });    return promise;}let src = "";let result = loadImg(src);result.then((img) => {    alert(img.src);}).catch((ex) => {    alert(ex)})

该如何学习设计模式？

  • 明确每个设计的情理和用意
  • 通过经典利用领会它的真正应用场景
  • 本人编码时多思考，尽量模拟

3.2 面试真题



4、工厂模式


应用场景：

  • React.createElement
  • jQuery

5、单例模式

应用场景：

  • 只有一个登陆框，一个购物车
  • jQuery
  • vuex
  • redux store
class LoginForm {    constructor() {        this.state = "hide"    }    show() {        if (this.state === "show") {            alert("曾经显示");            return;        }        this.state === "show";        console.log("登录框显示胜利")    }    hide() {        if (this.state === "hide") {            alert("曾经暗藏");        }        this.state === "hide";        console.log("暗藏胜利")    }}LoginForm.getInstance = (function () {    let instance;    return function () {        if (!instance) {            instance = new LoginForm()        }        return    }})()let login1 = LoginForm.getInstance();login1.show();let login2 = LoginForm.getInstance();login2.hide();console.log("login1 === login2", login1 === login2)

6、适配器模式

client 目标是应用Target，Target援用了适配器能力给client
举例：
电源的适配器转换器

场景：

  • 封装旧的接口ajax
  • mobx 外面 conputed

7、装璜器模式

举例： 手机壳
场景：

  • es7 装璜器
  • core-derectors
@tesDesclass Demo { //装璜一个类}function tesDes(target) {    target.isDec = true}alert(Demo.isDec) // true
function readOnly(target, name, descriptor) {    descriptor.write = false;    return descriptor;}class Person {    constructor() {        this.A = "A";        this.B = "B";    }    @readOnly    name() {        alert(`${this.A}`, `${this.B}`);    }}

8、代理模式

举例：

// 1class ReadImage {    constructor(filename) {        this.filename = filename;        this.loadFormDisk();    }    display() {        console.log("----", this.filename);    }    readImage() {        console.log("---", this.filename);    }}class ProxyImg {    constructor(filename) {        this.realImg = new ReadImage(filename)    }    display() {        this.realImg.display();    }}const img = new ProxyImg("imgmj");img.display()
    $("div").click(function () {            var _this = this;            setTimeout(function () {                this.css("background-color", "yellow");            }, 1000);        })        $("div").click(function () {            var fn = $.proxy(function () {                this.css("background-color", "yellow");            }, this)            setTimeout(fn, 1000);        })

明星与经纪人

let Star = {    name: "张某某",    age: "24",    gender: "male"}let agent = new Proxy(Star, {    get: function (target, key) {        if (key === "phone") {            // 返回经纪人本人的手机号            return "12312432542";        }        if (key === "name") {            return Star.name;        }    },    set: function (target, key, val) {        if (key === "costomPrice") {            if (val < 1000) {                return new Error("价格太低");            } else {                target[kay] = val;                return true;            }        }    }})

代理模式与适配器模式的区别在于：

适配器模式：以前的(220v)不能实用当初的性能，我写一个函数，以前的就能应用了。而且适配当前拿到的(12v)货色的以前的(220v)不一样。

代理模式：以前的和当初的解决完了当前是一样的，同一个明星。拜访的网址也是同一个网址。

代理模式与装璜器模式的区别在于。
这个区别比拟显著，装璜器模式会给以前的类批改一部分货色。

9、外观者模式

把多个接口写到一起，而后让他人都拜访这个接口即可。

10、观察者模式

  • 公布订阅
  • 1对N
// Subject 被察看 的类// 我想让我的Subject类外面的observers被察看class Subject {    constructor() {        this.state = 0;        this.observers = []    }    getState() {        return this.state;    }    setState(state) {        this.state = state    }    noticefyAllObservers() {        this.observers.forEach(observer => {            observer.update()        })    }    attach(observer) {        this.observers.push(observer);    }}class Observer {    constructor(name, subject) {        this.name = name        this.subject = subject        this.subject.attach(this) // 此时Subject的observers数组中应该有数值。    }    update() {        console.log(`${this.subject.getState}____${this.name}`)    }}// 一个observer相当于一个 @observer 一个store外面能够有多个observer

场景：

  • 网页事件绑定
  • Promise
  • jQuery callbacks
  • nodejs自定义事件
  • nodejs解决生命周期
  • nodejs解决http申请

11、迭代器模式

11.1 介绍

程序拜访一个汇合，不论数据结构。什么构造都能解决。

class Iterator {    constructor(list) {        this.list = list;        this.index = 0;    }    hasNext() {        if (this.index >= this.list.length) {            return false        }        return true;    }    next() {        if (this.hasNext()) {            return this.list[this.index++];        }        return null;    }}class Container {    constructor(list) {        this.list = list;    }    getIterator(list) {        const IList = new Iterator(list)        return IList;    }}

11.2 类图

11.3 场景

1、ES6 Iterator

为什么会存在？

作为罕用设计模式的一种，存在很失常

是什么？
Array,prototype[Symbol.iterator] > 返回的是是一个函数，执行这个函数，返回一个迭代器类型。

2、有序数据汇合
Array Map auguments Set TypeArray

3、遍历对象

for...in..

Symbol.iterator 并不是每个人晓得，所以就有了for...of..

function each(data){     // data 带有遍历器属性的对象    for(let item of data){        console.log(item)    }}
function each(data) {    const Iterator = data.prototype[Symbol.iterator];    const item = { done: false };    while (!item.done) {        item = Iterator.next();        if (!item.done) {            console.log(item.value);        }    }}

12、状态模式

class State {    constructor(color) {        this.color = color;    }    handle(context) {        context.setState(this)    }}// 主体class Context {    constructor() {        this.state = null;    }    getState() {        return this.state    }    setState(state) {        this.state = state;    }}let content = new Context();let yellow = new State();let red = new State();let green = new State();yellow.handle();console.log(content.getState());red.handle();console.log(content.getState());green.handle();console.log(content.getState());

12.2 无限状态机

javasctipt-state-mechine 开源库

https://github.com/jakesgordo...

12.3 Promise

略