JavaScript常用代码书写规范的超全面总结

这篇文章旨在全面介绍JavaScript常用代码的书写规范，通过推荐和不推荐的代码示例，让大家更直观地了解如何遵循最佳实践。在编写JavaScript代码时，我们应牢记古老的原则：“能做并不意味着应该做”。接下来，我们将重点关注几个关键的编码规范。

一、避免全局命名空间污染

为了预防全局命名空间的污染，我们应该将代码包裹在一个立即执行的函数表达式（IIFE）里，形成一个独立的模块。这样可以确保我们的代码在全局命名空间中的变量和函数不会与其他代码发生冲突。

推荐示例：

```javascript

;(function(window){

'use strict';

var x = 10, y = 100;

console.log(window.x + ' ' + window.y);

}(window));

```

二、关于立即执行函数

推荐示例：

```javascript

;(function($, window, document, undefined){

'use strict';

var x = 10, y = 100, c, elem = $('body');

console.log(window.x + ' ' + window.y);

$(document).on('click', function(){});

if(typeof c === 'undefined'){

// 你的代码

}

}(jQuery, window, document));

```

三、启用严格模式

严格模式可以帮助我们捕获更多的错误，使代码更加健壮和快速。在ECMAScript 5中，我们可以在整个脚本或单独的方法中启用严格模式。为了不影响其他第三方类库，推荐在独立的立即执行函数中应用严格模式。

推荐示例：

```javascript

(function(){

'use strict';

});

```

四、合理的变量声明

对于所有的变量声明，我们应该使用var关键字。如果不指定var，在严格模式下会报错。在同一个作用域内，应尽可能用一个var声明多个变量，用逗号隔开。这样可以使代码更加清晰和易于维护。

一、函数声明中的变量赋值

原先的代码示例展示了如何在函数内部声明变量。经过改进，可以使其更简洁明了：

不推荐：

```javascript

function myFun(){

x=5;

y=10;

}

```

推荐理由：建议使用 var 来声明变量，同时可以将声明和赋值合并为一行以提高可读性。推荐如下：

```javascript

function myFun(){

var x = 5, y = 10; // 简洁明了地声明并赋值变量

}

```

二、使用严格比较操作符 === 进行类型判断

对于使用严格比较操作符 === 的重要性，我们可以这样描述：

JavaScript 中的类型转换有时会造成意想不到的困扰。为了确保类型安全，建议使用 === 操作符进行精确比较。例如，当处理不同类型的值时，避免自动类型转换带来的错误结果。以下是推荐的做法：

不推荐（可能导致意外的类型转换）：

```javascript

一、关于数组减一

当我们处理数组时，有时会遇到减一操作。如果不幸的是，数组中的某个元素减一后变成了 NaN（不是一个数字），这时就会引发一系列的问题。因为在数学运算中，NaN 不等于任何东西。如果我们的代码依赖于这种运算的结果，必须确保对 NaN 进行妥善处理。否则，可能会导致程序出现未预期的行为。想象一下，如果在一个名为 `THINGS_TO_EAT` 的变量中存储了数组减一的结果，而这个结果是 NaN，那么最终的结果将是 `die()` 函数执行后的返回值赋给了 `THINGS_TO_EAT`。这是一个潜在的陷阱，编写代码时务必要留意。

二、语句块内的函数声明

在 ECMAScript 5 的严格模式下，是不允许在语句块内声明函数的。函数应该在作用域的顶层声明。但如果你必须在某个条件下声明函数，你可以将函数声明转化为函数表达式并将其赋值给一个变量。例如，使用 `var foo = function() {}` 而不是 `function foo() {}`。后者在严格模式下是不被允许的。

三、避免使用 eval 函数

eval() 函数的使用总是充满风险且不清晰。它可能会引发各种安全问题，因此总是存在更好的替代方案来编写你的代码。尽量避免使用 eval 函数，保持代码的清晰和安全。

四、数组和对象字面量

推荐使用数组和对象字面量来代替构造器。使用数组构造器时很容易在参数上犯错，导致数组长度出乎意料地变化。为了避免这种情况，我们应选择更直观、更清晰的数组字面量。而对于对象，尽管构造器不会产生类似的问题，但为了代码的一致性和可读性，我们也应该优先使用对象字面量。

五、三元条件判断（if 的快捷方法）

三元操作符是一种快捷的 if 判断方式。在简单的场景下，我们可以使用它来分配或返回语句，使代码更加简洁。对于复杂的场景，过长的三元操作符会使代码难以阅读和理解。当遇到复杂的条件判断时，还是推荐使用传统的 if 语句。适度使用三元操作符，避免使代码过于复杂和混乱。JavaScript代码书写规范：提升代码质量与效率的建议

在JavaScript开发中，遵循良好的代码书写规范不仅能提高代码的可读性和可维护性，还能提升开发效率。以下是一些关键的JavaScript代码书写规范建议。

一、条件判断

在条件判断时，推荐使用三元运算符代替传统的if-else结构，以提高代码简洁性。例如：

不推荐：

```javascript

if (x === 10) {

return 'valid';

} else {

return 'invalid';

}

```

推荐：

```javascript

return x === 10 ? 'valid' : 'invalid';

```

二、循环优化

在循环中，为了提高代码执行效率，推荐使用变量存储数组长度，避免在每次循环中重复计算数组长度。例如：

不推荐：

```javascript

for (var i = 0; i < arr.length; i++) { }

```

推荐：

```javascript

for (var i = 0, len = arr.length; i < len; i++) { }

```三、DOM操作优化

频繁的DOM操作可能导致性能问题。为了提高性能和代码的整洁易维护性，建议使用变量存储DOM元素引用，避免重复查询。例如：使用jQuery时：

不推荐：

```javascript