JavaScript 设计模式(二)

本篇文章是 JavaScript 设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完 上篇文章 后再看这篇文章,当然两篇文章并没有过多的依赖性。

5. 代理模式

代理模式提供了对目标对象的另一种访问机制。

vue3 还没出来之前,我猜过可能会使用 proxy 取代 defineProperty ,结果也被验证了,毕竟 proxydefineProperty 支持更多的拦截机制,可以对数组的方法进行拦截。

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 设计模式(二)的更多相关文章

  1. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)

    JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...

  2. 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链

    JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...

  3. 一篇文章图文并茂地带你轻松学完 JavaScript 继承

    JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...

  4. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

  5. 一篇文章图文并茂地带你轻松学完 JavaScript 闭包

    JavaScript 闭包 为了更好地理解 JavaScript 闭包,笔者将先从 JavaScript 执行上下文以及 JavaScript 作用域开始写起,如果读者对这方面已经了解了,可以直接跳过 ...

  6. 一篇文章图文并茂地带你轻松实践 HTML5 history api

    HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...

  7. 一篇文章图文并茂地带你轻松学会 HTML5 storage

    html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...

  8. 一篇文章让你快速入门 学懂Shell脚本

    Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的文件进行解析,然后执行这些功能,也可以说Shell脚本就是一系列命令的集合. Shell可以直接使用在win/Unix/Linux上面 ...

  9. 学完JavaScript基础有感

    紧接上一篇回来了,这几天一直学js,会不自觉的和其他的编程语言联系在一起,在没有学jQuery之前,结合我所学的c,java,数据结构,数据库以及部分html感觉到JavaScript里面又很多相似的 ...

随机推荐

  1. 【Oracle】add_months()函数介绍

    add_months 函数主要是对日期函数进行操作,举例子进行说明 add_months 有两个参数,第一个参数是日期,第二个参数是对日期进行加减的数字(以月为单位的) 如:3个月以后的时间,可以用下 ...

  2. 目前用下来最溜的MacOS微信多开工具!

    一个生活微信,一个工作微信是很多上班族的基本配置. 但由于微信客户端在PC端上只能打开一个,这使得在上班时候就非常不便,一个号在PC端上登录,一个在手机上使用,但是上班时候又不能一直看手机,不然老板还 ...

  3. Pandas 常见操作详解

    Pandas 常见操作详解 很多人有误解,总以为Pandas跟熊猫有点关系,跟gui叔创建Python一样觉得Pandas是某某奇葩程序员喜欢熊猫就以此命名,简单介绍一下,Pandas的命名来自于面板 ...

  4. LOOP语句的AT语句块

    在loop一个内表的时候,如果想在loop循环中使用AT NEW ,AT END OF 等语句,一定需要注意的几点: 1.内表要排序 2.AT END OF 语句中影响的是指定字段前面所有的字段 3. ...

  5. RocketMq消息 demo

    参考 https://blog.csdn.net/asdf08442a/article/details/54882769 整理出来的测试 demo 1.produce 生产者 1 package co ...

  6. expect的使用

    1. expect概述 1.1 expect的功能 脚本执行时,有时会需要人工进行交互输入,这时可以通过expect工具来实现自动交互. expect是一种shell解释器,但是expect可以在命令 ...

  7. 前端知识(一)02 初识 Node.js-谷粒学院

    目录 初识Node.js 一.Node.js的概念 1.JavaScript引擎 2.什么是Node.js 3.Node.js有什么用 二.BFF 1.BFF 解决什么问题 2.BFF是什么 三.安装 ...

  8. 【中文】【deplearning.ai】【吴恩达课后作业目录】

    [目录][吴恩达课后作业目录] 吴恩达深度学习相关资源下载地址(蓝奏云) 课程 周数 名称 类型 语言 地址 课程1 - 神经网络和深度学习 第1周 深度学习简介 测验 中英 传送门 无编程作业 编程 ...

  9. unity3D进阶

    前言 在之前的例子中,我们都没有用到unity的精髓,例如地形系统.物理系统.粒子系统等,本文记录unity3D的进阶简单应用 前期准备 https://unity.cn/releases/full/ ...

  10. vue3.0 composition API

    一.Setup函数 1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy 2.this指向:不会指向组件实例 3.参数 ...