Javascript

设计模式是针对软件设计中反复出现的问题所提出的通用解决方案。它们是在大量实际软件开发经验中总结出的优秀设计实践，描述了在特定场景下解决问题的方法和思路。设计模式旨在提高代码的可复用性、可扩展性和可维护性，使软件具有更好的灵活性和稳定性。因此学习设计模式对于个人代码水平提升十分重要。 以下为模式学习笔记汇总： Vanilla 篇 Command pattern 命令模式 命令模式是将方法（命令）从执行操作的对象中解耦，可以到特定时间或特定生命周期再执行命令。 Factory pattern 工厂模式 工厂模式是函数不通过使用 new 关键字来返回一个新对象。 Mediator/middleware pattern 中间件模式 中间件模式使得组件可以通过一个中心点（中介者）相互交互。中间件接收请求并将其转发，使我们能够轻松简化对象之间的多对多关系。 Observer pattern 观察者模式 通过观察者模式，可以将某些对象（observers观察者）订阅到另一个的对象（observable可观察对象)。每当事件发生时，可观察者都会通知其所有观察者。 Minin pattern 混合模式 Mixins 允许我们通过将功能注入到对象的原型中，轻松地向对象添加功能，而无需继承。（不推荐使用） Singleton pattern 单例模式 实现单例模式是实现只能实例化一次并可以全局访问的类。 Prototype pattern 原型模式 原型模式是通过原型链继承的方式使得相同类型的的对象之间共享属性。 Module Pattern 模块模式 通过 ES Module 来防止名称冲突和全局范围污染。导出用 export，导入用 import module from path 。 Provider Pattern 提供者模式 Provider 模式无需通过手动给每个组件层传递数据，使得将数据传递到许多组件。

在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供可用数据。尽管可以使用 props 将数据传递给组件，但如果应用程序中几乎所有组件都需要访问 props 的值，那么这可能很难做到。 我们经常会遇到一种称为“ prop drilling”的情况，将props传递到组件树的深处时，就会出现这种情况。重构依赖于 props 的代码几乎是不可能的，并且知道某些数据来自哪里也很困难。 假设有一个包含某些 data 的 App 组件。在组件树的最深处，有一个 ListItem 、 Header 和 Text 组件，它们都需要来自 App 的data。为了将这些数据传递给这些组件，必须将其传递给多层组件。 function App() { const data = { ... } return ( <div> <SideBar data={data} /> <Content data={data} /> </div> ) } const SideBar = ({ data }) => <List data={data} /> const List = ({ data }) => <ListItem data={data} /> const ListItem = ({ data }) => <span>{data....

随着应用程序和代码库的增长，保持代码的可维护性和独立性变得越来越重要。模块模式使得代码分割成更小的、可重用的部分。 除了此之外，模块还允许您将文件中的某些值保持为私有。默认情况下，模块内的声明的范围到该模块。如果我们不显式导出某个值，则该值在该模块之外不可用。这降低了代码库其他部分中声明的值发生名称冲突的风险，因为这些值在全局范围内不可用。 ES2015 Modules ES2015 引入了内置 JavaScript 模块。模块是包含 JavaScript 代码的文件，与普通脚本相比，其行为存在一些差异。 让我们看一个名为 math.js 的模块示例，其中包含数学函数。 function add(x, y) { return x + y; } function multiply(x) { return x * 2; } function subtract(x, y) { return x - y; } function square(x) { return x * x; } 函数允许用户进行加法、乘法、减法以及获取他们传递的值的平方。 但是，我们不仅仅想在 math.js 文件中使用这些函数，我们希望能够在 index.js 文件中引用它们。但是直接在 index.js 文件内调用会抛出错误： index.js 文件中没有名为 add 、 subtract 、 multiply 或 square 。 为了使 math.js 中的函数可用于其他文件，我们首先必须将它们导出。为了从模块导出代码，我们可以使用 export 关键字。导出函数的一种方法是使用命名导出：我们只需在可公开的部分前面添加 export 关键字。在这种情况下，我们需要在每个函数前面添加 export 关键字，因为 index....

原型模式是在同一类型的许多对象之间共享属性的有用方法。原型是 JavaScript 原生的对象，可以通过原型链被对象访问。 在我们的应用程序中，我们经常需要创建许多相同类型的对象。想要达到此目的可以通过 ES6 类创建多个实例。 假设我们想创造很多狗，他们有一个名字，并且它们可以吠叫。 class Dog { constructor(name) { this.name = name; } bark() { return `Woof!`; } } const dog1 = new Dog("Daisy"); const dog2 = new Dog("Max"); const dog3 = new Dog("Spot"); 请注意这里 constructor 如何包含 name 属性，并且类本身如何包含 bark 属性。使用 ES6 类时，类本身定义的所有属性（在本例中为 bark ）都会自动添加到 prototype 中。 我们可以通过访问构造函数上的 prototype 属性或通过任何实例上的 __proto__ 属性直接查看 prototype 。 console.log(Dog.prototype); // constructor: ƒ Dog(name, breed) bark: ƒ bark() console.log(dog1.__proto__); // constructor: ƒ Dog(name, breed) bark: ƒ bark() 构造函数的任何实例上的 __proto__ 值都是对构造函数原型的直接引用。每当我们尝试直接访问对象上不存在的对象属性时，JavaScript 就会沿着原型链向下查找该属性在原型链中是否可用。...

单例是可以实例化一次并可以全局访问的类。单一实例可以在我们的应用程序中共享，这使得单例非常适合管理应用程序中的全局状态。 首先，看一下使用 ES2015 类的单例是什么样子。对于这个例子，我们将构建一个 Counter 类，它具有： 返回实例值的 getInstance 方法 返回 counter 变量当前值的 getCount 方法 将 counter 的值增加 1 的 increment 方法 将 counter 的值减一的 decrement 方法 let counter = 0; class Counter { getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } } 然而，这个类不符合 Singleton 的标准。 Singleton 应该只能被实例化一次。目前，我们可以创建 Counter 类的多个实例。 let counter = 0; class Counter { getInstance() { return this; } getCount() { return counter; } increment() { return ++counter; } decrement() { return --counter; } } const counter1 = new Counter(); const counter2 = new Counter(); console....