上一节:
下一节:

  JavaScript 最佳实践

  • JavaScript最佳实践

    避免全局变量，避免new，避免==，避免eval()

  • 避免使用全局变量

    最大限度地减少全局变量的使用。这包括所有数据类型，对象和函数。全局变量和函数可以被其他脚本覆盖。改为使用局部变量，并学习如何使用闭包。闭包在函数章节还有详细介绍。
    函数中使用的所有变量都应声明为局部变量。必须使用var关键字声明局部变量，否则它们将成为全局变量。
    严格模式不允许未声明的变量。
    将所有声明放在每个脚本或函数的顶部是一种很好的编码实践。
    • 清理代码变量
    • 提供单个位置来查找局部变量
    • 更容易避免不需要的（隐含的）全局变量
    • 减少不必要的重新声明的可能性
    // 一开始就声明
var firstName, lastName, price, discount, fullPrice;

// 之后使用
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;
    这也适用于循环变量： 
    // 一开始就声明
var i;

// 之后使用
for (i = 0; i < 5; i++) {
    默认情况下，JavaScript将所有声明移到顶部(变量提升)

  • 永远不要声明数字对象，字符串对象或布尔对象

    始终将数字，字符串或布尔值视为原始值。不是对象。将这些类型声明为对象，会降低执行速度，并产生令人讨厌的副作用： 
    var x = "John";             
var y = new String("John");
(x === y) // 是false，因为x是一个字符串，y是一个对象。
    尝试一下
    甚至更糟： 
    var x = new String("John");             
var y = new String("John");
(x == y) // 是错误的，因为你无法比较对象。
    尝试一下

  • 不要使用new创建对象

    • 用{}而不是new Object()
    • 用""而不是new String()
    • 用0而不是new Number()
    • 用false而不是new Boolean()
    • 用[]而不是new Array()
    • 用/()/而不是new RegExp()
    • 用function (){}而不是new Function()
    var x1 = {};           // 新对象
var x2 = "";           // 新的原始字符串
var x3 = 0;            // 新的原始数字
var x4 = false;        // 新的原始布尔值
var x5 = [];           // 新的数组对象
var x6 = /()/;         // 新的正则表达式对象
var x7 = function(){}; // 新函数对象
    尝试一下

  • 小心自动类型转换

    请注意，数字可能会被意外转换为字符串或NaN（Not a Number）。JavaScript是弱类型语言。变量可以包含不同的数据类型，变量可以更改其数据类型： 
    var x = "Hello";     // typeof x 是字符串
x = 5;               // 将typeof x更改为数字
    尝试一下
    在进行数学运算时，JavaScript可以将数字转换为字符串： 
    var x = 5 + 7;  // x.valueOf（）为12，typeof x为number
var x = 5 + "7";     // x.valueOf（）是57，typeof x是一个string
var x = "5" + 7;     // x.valueOf（）是57，typeof x是一个string
var x = 5 - 7;       // x.valueOf（）是-2，typeof x是一个number
var x = 5 - "7";     // x.valueOf（）是-2，typeof x是一个number
var x = "5" - 7;     // x.valueOf（）是-2，typeof x是一个number
var x = 5 - "x";     // x.valueOf（）是NaN，typeof x是number
    尝试一下
    从字符串中减去字符串，不会生成错误但返回NaN（Not a Number）： 
    "Hello" - "Dolly"    // 返回 NaN
    尝试一下

  • 使用===比较

    ==比较操作总是比较之前转换（匹配类型）。===运算符将值和类型进行对比： 
    0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false
    尝试一下

  • 使用参数默认值

    如果使用缺少的参数调用函数，则将缺少的参数的值设置为 undefined。undefined值可能会破坏您的代码。为参数分配默认值是一个好习惯。 
    function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}
    尝试一下
    ECMAScript 2015允许函数调用中的默认参数： 
    function (a=1, b=1) { // function code }

  • 使用默认值结束您的switch

    总是使用一个default结束你switch。即使你认为没有必要。 
    switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}
    尝试一下

  • 避免使用eval()函数

    eval()函数用于将文本作为代码运行。几乎在所有情况下，都没有必要使用它。因为它允许运行任意代码，所以它也代表了安全问题。
上一节:
下一节: