最新的Web开发教程
 

JavaScript最佳实践

❮上一页 下一页章❯

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

避免全局变量

尽量少使用全局变量。

这包括所有的数据类型，对象和功能。

全局变量和函数可以被其他脚本覆盖。

使用局部变量代替，并学习如何使用闭包 。

始终声明局部变量

在函数中使用的所有变量应声明为局部变量。

局部变量必须在声明var关键字，否则会成为全局变量。

严格模式不允许未声明的变量。

在最前的声明

这是一个很好的编码习惯把所有的声明在每个脚本或函数的顶部。

这会：

  • 给予更清晰的代码
  • 提供一个单一的地方去寻找局部变量
  • 使其更容易避免不必要的（隐含的）全局变量
  • 减少不必要的重新声明的可能性
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

这还要为循环变量：

// Declare at the beginning
var i;

// Use later
for (i = 0; i < 5; i++) {

默认情况下，JavaScript的移动所有声明顶端（JavaScript的提升）。

初始化变量

这是一个良好的编码习惯，当你声明它们初始化变量。

这会：

  • 给予更清晰的代码
  • 提供一个地方初始化变量
  • 避免不确定的值
// Declare and initiate at the beginning
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

初始化变量提供的预期用途的想法（和预期的数据类型）。

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

始终将数字，字符串或布尔值作为原始值。 不作为对象。

声明这些类型为对象，减慢执行速度，并产生讨厌的副作用：

例

var x = "John";             
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
试一试»

或者更糟：

例

var x = new String("John");             
var y = new String("John");
(x == y) // is false because you cannot compare objects.
试一试»

不要使用new Object()

  • 使用{}而不是new Object()
  • 使用""而不是new String()
  • 使用0 ，而不是new Number()
  • 使用false ，而不是new Boolean()
  • 使用[]而不是new Array()
  • 使用/()/ ，而不是new RegExp()
  • 使用function (){}而不是new Function()

例

var x1 = {};           // new object
var x2 = "";           // new primitive string
var x3 = 0;            // new primitive number
var x4 = false;        // new primitive boolean
var x5 = [];           // new array object
var x6 = /()/;         // new regexp object
var x7 = function(){}; // new function object
试一试»

谨防自动类型转换的

要注意的是号码可以不小心将它转换为字符串或NaN （不是数字）。

JavaScript是弱类型。 变量可以包含不同的数据类型，和可变可以改变它的数据类型：

例

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number
试一试»

在做数学运算，JavaScript可以数字转换为字符串：

例

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number
试一试»

减去一个字符串的字符串，不会产生错误，但返回NaN （不是数字）：

例

"Hello" - "Dolly"    // returns NaN
试一试»

使用===比较

在==比较操作总是比较之前转换（匹配类型）。

该===值和类型的运营商的力量对比：

例

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false
试一试»

使用默认参数

如果一个函数被调用了失踪的说法，缺少的参数的值设置为undefined 。

未定义值可以破坏你的代码。 这是默认值分配给参数的好习惯。

例

function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
试一试»

了解更多关于函数的参数和参数的功能参数

结束您与默认设置开关

最后总是用默认的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()函数用来运行文本代码。 在几乎所有的情况下，它不应该是必要使用它。

因为它允许运行任意代码，它也代表一个安全问题。


❮上一页 下一页章❯