乐趣区

关于javascript:JavaScript设计模式慕课网学习笔记

jiezi

二、面向对象

2.1 搭建环境

2.2 什么是面向对象

三要素：

继承：父子继承

class Student extends Person{constructor(){}}

封装：数据权限与窃密

// 应用 ts
public
protected
private

多态：对立接口的不同实现

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

2.3 UML 类图

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

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

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 面试真题



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
@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 类图

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

略

退出移动版