前端开发规范1（js规范）

最近整理了前端开发规范，主要分成三个部分js编写规范，html编写规范，css编写规范。

这里先介绍我整理的js开发规范之js语言规范：

JavaScript语言规范

变量

声明变量必须加上 var 关键字。

常量

常量的形式如:NAME_AAA ,即使用大写字符, 并用下划线分隔。

分号

总是使用分号。如果仅依靠语句间的隐式分隔, 有时会很麻烦. 你自己更能清楚哪里是语句的起止。

块内函数声明

不要在块内声明一个函数，由于兼容性问题 不要写成:

  if (x) {
     function foo() {}
  }

如果非要写的话，应写成

if (x) {
     var fn = function foo() {}
}

异常

可以使用，你在写一个比较复杂的应用时, 不可能完全避免不会发生任何异常. 大胆去用吧。

自定义异常

有时发生异常了, 但返回的错误信息比较奇怪, 也不易读. 虽然可以将含错误信息的引用对象或者可能产生错误的完整对象传递过来, 但这样做都不是很好, 最好还是自定义异常类, 其实这些基本上都是最原始的异常处理技巧. 所以在适当的时候使用自定义异常。

标准特性

最大化可移植性和兼容性, 尽量使用标准方法而不是用非标准方法, (比如, 优先用string.charAt(3) 而不用 string[3] , 通过 DOM 原生函数访问元素, 而不是使用应用封装好的快速接口.

封装基本类型

不允许没有任何理由去封装基本类型。

不推荐：

var x = new Boolean(false);
if(x) {
    alert('hi'); // shows 'hi'
}

推荐:

var x = Boolean(0);
if(x) {
    alert('hi'); // this will never be alerted
}
typeof Boolean(0) === 'boolean'; // true
typeof new Boolean(0) ===  'object'; // true

闭包

可以使用，但是注意循环引用和内存泄露问题 不推荐，内存泄露：

function foo(el, a, b) {
    el.onclick = function() {/* user a and b*/};// 由于引用了dom结构，此函数在内存中不会被释放
}

推荐:

function foo(el, a, b) {
    el.onclick = bar(a, b);
}

function bar(a, b) {
    return function() {/* uses a and b here*/}
}

e v a l ( )

只用于解析序列化串 (如: 解析 RPC 响应)，eval() 会让程序执行的比较混乱, 当 eval() 里面包含用户输入的话就更加危险. 可以用其他更佳的, 更清晰, 更安全的方式写你的代码, 所以一般情况下请不要使用 eval().

w i t h ( )

不要使用

t h i s

仅在对象构造器, 方法, 闭包中使用。this 的语义很特别. 有时它引用一个全局对象(大多数情况下), 调用者的作用域(使用 eval时), DOM 树中的节点(添加事件处理函数时), 新创建的对象(使用一个构造器), 或者其他对象(如果函数被 call() 或 apply())。使用时很容易出错, 所以只有在下面两个情况时才能使用:

在构造器中
对象的方法(包括创建的闭包)中

f o r - i n 循环

只用于 object/map/hash 的遍历。 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。

不推荐：

function printArray(arr) {
    for(var key in arr) {
        print(arr[key]);
    }

    printArray([0, 1, 2, 3]); // this will work

    var a = new Array(10);
    printArray(a); // this will wrong

    a = document.getElementsByTagName('*');
    printArray(a); // this will wrong

    a = [0, 1, 2, 3];
    a.zak = 'wu';
    printArray(a); // this will wrong again

    a = new Array;
    a[3] = 3;
    printArray(a); // this is wrong again
}

推荐,使用最普通的for循环来处理array:

function printArray(arr) {
    var l = arr.length;
    for(var i = 0; i < 1; i++) {
        print(arr[i]);
    }
}

A r r a y 和 O b j e c t 直接量

使用 Array 和 Object 语法, 而不使用 Array 和 Object 构造器。 错误：

 // length is 3
var a1 = new Array(x1, x2, x3);

// length is 2
var a2 = new Array(x1, x2);

// 当x1的为自然数时，代码运行，当x1为非自然数时报错
var a3 = new Array(x1);

// length is 0 
var a4 = new Array();

推荐：

var a1 = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

修改内置对象的原型

千万不要修改内置对象, 如 Object.prototype 和 Array.prototype 的原型. 而修改内置对象, 如 Function.prototype 的原型, 虽然少危险些, 但仍会导致调试时的诡异现象. 所以也要避免修改其原型。

Table of Contents