JavaScript最佳实践：帮你提升代码质量

每天学一些新东西可以让一个理性之人走上不凡之路。而作为开发人员，不断的学习新东西则是我们工作的一部分, 不论这些新东西是不是来源于积极的学习经验。

在本篇教程中，我将指出一些重要的 JavaScript 最佳实践，让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧!

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

声明变量是一件很有趣的事情。有时候即使你不想这样做，但也有可能会定义出全局变量。在如今的浏览器中，全局变量都被存储在 window 对象中。而因为有许多的东西都在那个里面，所以你有可能把一些默认值都给覆盖掉了。

假设你有一个 HTML 文件，里面包含了一个 <script> 标记，而这个标记内含 (或者通过引用一个 JavaScript 文件而加载) 如下内容:


1

2

var foo = 42;

console.log(foo);

这段代码很明显会让控制台输出 42。不过因为代码并不是放到一个函数里面去执行的，因此其执行的上下文就会是全局的那个。因此，变量就会被附加到 window 对象上。这就意味着 window.foo 的值也会是 42。

这样是挺危险的，因为你可以把已经存在的全局变量给覆盖掉:


1

2

3

4

function print () {

   // do something

}

print();

当执行 window.print (或者只是执行 print) 的时候, 它不会打开打印弹窗，因为我们已经将原生的打印弹窗逻辑给覆盖掉了。

解决这个问题的方案相当简单; 我们需要一个会在定义后立即被调用到的闭包函数, 如下所示:


1

2

3

4

5

6

7

8

9

// Declare an anonymous function

(function () {

   var foo = 42;

   console.log(window.foo);

   // → undefined

   console.log(foo);

   // → 42

})();

//^ and call it immediately

或者你也可以选择将 window 以及其它全局的东西（例如 document）都作为参数传给那个函数（这样做也可能对性能会有所提升）:


1

2

3

4

5

(function (global, doc) {

  global.setTimeout(function () {

     doc.body.innerHTML = "Hello!";

  }, 1000);

})(window, document);

因此你得使用闭包函数来避免创建出什么全局的东西来。注意在这里因为要专注于代码本身，所以我不会在后面的代码片段中使用闭包函数。

提示: browserify 是另外一种避免创建全局变量的方式。它采用了你在 Node.js 同样会用到的 require 函数的方式。

顺便说一下, Node.js 会自动将你的文件封装进函数里面。它们看起来先下面这样:


1

2

(function (exports, require, module, __filename, __dirname) {

// ...

因此，如果你认为 require 函数式全局的，好吧，并不是。它无非就是一个函数的参数。

你知道吗?

因为 window 对象包含了所有的全局变量，又因为它自己也是全局的，因此 window 自己内部也引用了它自己:


1

2

window.window.window

// => Window {...}

这是一位 window 对象是一个循环引用对象。下面展示了如何创建这样的一个对象:


1

2

3

4

5

6

7

// Create an object

var foo = {};

// Point a key value to the object itself

foo.bar = foo;

// The `foo` object just became a circular one:

foo.bar.bar.bar.bar

// → foo

或者，为了展示你对 JavaScript 的无限的热爱之情，你可以当回发烧友，代码如下:

是的，你可以几乎没完没了(也有可能会等到浏览器崩溃)的展开这个对象。

　2. 好的 use strict 使用习惯

要严格使用 use strict! 这无非就是在你的代码中加了一行，给你的脚本增加更多的小把戏。

例如:


1

2

3

4

5

6

7

8

// This is bad, since you do create a global

without having anyone to tell you

(function () {

   a = 42;

   console.log(a);

   // → 42

})();

console.log(a);

// → 42

使用 use strict, 你就可以获取到更多一点的错误信息:


1

2

3

4

5

(function () {

   "use strict";

   a = 42;

   // Error: Uncaught ReferenceError: a is not defined

})();

你可能想知道为什么可以将 "use strict" 放在封装函数的外面。这的确是可以的，不过这样它就会被应用到全局。这还不是太坏，但是如果有代码是来自于其它的库，或者你要把所有的东西都打包到一个文件里面去的话，这样做就会有影响的。

　3. 严格相等

这个比较简短。如果你在 JavaScript 中 (像其它的编程语言中那样)使用 == 来比较 a 和 b,可能会发现其运行的方式有点怪: 如果你有一个字符串和一个数字如下，它们会相等 (==):


1

2

"42" == 42

// → true

对于一些明显的缘故 (例如验证操作), 最好就是使用严格等于(===):


1

2

"42" === 42

// → false

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

根你需要做的事情，你可以使用逻辑操作符来让代码更简短。

取默认值


1

2

3

4

5

6

7

8

9

10

11

12

"" || "foo"

// → "foo"

undefined || 42

// → 42

// Note that if you want to handle 0 there, you need

// to check if a number was provided:

var a = 0;

a || 42

// → 42

// This is a ternary operator—works like an inline 

if-else statement

var b = typeof a === "number" ? a : 42;

// → 0

不用拿 if 表达式来检查某些东西是不是为真的，你也可以简单地这样做:


1

2

3

expr && doSomething();

 

// Instead of:

1

2

3

if (expr) {

   doSomething();

}

如果你需要通过 doSomething(): 来决定返回的结果，这样做更酷:


1

2

3

function doSomething () {

   return { foo: "bar" };

}

1

var expr = true;

1

2

3

var res = expr && doSomething();

res && console.log(res);

// → { foo: "bar" }

你可能不会赞同我在这方面的看法，但像我说的这样做其实效果更理想。如果你并不想像这样来对你的代码进行混淆，但其实这就是那些 JavaScript 简化器实际会做的事情。

如果你来问我，我会说这样做虽然让代码更加简短了，但仍然是可读的。

　5. 对值的类型进行转化

有几种方法可以根据你的想法来进行转化。最常用的方式有如下这些:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

// From anything to a number

 

var foo = "42";

var myNumber = +foo; // shortcut for Number(foo)

// → 42

 

// Tip: you can convert it directly into a negative number

var negativeFoo = -foo; // or -Number(foo)

// → -42

 

// From object to array

// Tip: `arguments` is an object and in general you want 

to use it as array

var args = { 0: "foo", 1: "bar", length: 2 };

Array.prototype.slice.call(args)

// → [ 'foo', 'bar' ]

 

// Anything to boolean

/// Non non p is a boolean p

var t = 1;

var f = 0;

!!t

// → true

!!f

// → false

 

/// And non-p is a boolean non-p

!t

// → false

!f

// → true

 

// Anything to string

var foo = 42;

"" + foo // shortcut for String(foo)

// → "42"

 

foo = { hello: "world" };

JSON.stringify(foo);

// → '{ "hello":"world" }'

 

JSON.stringify(foo, null, 4); // beautify the things

// →

// '{

//    "hello": "world"

// }'

 

// Note you cannot JSON.stringify circular structures

JSON.stringify(window);

//  TypeError: JSON.stringify cannot serialize cyclic 

structures.

　6. 代码风格/风格指南

在新的项目中要让所有的文件都遵循相同的代码风格。对于现有的项目，就使用现有的代码风格, 除非你就只是决定要变一变它的风格(提示: 同你的搭档就此进行一下讨论)。甚至你要创建和记录你自己的代码风格，然后一直去遵循它。

现有的一些不同的代码风格如下:

　额外的福利小提示:

你应该记住的其它一些重要的 JavaScript 最佳实践就是那些能帮助你对代码进行格式化的工具。下面是其中的一些:

  • js-beautify: 美化你的代码
  • UglifyJS(2): 混淆/最小化你的代码
  • jshint: 检测 JavaScript 代码中的错误或者潜在问题
  • jscs: 可以配置的样式指南检测器

最后一个就是: 不要总是 console.log，要对你的代码进行调试。

祝你编程愉快!

来源：51CTO

时间： 2024-04-12 14:48:44

JavaScript最佳实践：帮你提升代码质量的相关文章

JavaScript 最佳实践：帮你提升代码质量_javascript技巧

每天学一些新东西可以让一个理性之人走上不凡之路.而作为开发人员,不断的学习新东西则是我们工作的一部分, 不论这些新东西是不是来源于积极的学习经验. 在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们.准备好去升级你的代码吧! 1. 避免对全局作用域的污染 声明变量是一件很有趣的事情.有时候即使你不想这样做,但也有可能会定义出全局变量.在如今的浏览器中,全局变量都被存储在 window 对象中.而因为有许多的东西都在那个里面,所以你有可能把一

三年0故障总结，提升代码质量的秘诀

该文章来自于阿里巴巴技术协会(ATA)精选文章. 个人经历 对我代码质量影响最大的是在一家外资企业,在这家公司我觉得有以下几个方面做的很不错. 团队编码风格统一 统一到什么程度? 不看代码作者,你很难区分代码是谁写的(在目前公司一些团队也能达到这个标准). 个人观点: 这样做有什么好处?团队中每个人阅读代码都很容易,减少很多沟通,维护成本( 代码阅读的次数远远大于变更的次数),并且心情非常愉悦.有人肯定觉得愉悦有点夸张,举个栗子: 有一些代码,如果不是由于与工作内容有关联,你是否有种这辈子都不情

加载 Javascript 最佳实践_javascript技巧

相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生.而这 35 条最佳实践中,对 Javascript 的加载顺序的要求是:Put Scripts at the Bottom.因为根据 HTTP/1.1 specification 看来,在同一时间加载两个文件是最理想的,而 Javascript 脚本会阻碍平行下载.Steve 说那是 2008 – 2009 那个时代用的.现在,加载 Javascri

15条JavaScript最佳实践小结_javascript技巧

本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部 我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加

如何从开发阶段提升代码质量，加速迭代发布？

 引言:一个 bug 被隐藏的时间越长,修复这个bug 的代价就越大.在<快速软件开发>一书中已引用了大量的研究数据指出:最后才修改一个 bug 的代价是在 bug 产生时修改它的代价的10倍.        很多开发工程师很不喜欢测试的工作,他们更希望能够开发新功能,但在日常研发过程中,测试的重要性想必也不言而喻.单测集成系统,可以从开发阶段提高质量,加快代码发布.        云效平台的单测集成功能,是通过对项目仓库地址(git.svn),进行代码变更监控,然后得到静态扫描,单测用例执行

《Web前端开发最佳实践》——第2章 高效Web前端开发2.1　前端代码的结构组织和文件的命名

第2章 高效Web前端开发 本章首先将概述Web前端开发中的相关最佳实践,如前端代码文件组织.前端代码重构.前端框架的选择,以及前端开发过程中实用的开发辅助工具等,帮助读者提高前端开发的效率.好的开发方式在项目中会起到事半功倍的效果,并且可确保开发过程中的代码结构清晰,易维护.本章然后会介绍前端代码的基本命名规范和格式规范,良好的命名规范和规整的格式让代码看起来干净整洁,也体现了开发者良好的职业素养,应该说命名规范.整齐的格式不仅是开发过程中的一种约定,而且是程序员之间良好沟通的桥梁. 2.1

IDEA 常用快捷键最佳实践

IDEA 常用快捷键最佳实践 (1)自动提示代码(content assist) Ctrl+Shift+Space 自动补全代码 Ctrl+空格 代码提示 Ctrl+Alt+Space 类名或接口名提示 类似于eclipse的Alt+/   (2)优化import 导入 Ctrl+Alt+O 优化导入的类和包 类似于eclipse的Ctrl+Shift+O   (3)生成getter,setter方法 修改为Alt+Shift+S   (4)格式化代码 Ctrl+Alt+L  格式化代码   (

通过可视化数据分析提升测试质量

某位高人曾说过:日复一日地重复着既有的测试,然后被类似的Bug折磨得无可奈何,不如稍作停顿,分析总结找到Bug的源头,以除之.本篇文章我们就来聊聊如何通过可视化的数据进行分析,进而提升测试质量. 为了让产品的质量可度量.可视化,我们可以建立一些指标数据,以帮助我们发现产品质量的各种问题,比如:被测功能模块发现Bug太晚,某位开发同学的代码质量一直很低,某个功能总是在兼容性方面存在大量问题等.有了问题之后,我们就可以有针对性地进行改进,有的放矢,从而使得被测产品的质量逐步改善.以搜狗的项目为例,我

前端代码标准最佳实践：javascript篇

前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头.前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码. 本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript. 目前,Javascript已广