JavaScript 最佳实践:帮你提升代码质量最佳实践:帮你提升代码质量
在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准
备好去升级你的代码吧
每天学一些新东西可以让一个理性之人走上不凡之路。而作为开发人员,不断的学习新东西则是我们工作的一部分, 不论这些
新东西是不是来源于积极的学习经验。
在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升
级你的代码吧!
1. 避免对全局作用域的污染避免对全局作用域的污染
声明变量是一件很有趣的事情。有时候即使你不想这样做,但也有可能会定义出全局变量。在如今的浏览器中,全局变量
都被存储在 window 对象中。而因为有许多的东西都在那个里面,所以你有可能把一些默认值都给覆盖掉了。
假设你有一个 HTML 文件,里面包含了一个 <script> 标记,而这个标记内含 (或者通过引用一个 JavaScript 文件而加载)
如下内容:
var foo = 42;
console.log(foo);
这段代码很明显会让控制台输出 42。不过因为代码并不是放到一个函数里面去执行的,因此其执行的上下文就会是全局
的那个。因此,变量就会被附加到 window 对象上。这就意味着 window.foo 的值也会是 42。
这样是挺危险的,因为你可以把已经存在的全局变量给覆盖掉:
function print () {
// do something
}
print();
当执行 window.print (或者只是执行 print) 的时候, 它不会打开打印弹窗,因为我们已经将原生的打印弹窗逻辑给覆盖掉
了。
解决这个问题的方案相当简单; 我们需要一个会在定义后立即被调用到的闭包函数, 如下所示:
// Declare an anonymous function
(function () {
var foo = 42;
console.log(window.foo);
// → undefined
console.log(foo);
// → 42
})();
//^ and call it immediately
或者你也可以选择将 window 以及其它全局的东西(例如 document)都作为参数传给那个函数(这样做也可能对性能会
有所提升):
(function (global, doc) {
global.setTimeout(function () {
doc.body.innerHTML = "Hello!";
}, 1000);
})(window, document);
因此你得使用闭包函数来避免创建出什么全局的东西来。注意在这里因为要专注于代码本身,所以我不会在后面的代码片
段中使用闭包函数。
提示: browserify 是另外一种避免创建全局变量的方式。它采用了你在 Node.js 同样会用到的 require 函数的方式。
顺便说一下, Node.js 会自动将你的文件封装进函数里面。它们看起来先下面这样:
(function (exports, require, module, __filename, __dirname) {
// ...
因此,如果你认为 require 函数式全局的,好吧,并不是。它无非就是一个函数的参数。
你知道吗 你知道吗?
因为 window 对象包含了所有的全局变量,又因为它自己也是全局的,因此 window 自己内部也引用了它自己: