一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)
JavaScript 设计模式(二)
本篇文章是 JavaScript
设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完 上篇文章 后再看这篇文章,当然两篇文章并没有过多的依赖性。
5. 代理模式
代理模式提供了对目标对象的另一种访问机制。
在 vue3
还没出来之前,我猜过可能会使用 proxy
取代 defineProperty
,结果也被验证了,毕竟 proxy
比 defineProperty
支持更多的拦截机制,可以对数组的方法进行拦截。
const obj = {};
const proxyObj = new Proxy(obj, {
set(target, prop, value, receiver) {
console.log("set:", prop, "=", value);
Reflect.set(target, prop, value, receiver);
},
});
proxyObj.a = 1
上述代码是用一个拦截器 Proxy
作代理,使得每次在改变属性的时候,都能打印相应的日记,实际上如果 set
内部改成 render
函数,就可以做到数据改变的时候,渲染页面了。
6. 迭代器模式
迭代器模式能让我们不用在意数据真实的存储结构,更好的获取数据。
下面是一个迭代器模式的例子。
实际上由于原生的 JavaScript
不支持对象进入 for of
循环,原因是因为对象没有一个关于迭代器的 Symbol
属性。
如果要支持的话,可以用下面的做法。
function* gen(obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
yield [key, obj[key]];
}
return;
}
const obj = {
a: 1,
b: 2,
c: 3,
};
for (let [key, value] of gen(obj)) {
console.log(key, value);
}
// or
// obj[Symbol.iterator] = gen.bind(this, obj);
// for (let [key, value] of obj) {
// console.log(key, value);
//}
Generator
函数返回一个 迭代器用于迭代,而 for of
循环利用的就是这个迭代器。
7. 装饰器模式
在 ES7
语法提案中,尚未正式确定,因此主流浏览器都暂时不支持,但是有 babel
啊,这个神奇的工具可以帮助我们将 esnext
转化为浏览器可以执行的代码。
在 bebel
的官网上可以转化 decorators
const mixins = (...prototype) => {
return (target) => {
Object.assign(target.prototype, ...prototype);
}
}
const readonly = (target, name, descriptor) => {
descriptor.writable = false;
return descriptor;
}
const prototype = {
eat() {
console.log("huro eat!")
}
}
@mixins(prototype)
class Person {
@readonly
name() {
console.log("huro!!")
}
}
const huro = new Person();
huro.eat(); // huro!!
// 我想改掉 huro 这个名字
huro.name = () => {
console.log("xxx");
}
// 修改无效
huro.name() // huro!!
利用装饰器模式,可以简化代码开发,很重要的一点是,装饰器也可以很好的起到注释的作用。
8. 状态模式
实际上 Promise
的实现中就用到了状态模式,当然也用到了观察者模式,关于 Promise
原理这块,给出简单的实现。并不遵循 Promise/A+
规范。
关于以下代码的一步一步实现,可以参考知乎的一篇文章 图解 Promise 实现原理(一)—— 基础实现
enum Status {
Pending = "Pending",
Resolved = "Fulfilled",
Rejected = "Rejected",
}
type PromiseFnType = (
resolve: (data: any) => any,
reject: (error: any) => any
) => any;
interface Callback {
onResolved: (data: any) => any;
onRejected: (error: any) => any;
resolve: (data: any) => any;
reject: (error: any) => any;
}
class MyPromise {
status: Status;
value: any;
callbacks: Callback[];
constructor(fn: PromiseFnType) {
this.status = Status.Pending;
this.callbacks = [];
this.value = null;
fn(this.resolve.bind(this), this.reject.bind(this));
}
then(onResolved?: (data: any) => any, onRejected?: (error: any) => any) {
return new MyPromise((resolve, reject) => {
this.handle({
onResolved,
onRejected,
resolve,
reject,
});
});
}
handle(callback: Callback) {
const { onRejected, onResolved, reject, resolve } = callback;
if (this.status === Status.Pending) {
this.callbacks.push(callback);
return;
}
if (this.status === Status.Rejected) {
let error = this.value;
if (onRejected) error = onRejected(error);
reject(error);
}
if (this.status === Status.Resolved && onResolved) {
let value = this.value;
if (onResolved) value = onResolved(value);
resolve(value);
}
}
reject(error: any) {
this.value = error;
this.status = Status.Rejected;
this.callbacks.forEach((cb) => {
this.handle(cb);
});
}
resolve(value: any) {
if (value instanceof MyPromise) {
const then = value.then;
then.call(value, this.resolve.bind(this), this.reject.bind(this));
return;
}
this.value = value;
this.status = Status.Resolved;
this.callbacks.forEach((cb) => {
this.handle(cb);
});
}
}
new MyPromise((resolve, reject) => {
resolve(1);
})
.then((data) => {
return new MyPromise((resolve, reject) => {
resolve(data * 2);
});
})
.then((data) => {
console.log(data);
});
总结
JavaScript
设计模式是程序设计中很重要的一个环节,在了解了各种设计模式之后,可以在遇到实际项目的时候,预先选择好一个好的设计模式用于开发,提高项目的可扩展性,也有助于我们理解源码。
一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)的更多相关文章
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)
JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链
JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 继承
JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 闭包
JavaScript 闭包 为了更好地理解 JavaScript 闭包,笔者将先从 JavaScript 执行上下文以及 JavaScript 作用域开始写起,如果读者对这方面已经了解了,可以直接跳过 ...
- 一篇文章图文并茂地带你轻松实践 HTML5 history api
HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...
- 一篇文章图文并茂地带你轻松学会 HTML5 storage
html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...
- 一篇文章让你快速入门 学懂Shell脚本
Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. Shell可以直接使用在win/Unix/Linux上面 ...
- 学完JavaScript基础有感
紧接上一篇回来了,这几天一直学js,会不自觉的和其他的编程语言联系在一起,在没有学jQuery之前,结合我所学的c,java,数据结构,数据库以及部分html感觉到JavaScript里面又很多相似的 ...
随机推荐
- 【Oracle】add_months()函数介绍
add_months 函数主要是对日期函数进行操作,举例子进行说明 add_months 有两个参数,第一个参数是日期,第二个参数是对日期进行加减的数字(以月为单位的) 如:3个月以后的时间,可以用下 ...
- 目前用下来最溜的MacOS微信多开工具!
一个生活微信,一个工作微信是很多上班族的基本配置. 但由于微信客户端在PC端上只能打开一个,这使得在上班时候就非常不便,一个号在PC端上登录,一个在手机上使用,但是上班时候又不能一直看手机,不然老板还 ...
- Pandas 常见操作详解
Pandas 常见操作详解 很多人有误解,总以为Pandas跟熊猫有点关系,跟gui叔创建Python一样觉得Pandas是某某奇葩程序员喜欢熊猫就以此命名,简单介绍一下,Pandas的命名来自于面板 ...
- LOOP语句的AT语句块
在loop一个内表的时候,如果想在loop循环中使用AT NEW ,AT END OF 等语句,一定需要注意的几点: 1.内表要排序 2.AT END OF 语句中影响的是指定字段前面所有的字段 3. ...
- RocketMq消息 demo
参考 https://blog.csdn.net/asdf08442a/article/details/54882769 整理出来的测试 demo 1.produce 生产者 1 package co ...
- expect的使用
1. expect概述 1.1 expect的功能 脚本执行时,有时会需要人工进行交互输入,这时可以通过expect工具来实现自动交互. expect是一种shell解释器,但是expect可以在命令 ...
- 前端知识(一)02 初识 Node.js-谷粒学院
目录 初识Node.js 一.Node.js的概念 1.JavaScript引擎 2.什么是Node.js 3.Node.js有什么用 二.BFF 1.BFF 解决什么问题 2.BFF是什么 三.安装 ...
- 【中文】【deplearning.ai】【吴恩达课后作业目录】
[目录][吴恩达课后作业目录] 吴恩达深度学习相关资源下载地址(蓝奏云) 课程 周数 名称 类型 语言 地址 课程1 - 神经网络和深度学习 第1周 深度学习简介 测验 中英 传送门 无编程作业 编程 ...
- unity3D进阶
前言 在之前的例子中,我们都没有用到unity的精髓,例如地形系统.物理系统.粒子系统等,本文记录unity3D的进阶简单应用 前期准备 https://unity.cn/releases/full/ ...
- vue3.0 composition API
一.Setup函数 1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy 2.this指向:不会指向组件实例 3.参数 ...