二、面向对象

2.1 搭建环境

2.2 什么是面向对象

三要素:

继承:父子继承
class Student extends Person{
    constructor(){
    }
}
封装:数据权限与保密
// 使用ts
public
protected
private
多态:统一接口的不同实现

总结:面向对象是为了“数据”结构化。编程就是为了简单和抽象。

2.3 UML类图

unified Modeling Language 统一建模语言,uml包括很多种图,与本课程相关的是类图。主要讲泛化与关联。

泛化表示继承
关联表示引用

image.png

2.4 总结

3 设计原则

3.1 设计原则

  • 即按照哪一种思路欧哲标准来实现功能
  • 功能相同,可以有不同设计方案来设计
  • 伴随着需求增加,设计的作用才能体现出来

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

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

小准则:

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

五大设计原则:

  • s-单一职责原则
  • o-开放封闭原则 对扩展开放 对修改封闭
  • l-子类能覆盖父类 继承用的不是那么多
  • i-接口独立 ts中使用
  • d-依赖导致原则 依赖于抽象而不依赖于抽象
// 使用promise
function 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 面试真题

image.png
image.png

image.png
image.png

4、工厂模式

image.png
使用场景:

  • 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

image.png

7、装饰器模式

举例: 手机壳
场景:

  • es7 装饰器
  • core-derectors
@tesDes
class 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、代理模式

举例:

// 1
class 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 类图

image.png

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


米姐胡扯扯
9 声望6 粉丝

市民小胡