JavaScript最佳实践:帮助您提高代码质量

编辑：宝哥软件园来源：互联网时间：2021-09-07

新天龙八部

角色扮演 | 1.85G

评分

立即下载

每天学习新的东西可以让一个理性的人走上不平凡的道路。作为开发人员，不断学习新事物是我们工作的一部分，不管这些新事物是否来自积极的学习经验。

在本教程中，我将指出一些重要的JavaScript最佳实践，这样您就不必以另一种困难的方式理解它们。准备升级您的代码！

　1. 避免对全局作用域的污染

声明变量是一件非常有趣的事情。有时候即使你不想这样做，也可以定义全局变量。在今天的浏览器中，全局变量存储在窗口对象中。而且因为里面有很多东西，你可能会覆盖一些默认值。

假设您有一个包含脚本标记的HTML文件，并且这个标记包含(或通过引用JavaScript文件加载)以下内容：

var foo=42console . log(foo)；这段代码显然导致控制台输出42。但是，因为代码不是在函数中执行的，所以它的执行上下文将是全局的。因此，变量被附加到窗口对象。这意味着window.foo的值也将是42。

这非常危险，因为您可以通过：覆盖现有的全局变量

函数print () { //做点什么} print()；当执行window.print(或只执行print)时，它不会打开打印弹出窗口，因为我们已经覆盖了原始打印弹出逻辑。

这个问题的解决方法相当简单；我们需要一个在定义后立即调用的闭包函数，如下面的：所示

//声明匿名函数(function(){ var foo=42；console . log(window . foo)；//未定义的console . log(foo)；// 42})();//并立即调用它，或者您可以选择将window和其他全局内容(如document)作为参数传递给该函数(这也可能提高性能):

(函数(全局，文档){ global.setTimeout(函数(){ doc.body.innerHTML='Hello！'；}, 1000);})(窗口、文档)；所以你必须使用闭包函数来避免创建一些全局的东西。请注意，因为我想关注代码本身，所以我不会在下面的代码片段中使用闭包函数。

Prompt :browserify是避免创建全局变量的另一种方法。它使用了您也将在Node.js中使用的require函数

顺便说一下，Node.js会自动将你的文件封装成函数。他们首先看起来像这样，

(函数(导出，要求，模块，_ _文件名，_ _目录名){//.因此，如果你认为require函数是全局的，那么，它不是。它只不过是一个函数的参数。

　　你知道吗？

因为window对象包含了所有的全局变量，而且因为它也是全局的，所以window本身也引用了它自己的：

Window.window.window//=窗口.}这是一个窗口对象和一个循环引用对象。下面展示了如何创建这样一个对象：

//创建objectvar foo={ }；//将键值指向对象本身foo . bar=foo；//这个‘foo’对象刚好变成一个圆形的one:foo.bar.bar.bar.bar//foo或者，为了表示你对JavaScript的无限热爱，你可以做一个发烧友，代码如下：

是的，您可以几乎无休止地扩展这个对象(或者等到浏览器崩溃)。

　2. 好的 use strict 使用习惯

使用严格严格！这只不过是在代码中添加一行代码，并在脚本中添加更多技巧。

例如：

//this bad，因为youdoreceateglobalwithowavinganyonetotellyou(function(){ a=42；console . log(a)；//42})();console . log(a)；//42使用严格使用，您可以获得更多错误消息：

(function(){ ' use strict '；a=42//error : unanchoriterceerror : aisnotdefined })()；你可能想知道为什么可以在封闭函数之外使用strict。这是可以的，但之后它将适用于整个世界。还不算太坏，但是如果有其他库的代码，或者想把所有东西都打包在一个文件里，就会有影响。

　3. 严格相等

这很短。如果你用==来比较JavaScript中的A和B(像其他编程语言一样)，你可能会发现它的运行方式很奇怪。如果您有一个如下所示的字符串和一个数字，它们将等于(==):

42 '==42/true由于一些明显的原因(如验证操作)，最好使用严格等于(===):

42 '===42//假

　4. 使用和|| 来制造点小把戏

。您可以使用逻辑运算符来缩短代码。

　　取默认值

' ' | | ' foo '//' foo ' undefined | | 42/42//notethifyouwantthandlee0在那里，您需要//to checkifalnumberwaprovided : vara=0；a | | 42/42//thissaternaryooperator—work likeanilineif-elsestatetementvarb=type ofa===' number '？a:42//0你不需要检查某件事是不是真的，你可以简单的做一下：

exprdosomehing()；//insteadof : if(expr){ dosometing()；}如果需要通过dosometing():来决定返回的结果，那么会更冷：

functiondosometing(){ return { foo : ' bar ' }；} varexpr=truevarres=exprdosomesing()；rescon sole . log(RES)；//{foo:'bar'}在这方面你可能不同意我的看法，但正如我所说，效果其实更好。如果你不想这样混淆你的代码，这就是JavaScript reducers实际做的。

如果你问我，我会说它使代码变短了，但它仍然可读。

　5. 对值的类型进行转化

根据你的想法有几种转化的方式。最常用的方法如下：

//fromany hing to numbervarfoo=' 42 '；varmyNumber=foo//shortcutfor number(foo)/42//tip : youcanconvertiddirectly intanegativenumbervarnergativefoo=-foo；//或-Number(foo)/-42//Fromobjecttoarray//Tip : ` arguments ` is objectandgeneraliyouwantouseitasarrayvarargs={ 0: ' foo '，1:'bar '，length :2 }；array . prototype . slice . call(args)/[' foo '，' bar ']//any hingtoboolean///nonnonnononisabooleanpart=1；varf=0；t//真！f//false///And non-pisabooleanon-p！t//假！f//true//any thingtostringvarfoo=42；' foo//shortcutforsting(foo)/' 42 ' foo={ hello : ' world ' }；JSON . stringify(foo)；//' { hello ' : ' world ' } ' JSON . stringify(foo，null，4)；//beauty things////' {//' hello ' : ' world '///} '//noteyoucantjson . stringifycroundstructurejson . stringify(window)；//type error : JSON . stringifyannotserializechyclicstructures .