二、面向对象
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
略
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。