1

概述

为提高团队协作效率,规范文件管理,方便项目后期维护,提高代码质量,特制订此文档,前端开发人员必须遵照本规范进行前台页面开发。

基本规范

sublime Text3请安装jshint插件以检查JS编写错误;
安装教程:使用lint进行语法及风格校验

异步加载文件命名

require.ensure([],function(){
    //异步加载内容
},'ensure/业务模块名_页面名_异步方法名_1')

引号
最外层统一使用单引号。

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

空行
以下几种情况需要空行:
变量声明后(当变量声明在代码块的最后一行时,则无需空行)
注释前(当注释在代码块的第一行时,则无需空行)
代码块后(在函数调用、数组、对象中则无需空行)
文件最后保留一个空行

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

变量声明
一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函数

无论是函数声明还是函数表达式,'('前不要空格,但'{'前一定要有空格;
函数调用括号前不需要空格;
立即执行函数外必须包一层括号;
不要给inline function命名;
参数之间用', '分隔,注意逗号后有一个空格

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
};

数组、对象

对象属性名不需要加引号;
对象以缩进的形式书写,不要写在一行;
数组、对象最后不要有逗号。

// not good
var a = {
    'b': 1
};

var a = {b: 1};

var a = {
    b: 1,
    c: 2,
};

// good
var a = {
    b: 1,
    c: 2
};

变量命名规范

标准变量采用驼峰式命名
ID在变量名中全大写
URL在变量名中全大写
Android在变量名中大写第一个字母
iOS在变量名中小写第一个,大写后两个字母
常量全大写,用下划线连接
构造函数,大写第一个字母
jquery对象必须以$开头命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');

前缀规范

s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;

例外情况:

1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
2:循环变量可以简写,比如:i,j,k等。

函数命名规范

统一使用动词或者动词[+名词]形式,例如:fGetVersion(),fSubmitForm(),fInit();涉及返回逻辑值的函数可以使用is,has等表示逻辑的词语代替动词。

如果有内部函数,使用__f+动词[+名词]形式,内部函数必需在函数最后定义。

对象方法实现
对象方法命名使用 f+对象类名+动词[+名词]形式;例如 fAddressGetEmail

事件响应函数
某事件响应函数命名方式为触发事件对象名+事件名或者模块名+触发事件对象名+事件名,例如:fDivClick(),fAddressSubmitButtonClick()

其它注意事项

  1. 所有命名最好使用英语表示。

  2. 所有变量名应该明确而必要,尽量避免不必要的容易混淆的缩写。

  3. netease.events.mouse.Handler,而不是 netease.events.mouse.MouseEventHandler。

  4. 对应的方法应该使用对应的动词,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

  5. 应该避免双重否定意义的变量,例如:bIsNotError, bIsNotFound,不可取。

  6. 变量应该在最小的范围内定义,并尽可能的保持最少的活动时间。

  7. 循环变量最好在循环中定义。例如for(var i=0,m=10;i++)

  8. 尽量避免复杂的条件语句,可以使用临时的boolean变量代替。

  9. 一定要避免在条件中执行语句,例如:if((i=3)>2){},不可取。

  10. 不要在代码中重复使用相同意义的数字,用一个变量代替


jeanChueng
174 声望30 粉丝

优秀的设计师,就像是百花齐放的花丛中,最引人瞩目的一朵花;伟大的艺术家,就像是寸草不生的山顶上,供人仰望的一棵树。