- 博客(38)
- 收藏
- 关注
原创 Drag and Drop API 实现 JavaScript 中的原生拖放功能
拖放就是将“拖放元素“ 拖到 ”放置目标”上面。没有数据传输的拖动是没有意义的。拖的时候有 3 个事件,在`dragstart`事件中定义数据,放的时候有 4 个事件,在`drop`事件中接受数据。
2024-12-17 21:11:45
1150
原创 JavaScript 浏览器对象模型 BOM
BOM 提供了与浏览器交互的基础设施,允许开发者获取当前窗口、文档、历史、导航和屏幕的信息及功能。这些功能使得我们能够创建丰富的用户体验和交互。
2024-11-18 22:50:22
1157
原创 JavaScript 判断错误、查找错误、处理错误
在 JavaScript 开发与运行时,难免会遇到一些错误。首先,我们要知道报什么错误,也就是错误类型;其次,我们需要查找错误,找到引起错误的代码块;最后,一些关键代码要预防错误,以及处理错误。
2024-11-18 13:34:51
1316
原创 JavaScript 跳出循环
优先使用数组已有的方式跳出循环,在考虑使用 break、continue跳出循环;return跳出函数也是一种选择;特殊情况下考虑使用try-catch-throw,outerLoop结合break慎用。
2024-11-10 12:07:55
3343
1
原创 JS 创建对象
对于简单对象,字面量方式或工厂函数十分便捷;对于需要创建多个实例,构造函数或Class是更好的选择;而对于需要继承与特定原型的场景,`Object.create()` 提供了灵活性。
2024-11-09 14:46:31
290
原创 this 指向
this 不是编写时绑定,而是运行时绑定。它依赖于函数调用的上下文条件。每个执行上下文都有一个 this 。在全局上下文中,this 指向全局对象;在函数上下文中,this 的指向取决于函数的直接调用位置。
2024-11-08 17:58:10
403
原创 JS 闭包
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。闭包会保持对外部作用域的引用,从而可能阻止这些作用域的内存被垃圾回收器回收,使用之后记得手动回收。
2024-11-08 13:27:46
989
原创 JS 内存管理 - V8 引擎
JavaScript 通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单,确定哪个环境变量不再使用,然后释放它占用的内存。这个过程是周期性的,垃圾回收程序每隔一定时间(或者说在代码执行过程中某个预定的收集时间)就会自动运行。
2024-11-04 18:16:06
1063
原创 JS执行上下文 - V8 引擎
执行上下文是在 JavaScript 引擎解析 (Parsing)阶段,确切说是词法分析(Lexical Analysis)阶段,创造的一个特殊的环境。用来处理 JavaScript 代码中的变量和函数如何被解析和执行。这个特殊的环境被称为执行上下文。
2024-11-03 22:58:21
1945
原创 var、let、const 学习研究
var、let和 const是 JavaScript 中用来声明变量的关键字。学习一下它们在作用域、初始化、重复声明的区别,也学习一下什么是暂时性死区、变量提升。
2024-11-02 09:11:52
1086
原创 es6 语法学习 - 单例模式
单例设计模式(Singleton Pattern)是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点。单例模式通常用于管理共享资源,如日志记录、配置信息或数据库连接
2024-10-31 07:52:35
391
原创 es6 语法学习 - 抽象工厂模式
抽象工厂设计模式(Abstract Factory Pattern)是一种创建型设计模式,它提供一个接口用来创建一系列相关或相互依赖的对象,而无需指定它们具体的类。抽象工厂模式允许客户端代码与具体类解耦,从而实现更高的灵活性和可扩展性。
2024-10-31 07:49:39
256
原创 es6 语法学习 - 工厂模式
工厂设计模式(Factory Pattern)是一种常见的创建型设计模式,它提供了一种创建对象的接口,使得子类可以决定实例化哪一个类。
2024-10-31 07:49:07
439
原创 es6 语法学习 - 建造者模式
建造者模式(Builder Pattern)是一种创建型设计模式,它主要用于构建一个复杂对象。该模式将一个复杂对象的构建过程与其表示分离,使得同样的构建过程可以创建不同的表示。这种方式使得构建复杂对象的过程变得更加灵活和可配置,因为你可以根据需要添加、删除或重新排列构建步骤。同时,它也使得代码更加清晰和易于维护,因为每个构建步骤都封装在。假设我们要构建一个表示“用户信息”(UserInfo)的复杂对象,这个对象包含多个部分,如姓名、地址、联系方式等。类包含了构建这个对象所需的所有步骤,并且每个步骤都返回。
2024-10-31 07:48:00
387
原创 es6 语法学习 - 原型模式
原型设计模式(Prototype Pattern)是一种创建型设计模式,它通过复制已有的对象来创建新对象,而不是通过类的实例化。利用原型来实现对象的克隆,可以避免大量的构造过程,并且在一些情况下,创建新对象的时间和资源消耗大大减少。关键字,而是直接操作对象的原型来创建新的对象类型。类那样直观和强大,特别是当我们需要多重继承或更复杂的继承结构时。ES6 引入了类(class)语法,这是对原型模式的一种语法糖。上定义的属性和方法。然而,这种方式的继承不如使用。在纯原型模式中,我们不使用。
2024-10-31 07:47:17
399
原创 es6 语法学习 - 代理模式
代理设计模式(Proxy Pattern)是一种结构型设计模式,它为其他对象提供一种代理以控制对这个对象的访问。代理对象在一定程度上可以替代真实对象,客户端通过代理与真实对象交互,代理可以在这个过程之中增加附加的功能。以下是一个使用 JavaScript ES6 实现代理设计模式的示例,展示如何通过代理控制对真实数据库的访问。
2024-10-31 07:44:38
341
原创 es6 语法学习 - 适配器模式
适配器设计模式(Adapter Pattern)是一种结构型设计模式,它允许将一个接口转换成客户端所期望的另一个接口。适配器充当了两个不兼容接口之间的桥梁,使得它们能够协同工作。
2024-10-31 07:43:48
255
原创 es6 语法学习 - 桥接模式
桥接设计模式(Bridge Pattern)是一种结构型设计模式,它通过将抽象部分和实现部分分离,从而使它们可以独立地变化。桥接模式通常用于减少类的数量和复杂性,同时允许在运行时选择实现的不同部分。则负责处理颜色的细节。通过桥接模式,我们可以方便地添加新的形状或颜色,而无需修改现有结构。在上述代码中,我们有一个。
2024-10-31 07:42:53
305
原创 es6 语法学习 - 外观模式
以下是一个使用 JavaScript ES6 实现外观设计模式的示例。在这个示例中,我们创建一个家庭影院系统,包含多个子系统如 DVD 播放器、音响和投影仪。外观类将这些子系统的操作封装起来。外观设计模式(Facade Pattern)是一种结构型设计模式,它为子系统中的一组接口提供了一个统一的高层接口,从而使得子系统更加容易使用。
2024-10-31 07:40:19
235
原创 es6 语法学习 - 享元模式
享元设计模式为大量对象的创建和管理提供了一种有效的解决方案,通过共享对象的方式减少内存消耗,并提高性能。尽管其本身会增加一些复杂性,但在需要大量相似对象的场合,其价值不言而喻。合理使用享元模式可以显著优化系统资源的使用。享元设计模式(Flyweight Pattern)是一种结构型设计模式,通过共享对象来支持大量细粒度的对象,从而减少内存使用和提高性能。该模式主要用于减少内存消耗的场合,尤其适合需要创建大量相似对象的情况。在这个示例中,我们演示一个简单的字符渲染系统,其中每个字符的样式可以共享。
2024-10-30 15:40:26
384
原创 es6 语法学习 - 装饰器模式
装饰器设计模式提供了一种灵活的方式来增强对象的功能而不改变原有的类结构。通过使用装饰器,能够在运行时为对象添加多种功能组合,使代码更加灵活且符合单一职责原则。在需要动态扩展对象功能的场景中,装饰器模式是一种非常有效的解决方案。装饰器设计模式(Decorator Pattern)是一种结构型设计模式,它允许用户动态地给对象添加额外的职责(功能),而不影响其他对象的功能。通过使用装饰器,用户可以在运行时添加新的行为和功能,而不需要修改原有的类。
2024-10-30 15:39:52
528
原创 es6 语法学习 - 组合模式
组合设计模式(Composite Pattern)是一种结构型设计模式,旨在将对象组合成树形结构以表示“部分-整体”的层次关系。组合模式允许用户以统一的方式对待单个对象和对象组合,使得客户端代码可以轻松地处理树形结构中的任意元素。
2024-10-30 15:39:15
296
原创 es6 语法学习 - 备忘录模式
备忘录设计模式(Memento Design Pattern)是一种行为型设计模式,它允许在不破坏对象封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,以便之后恢复对象为先前的状态。这个示例展示了如何使用备忘录模式来捕获和保存对象的状态,并在需要时恢复该状态。通过这种方式,可以在不破坏对象封装性的前提下,实现对象的状态管理。
2024-10-30 15:37:54
290
原创 es6 语法学习 - 策略模式
策略设计模式(Strategy Pattern)是一种行为设计模式,它定义了一系列算法,并将每个算法封装在一个单独的类中,使得这些算法可以相互替换。策略模式的核心思想是将算法与主对象分开,允许对象在运行时动态地选择不同的算法或行为。以下是一个使用 ES6 语法的 JavaScript 示例,展示了策略模式的应用。假设我们有一个简单的电子商务系统,用户可以选择不同的折扣策略来计算订单的最终价格。策略模式使得算法可以独立于使用它的客户端而变化。
2024-10-30 15:36:19
337
原创 es6 语法学习 - 迭代器模式
迭代器模式(Iterator Pattern)是一种行为设计模式,,它提供一种访问一个集合对象中元素的方法,而不暴露该对象的内部表示。通过迭代器模式,客户端可以以统一的方式遍历不同类型的集合(如数组、列表、集合等),简化了对各种集合的操作。循环,这使得在 JavaScript 中实现和使用迭代器模式变得更加简单和直观。ES6 引入了内置的迭代器支持,包括。
2024-10-30 15:35:38
285
原创 es6 语法学习 - 访问者模式
访问者模式(Visitor Pattern)是一种行为设计模式,它允许你将数据操作与数据结构分离。它封装一些作用于某种数据结构中的各元素的操作,使得可以在不改变数据结构的前提下定义作用于这些元素的新的操作。以下是一个简单的例子。
2024-10-30 15:35:02
285
原创 es6 语法学习 - 观察者模式
观察者设计模式(Observer Pattern)是一种行为设计模式,用于定义一种一对多的依赖关系,使得当一个对象的状态发生改变时,所有依赖于它的对象都会收到通知并自动更新。在这个例子中,我们创建了主题对象和几个观察者对象,注册了它们,模拟了状态的变化,并观察了通知的发送。我们还测试了移除观察者的功能,以确保未注册或已移除的观察者不会收到通知。
2024-10-30 15:34:23
215
原创 es6 语法学习 - 解释器模式
假设我们要实现一个简单的数学表达式解析器,可以解析和计算包含加法、减法的数学表达式。解释器设计模式(Interpreter Pattern)是一种行为型设计模式,它用于将一种特定的语言或表达式转换为对象,并通过解释器来解释和执行这些对象。客户端代码组合了这些表达式来构建一个简单的算术表达式,并通过调用。接口作为所有表达式的抽象,然后实现了。在这个示例中,我们定义了一个。
2024-10-30 15:33:49
497
原创 es6 语法学习 - 命令模式
命令模式(Command Pattern)是一种行为设计模式,它将一个请求封装为一个对象,从而使你可以用不同的请求、队列或者日志请求来参数化其他对象。命令模式也支持可撤销的操作。以下是一个使用 ES6 语法的 JavaScript 示例,展示了命令模式的应用。
2024-10-30 15:32:32
265
原创 es6 语法学习 - 模板方法模式
模板方法模式(Template Method Pattern)是一种行为设计模式,它在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中实现。这样可以使子类在不改变算法结构的情况下,重新定义算法中的某些步骤。
2024-10-30 15:30:16
275
原创 es6 语法学习 - 责任链模式
责任链模式(Chain of Responsibility)是一种行为设计模式,它允许你将请求沿着处理者链进行传递。每个处理者都对请求进行某些处理,并且可以决定是否将请求传递给链中的下一个处理者。这个模式使得你可以动态地添加或删除处理者,并改变请求的传递顺序。在 JavaScript 中,我们可以使用 ES6 的类和函数来实现责任链模式。以下是一个简单的例子,展示了如何使用责任链模式来处理不同级别的日志消息。
2024-10-30 15:24:01
321
原创 es6 语法学习 - 中介者模式
中介者模式(Mediator Pattern)是一种行为型模式,它主要用于降低系统中对象之间的耦合度,通过引入一个中介者来封装对象之间的交互,使得对象之间的交互更加灵活和可扩展。
2024-10-30 15:21:58
256
原创 es6 语法学习 - 状态模式
状态模式(State Pattern)是一种行为设计模式,它允许一个对象在其内部状态改变时改变它的行为。换句话说,对象将在不同的状态下表现出不同的行为。状态模式通常用于处理对象的状态转换或复杂的状态机。
2024-10-30 15:14:42
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人