前端组队“打怪”规范

编码规范

缩进

统一使用一个tab进行缩进,一个tab规定使用4个字符。

语句

1
2
3
4
5
6
7
var i,
len;
for (i=0, len=10; i < len; i++) {
// code
}

return (size > 0 ? size : defaultSize);

注意,后跟一个空格,var申明对象的格式,和语句间的空格。

函数和变量

函数和变量的命名,选用的是 camelCase(驼峰) 规则。

  • 通常变量开头为 noun(名词) ,这是为了能与函数区分开。
  • 函数命名开头为 verb(动词)

一些例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Good 
var count = 10;
var myName = "Nicholas";
var found = true;
// Bad: Easily confused with functions
var getCount = 10;
var isFound = true;
// Good
function getName() {
return myName;
}
// Bad: Easily confused with variable
function theName() {
return myName;
}

私有变量和方法

私有成员,建议以_开头,如下:

1
2
3
4
5
6
var _private,
public;

function getPublic() {}

function _getPrivate() {}

构造函数

通常构造函数使用 Pascal case命名规范,和驼峰命名很相似,不同点在于首字母是大写的。开头单词也应该是名词,这样能区别于,变量和函数的命名。

1
2
3
4
5
6
7
function Person() {
this.name = 'Jeffrey Yu',
this.sex = 'unknow',
this.age = 'unknow'
}

var one = new Person();

Strings

在JavaScript里面可以使用 single quotes(‘单引号) 或者 double quotes(“双引号) 使用哪种纯属个人喜好,比如我同时在开发back-end和front-end,一般会选用 double quotes。
字符串的换行连接

1
2
3
// Good 
var longString = '<div class="awesome"><h2>团队打怪</h2></div> ' +
'<section>效率才高</section>';

字符串统一在JS中使用'单引号的形式。

常量

常量延用 C 语言的规范,通过 UPPERCASE(大写)underscores(下划线_) 来组合命名。

1
var MAX_COUNT = 10;

代码长度

建议一行代码长度不超过80字符

项目规范

职责单一

一个js文件应该是一个最小逻辑功能组件,不要担心文件太多,部署的时候打包就行。

项目结构

NgStructure
左边的是以type进行分类,右边的是以domain,实际开发可以使用混合的形式,在最外层,使用domain风格,内层使用type风格,如下图:
ng_structure

文件命名

一般性文件

一般性文件,如模板、视图等,建议命名格式为:{module}.<{module type}>.{file type}如:

1
2
3
4
5
// directives 或 templates 目录内
contact-detail.tpl.html

// views内
contact-list.html

没有标明type,像contact-list.html就是一个完整的视图,而不是一个模板组件,完整视图中包括多个组件或者视图。

功能性文件

功能性文件,如controller、service、directive等,在type结构下,建议以其功能和使用特征来命名,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// controllers
// |-ContactCtrl.js
angular.module('app',[])
.controller('ContactCtrl')

// services
// |-ContactService.js
angular.module('app',[])
.factory('ContactService')

// models
// |-ContactModel.js
angular.module('app',[])
.factory('ContactModel')

// filters
// |-reverseFilter.js
// filter较特殊,在注入使用的时候是这样`reverseFilter`,在页面使用的时候
// 是这样<div ng-repeat="contact in contacts | reverse">
angular.module('app',[])
.filter('reverse')

// directives
// |-contactList.js
// directive较特殊,需要在html中使用,开头必须小写,使用如<div contact-list>
// 连接符定义时以大写代替。
angular.module('app',[])
.directive('contactList')

注意文件夹多数以复数的形式命名。

项目风格

项目风格的选择,我推荐johnpapa写的Angular Style Guide,其中比较重要的一点是,隔离scope,在开始写angular项目的时候,往往把所有的属性和方法都挂在scope下,而这个scope经常是传递给子scope,很多时候子scope根本没必要访问到父域中的属性和方法,有时候还有可能污染到父域中的东东,所以这里强烈推荐,controller以如下的方式使用:
index.html

1
2
3
<div ng-controller="CustomerCtrl as customer">
{{customer.user.name}}
</div>

controller.js

1
2
3
4
5
function CustomerCtrl() {
var vm = this;
vm.user = {};
vm.user.name = 'Jeffrey Yu';
}

后记

此文章是特定环境下的产物,只供参考。