如何编写干净且可扩展的JavaScript代码

　　介绍

这篇文章将为大家详细讲解有关如何编写干净且可扩展的JavaScript代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

JavaScript起源于早期的网络。它最初是一种脚本语言,现在已经发展成为支持服务器端执行的完全成熟的编程语言。

现代Web应用程序严重依赖JavaScript,尤其是单页应用程序(SPA)。借助反应,AngularJS和Vue.js等新兴框架,网络应用程序主要使用JavaScript构建。

扩展这些应用程序(前端相当于后端)可能相当棘手。使用一个平庸的设置,您最终将遇到限制并迷失在混乱的海洋中。我想分享一些小技巧,帮助你以一种有效的方式编写干净的代码。

我可以建议保持代码库整洁和可读的最重要的事情是按主题分开特定的逻辑块(通常是函数)。如果编写函数,则该函数应默认为仅具有一个用途,并且不应一次执行多项操作。

另外,应该避免引起副作用,这意味着在大多数情况下,不应该更改在函数外部声明的任何内容。将数据接收到带有参数的函数中,不应访问其他所有内容。如果希望从函数中获取某些内容,请返回新值。

当然,如果这些函数以类似的方式使用或做类似的事情,您可以将多个函数分组到一个模块(和/或类,如果您愿意)中,例如,如果您有许多不同的计算要做,那么可以将它们分割成可以链接的独立步骤(函数)。

但是,这些函数都可以在一个文件(模块)中声明。下面是JavaScript的例子:

函数添加(a, b) { 　　返回一个+ b 　　} 　　函数减去(a, b) { 　　返回一个- b 　　} 　　模块。出口={ 　　添加、 　　减去 　　} 　　const{加、减}=要求(& # 39;。/计算# 39;) 　　控制台。日志(减去(5、添加(3 2)

如果要编写前端JavaScript,则一定要对最重要的项目使用默认导出,对次要项目使用命名的导出。

声明函数时,应始终首选多个参数,而不是一个需要对象的参数:

//好 　　函数displayUser (firstName、lastName、年龄){ 　　控制台。日志(这是$ {firstName} $ {lastName}。她是${}岁old.”) 　　}//坏 　　函数displayUser(用户){ 　　控制台。日志(这是${用户。firstName} $ {user.lastName}。她是${用户。}岁old.”) 　　}

这背后的原因是,当您查看函数声明的第一行时,您确切地知道需要传递给函数的内容。

尽管函数的大小应该是有限的(只做一项工作),但是函数的大小可能会变大。在函数体中寻找需要传递的变量(嵌套在对象中)将花费更多的时间。有时似乎更容易使用整个对象并将其传递给函数,但要扩展应用程序,这种设置肯定会有所帮助。

在某种程度上,声明特定的参数是没有意义的。对我来说,它超过了四五个函数参数。如果你的函数变得那么大,你应该使用对象参数。

这里的主要原因是参数需要以特定的顺序传递。如果有可选参数,则需要传递<代码>定义或<代码>零>

解构是ES6引入的一个很好的工具。它允许您从对象中获取特定字段并立即将其分配给变量。您可以将其用于任何类型的对象或模块。

//模块的示例 　　const{加、减}=要求(& # 39;。/计算# 39;)

只导入需要在文件中使用的函数,而不是整个模块,然后从中访问特定的函数,这是有意义的。类似地,当您确定您确实需要一个对象作为函数参数时,也可以使用解构。这仍将为您提供函数内部所需内容的概述:

函数logCountry({名称、代码、语言、货币、人口、大陆}){ 　　让味精=${名称}'的官方语言 　　如果(代码)味精+='(${代码})” 　　味精+=' ${语言}。${}人口居民支付${货币}”。 　　如果(contintent)味精+='国家位于${大陆}' 　　} 　　 　　logCountry ({ 　　名称:& # 39;德国# 39; 　　代码:& # 39;德# 39; 　　语言& # 39;德国# 39; 　　货币:& # 39;欧元# 39; 　　人口:& # 39;82年百万# 39; 　　}) 　　 　　logCountry ({ 　　名称:& # 39;中国# 39; 　　语言& # 39;普通话# 39; 　　货币:& # 39;人民币# 39; 　　人口:& # 39;1.4美元# 39; 　　大陆:& # 39;亚洲# 39; 　　})

解构的默认值甚至基本函数参数都非常有用。首先,他们给你一个例子,说明你可以传递给函数的值其次,您可以指出哪些值是必需的,哪些不是必需的。使用前面的示例,函数的完整设置可能如下所示:

如何编写干净且可扩展的JavaScript代码