广州网站建设设计哪家好,如何搭建一个网站步骤,手机版网站版面设计怎么做,微网站 一键拨号虽然有一种疯狂天才的感觉可能很诱人#xff0c;但重新发明轮子通常不是设计软件的最佳方法。很有可能有人已经遇到了和你一样的问题#xff0c;并以一种聪明的方式解决了它。这样的最佳实践在形式化后被称为设计模式。今天我们来看看它们的概念#xff0c;并检查单例模式和…虽然有一种疯狂天才的感觉可能很诱人但重新发明轮子通常不是设计软件的最佳方法。很有可能有人已经遇到了和你一样的问题并以一种聪明的方式解决了它。这样的最佳实践在形式化后被称为设计模式。今天我们来看看它们的概念并检查单例模式和模块。
什么是设计模式
我们可以将设计模式视为许多开发人员在各种现实生活场景中测试过的经过验证的解决方案。它们旨在支持软件设计师以可读和可预测的方式解决常见问题。如果我们的应用程序基于经过验证的模式我们就不用太担心整体结构因为它们倾向于鼓励我们以一种有组织的方式编写代码。 查看包含某种设计模式的现有代码库可能比尝试理解一种不熟悉的方法更容易。他们也是其他开发者和我们之间的桥梁。使用众所周知的策略可以使沟通更快更容易。 设计模式并不是精确的解决方案。他们为我们提供了一个方案我们可以根据自己的需要进行调整。这些模式没有绑定到特定的问题这使得它们非常可重用。它们与特定的编程语言无关但JavaScript拥有比其他语言更流行的设计模式。 你可能已经使用了其中的一些。常见的JavaScript解决方案往往具有在实现时感觉足够的设计模式。React经常合并高阶组件模式和flux架构。在实现观察者设计模式时Angular应用程序似乎运行得很好。
单例模式
我们从一个叫做单例的设计模式开始。它是最著名的模式之一因此是一个很好的起点。其核心是限制一个类只能有一个实例并确保它是全局可访问的。当你需要管理整个应用程序中的某些内容时它可能会派上用场。 单例这个术语来自数学意思是一个集合恰好有一个元素。 按照设计单例会在类还不存在时创建一个实例。否则它们返回对现有实例的引用。
class Singleton {static instance;constructor() {// your logic here}static getInstance() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance new Singleton();return Singleton.instance;}
}现在每次调用Singleton.getInstance()我们都会得到相同的对象。
Singleton.getInstance() Singleton.getInstance(); // true上面的代码乍一看没什么问题但它有一些问题。没有什么可以限制我们直接调用单例构造函数。这时TypeScript可能就派上用场了。
class Singleton {private static instance?: Singleton;private constructor() {// your logic here}static getInstance() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance new Singleton();return Singleton.instance;}
}通过将单例构造函数变为私有我们只能在getInstance函数中调用它。 另一种方法是直接从构造函数中返回一个实例。
class Singleton {static instance;constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance this;// your logic here}
}new Singleton() new Singleton() // true上面的代码让它变得不那么透明因为有人可能不知道构造函数每次都返回相同的对象。 单例与全局变量有很多共同之处。这也是为什么它们通常不被鼓励的原因因为它们共享了它们的缺点因为它可能会使您的应用程序的可读性更差。无论我们认为单例是好是坏它们都是基本的设计模式之一。了解它们也许有一天会派上用场。即使您不决定自己编写它们您也可能在某些应用程序中遇到它们。
模块模式
JavaScript应用程序中的另一种典型模式是模块设计模式。将我们的应用程序代码分成模块对于保持我们的代码库整洁组织起着重要的作用。 不久前一种流行的方法是将一段代码包含在立即调用的函数表达式(IIFE)中。这是因为所有JavaScript文件共享相同的作用域。
index.html
!DOCTYPE html
html langenheadtitleHello world!/titlescript srchello.js/scriptscript srcmain.js/script/headbody/body
/htmlhello.js
function hello() {console.log(Hello world!);
}
hello(); // Hello world!main.js
hello(); // Hello world!在一个文件中定义某些内容会污染整个全局范围这不是一种理想的情况。解决这个问题的一个常见方法是通过创建一个函数并立即调用它来引入模块模式。
hello.js
(function(){function hello() {console.log(Hello world!);}hello(); // Hello world!
})();main.js
hello(); // Uncaught ReferenceError: hello is not defined上述方法的一个重要的事情是如果我们在上面的模块内定义任何变量它在它之外是不可用的。 我们还可以通过从立即调用的函数表达式返回一些东西来导出hello() 函数。
hello.js
const helloModule (function(){function hello() {console.log(Hello world!);}return {hello}
})();main.js
helloModule.hello(); // Hello world!随着JavaScript语言的发展我们找到了其他方法来处理上述问题。其中之一是ES6模块其中每个模块都有自己的文件。现代浏览器已经支持它们。 Node.js环境还通过实现一个名为CommonJS的模块系统来提供解决方案。让我们来看看一段奇怪的代码
console.log(Hello);
return;
console.log(world!);这看起来很奇怪因为return语句不能在函数之外发生。当我们导入这样的文件时Node.js将其包装在一个函数中如下所示:
function (exports, require, module, __filename, __dirname) {console.log(Hello);return;console.log(world!);
}多亏了上面的代码该模块有了自己的作用域上面的代码可以正常运行。
总结
在本文中我们了解了什么是设计模式。我们首先要知道的是单例模式和模块模式。上面文章的一个观点是你可能已经在使用设计模式了。这可能是一个好主意去学习更多并扩展我们的编程词汇。多亏了这一点我们才能更快地想出解决问题的办法。此外它可能会更高效可读性更强。
