JavaScript 的 7 种设计模式 javascript设计模式

Javascript设计模式(JavaScript的7种设计模式)
当开始一个新项目时,我们不应该马上开始编程 。相反,我们应该首先定义项目的目的和范围,然后列出其功能或规格 。如果您已经开始编程或者正在从事一个复杂的项目 , 那么您应该选择一个最适合您的项目的设计模式 。
什么是设计模式?在软件工程中 , 设计模式是软件设计中常见问题的可重用解决方案 。设计模式也是有经验的开发人员针对特定问题的最佳实践 。可以作为编程的模板 。
为什么要使用设计模式?许多工程师要么认为设计模式浪费时间,要么不知道如何正确使用它们 。但是如果你能正确的使用设计模式,它会帮助你写出更好更可读的代码,代码也会更容易维护和理解 。
最重要的是 , 设计模式为软件开发人员提供了一个通用的词汇表 。它们可以让学习你的代码的人快速理解代码的意图 。例如,如果在您的项目中使用了decorator模式,那么新的开发人员可以很快知道这段代码的功能,这样他们就可以更专注于解决业务问题,而不是试图理解这段代码在做什么 。
现在我们知道了什么是设计模式以及它们的重要性,让我们深入了解一下JavaScript中的七种设计模式 。
一、模块模式一个模块是一个独立的代码,所以我们可以在不影响代码其余部分的情况下更新模块 。该模块还允许我们通过为变量创建单独的作用域来避免命名空污染 。当它们与其他代码解耦时 , 我们可以在其他项目中重用模块 。
模块是任何现代JavaScript应用程序不可或缺的一部分,它有助于保持代码的整洁、独立和有组织 。在JavaScript中创建模块的方法有很多种,其中一种就是模块模式 。
与其他编程语言不同,JavaScript没有访问修饰符,也就是说,不能将变量声明为私有或公共的 。因此 , 模块模式也可以用来模拟包装的概念 。
该模块使用IIFE(立即调用函数表达式)、闭包和函数作用域来模拟封装的概念 。例如:
const myModule = (function() {const privateVariable = 'Hello World';function privateMethod() {console.log(privateVariable);}return {publicMethod: function() {privateMethod();}}})();myModule.publicMethod();
因为是IIFE,所以代码会立即执行,返回的对象会赋给myModule变量 。因为闭包 , 即使在life完成之后,返回的对象仍然可以访问life内部定义的函数和变量 。
因此,IIFE内部定义的变量和函数对外部是不可见的 , 从而使它们成为myModule模块的私有成员 。
执行代码后,myModule变量如下所示:
const myModule = {publicMethod: function() {privateMethod();}};
因此,当我们调用publicMethod()时 , 它会调用privateMethod()例如:
// Prints 'Hello World'module.publicMethod();
二、揭示模块模式揭示模块模式是对Christian Heilmann的模块模式的一点改进 。模式的问题是我们必须创建新的公共函数来调用私有函数和变量 。
在这种模式下,我们将返回对象的属性映射到要公开的私有函数 。这就是为什么它被称为揭示模块模式 。例如:
const myRevealingModule = (function() {let privateVar = 'Peter';const publicVar= 'Hello World';function privateFunction() {console.log('Name: '+ privateVar);}function publicSetName(name) {privateVar = name;}function publicGetName() {privateFunction();}/** reveal methods and variables by assigning them to objectproperties */return {setName: publicSetName,greeting: publicVar,getName: publicGetName};})();myRevealingModule.setName('Mark');// prints Name: MarkmyRevealingModule.getName();
这种模式让我们更容易知道哪些函数和变量是公共的,这无形中提高了代码的可读性 。代码执行后 , myRevealingModule如下所示:
const myRevealingModule = {setName: publicSetName,greeting: publicVar,getName: publicGetName};
当我们调用myreealingmodule.setname ('mark ')时,我们实际上调用的是内部publicSetName 。当调用myRevealingModule.getName()时,实际调用的是内部publicGetName 。例如:
myRevealingModule.setName('Mark');// prints Name: MarkmyRevealingModule.getName();
与模块模式相比,模块模式的优势如下:
通过修改return语句中的一行,我们可以将成员从public改为private,反之亦然 。
返回的对象不包含任何函数定义,所有的右表达式都是在IIFE中定义的,这样使得代码清晰可读 。
三 。ES6模块在ES6之前,JavaScript没有内置模块,所以开发者必须依赖第三方库或模块模式来实现模块 。但是从ES6开始,JavaScript有了内置模块 。
ES6的模块存储为文件 。每个文件只能有一个模块 。默认情况下,模块中的所有内容都是私有的 。使用export关键字公开函数、变量和类 。模块中的代码总是以严格模式运行 。

推荐阅读