JavaScript设计模式（慕课网学习笔记）

头像
米姐胡扯扯
    阅读 7 分钟

    二、面向对象

    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

    略

    javascript前端
    米姐胡扯扯
    9 声望6 粉丝

    市民小胡

    « 上一篇
    styled-component 使用
    下一篇 »
    Javascript学习笔记面试(一)CSS部分

    引用和评论

    推荐阅读
    头像
    关于时间、时间戳（个人学习笔记）

    米姐胡扯扯阅读 2.6k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 2.3k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.5k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.9k评论 2

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.7k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    头像
    Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

    alwaysVe赞 4阅读 11.7k

    0 条评论
    得票最新