前端开发规范文档

一、HTML规范:

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

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

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

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

// 不推荐


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++) {

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • 一、HTML规范: Javascript代码应该尽量放在.js格式的文件中,需要调用的时候在页面中以的形式包含进来...
    Leslie_2386阅读 554评论 0 0
  • Web前端开发规范文档 规范目的: 使开发流程更加规范化。 通用规范: TAB键用两个空格代替(WINDOWS下T...
    荞叶阅读 541评论 0 1
  • 基本准则 符合web标准,html语义化;html,css,JavaScript分离;代码简洁有序,尽可能减少冗余...
    喵呜君阅读 771评论 0 1
  • 一.规范目的 使开发流程更加规范化。 二.通用规范 TAB键用两个空格代替(WINDOWS下TAB键占四个空格,L...
    overflow_hidden阅读 2,408评论 0 0
  • 我的一段友谊死在了“网络传销”―― 这下这篇文章只是想从自己的角度谈谈网络传销的危害,因为就在之前不久,被曾经好...
    金毛狗子阅读 509评论 3 2