共计 4925 个字符，预计需要花费 13 分钟才能阅读完成。
二、面向对象
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) // truefunction 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
略
正文完