JavaScript设计模式与实践——组合模式

组合模式什么是组合模式

组合模式是用小子对象构建更大的对象，而这些小子对象本身又可以由更小的“孙子”组成。

简单来说，组合模式是一个树形结构，有子对象的对象称为组合对象，没有子对象的对象称为叶子对象。
请求从树顶向下发送，类似于二叉树的深度遍历。

组合模式的目的

表示树形结构。

统一对待复合对象和叶子对象

JavaScript中的组合模式

由于组合模式统一对待组合对象和叶子对象，因此需要确保组合对象和叶子对象具有相同的方法。
在JavaScript中，对象多态性是固有的，并且没有编译器检查变量类型。
因此，通常需要使用鸭子类型的思想来进行界面控制。

组合模式示例——扫描文件夹

在文件系统中，文件夹对应组合对象，文件对应叶子对象。
当我们操作文件夹时，我们不需要关心文件夹的内容。
我们只需要对文件夹进行操作，然后文件夹操作就会递归地继续下去。

constFolder=function(name){this.name=name;this.files=[];};Folder.prototype.add=function(file){this.files.push(file);};文件夹。
prototype.scan=function(){console.log('开始扫描文件夹：'+this.name);for(leti=0,file,files=this.files;(file=files[i++]);){file.scan();}};constFile=function(name){this.name=name;};File.prototype.scan=function(){console.log(`开始扫描文件：${this.name}`);};File.prototype.add=function(){thrownewError('无法添加文件');};letfolder=newFolder('前端');letfolder1=newFolder('框架');letfolder2=newFolder('JavaScript');letfile1=newFile('Html');letfile2=newFile('Css');letfile3=newFile('Vue');folder1.add(file3);folder2.add(file1);folder2.add(file2);folder.add(folder1);folder.add(folder2);folder.scan();何时使用组合模式

表示对象的部分-整体层次结构。
组合模式可以轻松构造一棵树来表示对象整个结构的一部分。

想要平等对待树中的所有对象。
组合模式允许用户忽略组合对象和叶子对象之间的差异。
当客户端面对树时，他们不需要关心当前正在处理的对象是组合对象还是叶子对象。

总结

组合模式并不完美，并且组合模式可以产生一个系统，其中系统中的每个对象都与其他每个对象相似。
它们的差异仅在运行时才明显，这会使代码难以理解。
另外，由于每个对象必须保持统一，因此创建的每个对象必须具有对象本身所需的方法和统一的组合模式方法。
如果创建太多对象，系统可能会变得不堪重负。

JavaScript设计模式——单例模式

单例模式是面向对象编程中常用的一种设计模式，用于确保一个类只有一个实例并提供全局访问点。
其主要目标是在频繁创建和销毁常用类时减少内存使用。
实现单例模式最简单的方法是保存版本对象，并确保下次获取或创建该对象时，返回之前创建的版本。

实现单例模式的一种方式是惰性单例，即初始化时不创建实例，直到实际创建实例时才创建实例，类似于前面的部分加载资源。
结尾。
为了更高效地实现单一模式，可以将示例代码打包，遵循设计模式的原则，找出程序中发生变化的部分，然后进行打包。

应用表单在很多情况下都有广泛的应用，例如：

登录窗口：作为全局唯一且经常使用的元素，它的使用使用表单可以避免多次创建和销毁。
全局状态管理：Vuex、Redux或Mobx等库将状态作为单个实例进行全局管理，以确保数据一致性。
jQuery：虽然jQuery已经逐渐被遗忘，但它的设计也体现了表单的思想。

简而言之，单例通过确保创建全局唯一的版本来提高程序的效率和可维护性。
在学习设计模式时，了解形式的应用场景和优点，将有助于你更好地理解和使用它。
随着技术不断发展，不断学习和更新知识是保持竞争力的关键。

感谢您阅读本文，请关注并持续分享技术博客文章。

JavaScript设计模式之开关闭包（ClosureToggle）

ClosureToggle在软件应用程序开发中发挥着重要作用，尤其是在实现菜单栏和切换按钮等二进制状态转换功能时。
以zhangxun.com网站为例，主页上的主菜单通过一个名为switchButton的开关来启用和禁用。
通过Closure模式可以清楚地解释其背后的逻辑。
闭包的本质是封装，它允许函数访问和操作其外部作用域中的变量，即使这些作用域是关闭的。
在switch闭包模式中，我们使用闭包创建一个包含两个状态和闭包变量的处理程序的函数。
state用于存储二进制状态，例如菜单打开或关闭。
转换方法通过每次执行时反转状态值来执行状态转换。
在JavaScript中，我们可以创建一个闭包工厂函数，例如zxj.createToggle()，来为一个对象创建一个特定的闭包。
例如，要实现主菜单切换功能，我们可以使用这个关闭工厂创建一个关闭函数，例如zxj.topmenu.toggle()，并将其初始状态设置为true。
当用户单击switchButton时，将调用此close以在打开和关闭状态之间切换。
这个过程可以通过UML类图直观地表示，它清楚地描述了闭包的静态结构。
使用关闭过渡模式时，需要首先创建并接收关闭，然后将相关控件和事件处理逻辑放置在HTML页面中，最后通过函数关闭能力实现动态状态过渡。
在具体实现中，第一步是通过闭包工厂创建闭包函数并设置初始状态。
然后使用HTML页面中的控件（例如切换按钮）创建闭包链接以实现事件绑定。
最后，编写关闭函数的具体实现，包括如何在状态转换时更新用户界面，例如显示和隐藏图像以表示菜单打开和关闭。
通过打开和关闭包模式，我们可以动态处理二进制状态转换需求，同时保持代码的模块化和可维护性。
该模型广泛应用于前端开发，为实现复杂的交互逻辑提供了有力的支持。