前端开发规范文档

一、HTML规范:

Javascript代码应该尽量放在.js格式的文件中,需要调用的时候在页面中以的形式包含进来。Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码。

3,全局命名空间无法与IIFE:

总是将代码包裹成一个IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保代码不会轻易被其它全局命名空间里的代码所修改(第三方库,window 引用,被覆盖的未定义的关键字等等)。

// 不推荐


前端开发规范文档_第1张图片

varx=10,

y=100;

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

// 推荐

(function(log, w, undefined){

varx=10,

y=100;

console.log((w.x === undefined) +' '+ (w.y === undefined));

}(window.console.log,window));

无论何时,想要创建一个新的封闭的定义域,那就用IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。

所有脚本文件建议都从IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

不推荐

(function(){})();

推荐

(function(){}());

如果想引用全局变量或者是外层IIFE 的变量,可以通过下列方式传参:

(function($, w, d){

$(function() {

w.alert(d.querySelectorAll('div').length);

});

}(jQuery, window, document));

4,引号:

统一使用单引号(‘’),不使用双引号(“”)。这在创建 HTML 字符串非常有好处:

varmsg='This is some HTML

'

;

5,变量生命:

总是使用var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。驼峰命名法。

不推荐

x=10;

y=100;

推荐

varx=10,

y=100;

6,数组和对象字面量:

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

vara1=newArray(x1, x2, x3);

vara2=newArray(x1, x2);

vara3=newArray(x1);

vara4=newArray();

正因如此,如果将代码传参从两个变为一个,那数组很有可能发生意料不到的长度变化。为避免此类怪异状况,请总是采用更多可读的数组字面量。

推荐

vara= [x1, x2, x3];

vara2= [x1, x2];

vara3= [x1];

vara4= [];

对象构造器不会有类似的问题,但是为了可读性和统一性,我们应该使用对象字面量。

不推荐

varo=newObject();

varo2=newObject();

o2.a=0;

o2.b=1;

o2.c=2;

o2['strange key'] =3;

推荐

varo= {};

varo2= {

a:0,

b:1,

c:2,

'strange key':3

};

7,函数声明:

函数应在调用前进行声明,内部函数应在var 声明内部变量的语句之后声明,可以清晰地表明内部变量和内部函数的作用域。

此外,函数名紧接左括号'('之间,而右括号')'和后面的'{'之间要有个空格,以清楚地显示函数名以其参数部分,和函数体的开始。若函数为匿名 / 无名函数,则 function 关键字和左括号'('之间要留空格,否则可能误认为该函数的函数名为 function。

varinnerA=1;

functionoutF() {

varinnerA=2;

function_inf() {

alert(‘valueA=’+innerA);

}

_inF();

}

outF();

_inF();

8,语句块内的函数声明:

切勿在语句块内声明函数,在ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

if(x) {

functionfoo() {}

}

推荐

if(x) {

varfoo=function() {};

}

9,流程控制:

if、while、for、do语句的执行体总是用"{"和"}"括起来,即使在其结构体内只有一条语句

if(s==100) {

alert('shit!');

}

不要使用switch。switch 在所有的编程语言中都是个非常错误的难以控制的语句,建议用 if else 来替换它。

10,操作符:

(1)三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用10 行三元操作符把自己的脑子绕晕。

不推荐

if(x ===10) {

return'valid';

}else{

return'invalid';

}

推荐

returnx ===10?'valid':'invalid';

11,注释:

(1)文件注释

文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录

函数描述

文件版本、创建或者修改时间、功能、作者

/**

* @file Image.js

* @description 功能详细描述

*/

²函数或者类等都要添加头描述

/**

* 简述

*

* 功能详细描述

*

* @param arg1 参数1

* @param arg2 参数2,默认为0

* @return 看xxx是否成功

*/

function fooFunction (arg1, arg2) {

}

(2)操作注释

单行注释,写在代码上面

多行注释

/*

* 注释操作说明

*/

for( var i = 0; i < obj.lenght; i++) {

}

你可能感兴趣的:(前端开发规范文档)