# JavaScript 规范
## 目的
遵守公共一致的编码标准能帮助团队确保代码的质量、减少Bug和容易维护。希望大家共同遵守。
>[info] 在一致的环境下,团队协作中有更高的效率,团队的成员可以减少犯错的机会
>[info] 程序员可以方便的了解其他人的代码,弄清程序的状况,就和看自己的代码一样
## IDE
使用好一款好的编辑器将提升更多的工作效率,比且使用相同的编辑器能减少更多的相容性问题。推荐使用以下两款编辑器:
`Adobe Brackets` `Sublime Text`
![](https://box.kancloud.cn/2016-08-17_57b3cb4043458.png)
![](https://box.kancloud.cn/2016-08-17_57b3cb405b1ef.png)
## 文件
### 命名
统一使用小写字母配合有意义的单词进行命名,可使用“-”(减号)进行分隔单词或以`v`开始的版本号。
`meizu.js` `meizu.min.js` `tools-v1.2.min.js`
### 编码
所有文件统一使用UTF-8无BOM头文件编码。
![](https://box.kancloud.cn/2016-08-17_57b3cb407257a.png)
## 通用规范
### 缩进
约定使用4个空格来进行缩进,注意调整编辑器的设定。
### 空行
* 函数声明之间
~~~
function say() {
...
}
function hello() { ... }
~~~
* 流程语句之间
~~~
if (1 + 1 == 2) {
...
}
for (var i = 1; i < 10; i++) { ... }
~~~
* 不同逻辑之间
* 部分注释之外
* 较大的程序体之间
### 引号
优先使用`"`(双引号)来标识字符串,可嵌套`'`(单引号)配合使用,也可使用`\`(正斜线)进行转义使用。
~~~
var str = "hello world";
var $abc = $(".abc");
var a = "<a href=\"http://www.baidu.com\">baidu</a>";
~~~
### 空格
* 二元运算符左右
~~~
var count = i + k * s;
var str || "abc";
~~~
* 三元运算符左右
~~~
var url = url ? url + "/abc" : url;
~~~
* 流程语句条件左右
* 匿名函数参数左右
* 内置关键字右边
* `;`(分号)右边
* `:`(冒号)右边
~~~
if (condition) {
...
} else if () {
...
}
for (var i = 1; i < 10; i++) {
...
}
switch (variable) {
case 1:
...
}
function (id, name) {
...
}
var obj = {name: "hello world!"};
~~~
* `,`(逗号)右边
~~~
var variable, one = 1, a, b;
get(url, data, callback, failCallback);
~~~
* 有函数名的函数参数右边
~~~
function funName(id, name) {
...
}
~~~
* 为了对齐而使用的连续空格
~~~
var name = "";
var age = 12;
var sex = 1;
var phone = "135...";
~~~
### 注释
#### 行注释
使用`//`接一个`空格`写上下一行或者下一块逻辑的说明,行尾注释注意在`//`前加上一个`空格`。
~~~
// 当前Url
var currentUrl;
~~~
#### 函数注释
使用`/**`开始`*/`结束,最上面是函数的作用说明,换行后加上参数的注释与返回的数据注释,注意`*`(星号)之间的对齐。
~~~
/**
* 获取验证码
*
* @param {function} callback 成功回调函数
* @param {function} failCallback 失败回调函数
* @return {string} 验证码Url
*/
function getVerifyCode(callback, failCallback) {
var url = "/index/captcha";
var data = {refresh: 1};
return _get(url, data, callback, failCallback);
}
~~~
#### 块注释
用于区别于其他逻辑的一大段代码块使用的注释,`/*`和`*/`之间左右各用1个`空格`和5个`-`(减号)拼接文字组成。
~~~
/* -----tools----- */
/* -----goods/index----- */
/* -----member/index/index----- */
~~~
## 变量
### 命名
* 使用小驼峰式命名法(lower camel case)
* 使用有意义的英文单词
* 私有的变量使用“_”(下划线)开始
>[info] * 作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
>[info] * 循环变量可以简写,比如:i,j,k等。
~~~
name currentUrl _csrf failCallback
~~~
### 声明与作用域
* 使用`var`关键词声明局部变量
* 尽量确定变量的作用域而使用`var`关键词来声明
* 声明变量的同时应尽量设定变量的类型
* 类似的变量可放在同一行进行声明
~~~
var list = [];
var data = {};
var name, sex, age = 10;
~~~
### 常用数据类型
JavaScript中有字符串、数字、布尔、数组、对象、Null、Undefined几种数据类型。
>[info] JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
#### 字符串
使用`"`(双引号)来声明字符串变量,明确自己需要的变量类型。
正确的
>[success] `var string = "hello world";`
>[success] `var mobile = "13012345678";`
>[success] `var skuKey = "12_25_40";`
>[success] `var skuKey = "";`
错误的
>[danger] `var skuKey;` 因为当前实际声明的是`sku = undefined`在某些具体判断中会出现预想之外的情况。
#### 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
>[info] 极大或极小的数字可以通过科学(指数)计数法来书写。
~~~
var number = 123456;
var number = 1.23;
~~~
#### 布尔
布尔(逻辑)只能有两个值:`true` 或 `false`,应多使用`is`前缀组合变量名使用。
~~~
var isLogin = false;
var isFlag = true;
~~~
#### 数组
约定使用`[]`(左右中括号)来声明一个空数组,根据代码的长度可写在同一行也可换行,换行写请注意最后一个元素需要加上`,`(逗号)。
>[info] 在JavaScript中数组只能用数字型下标。
~~~
var music = [];
music[1] = "";
music[2] = "";
var ids = [1, 2, 3];
var complex = [1, 2, ["2-1", "2-2", ["2-2-1"]], 3];
var data = [
"ceui",
"测试",
];
~~~
#### 对象
约定使用`{}`(左右花括号)来声明一个空对象,根据代码的长度可写在同一行也可换行,换行写请注意最后一个元素需要加上`,`(逗号)。
>[info] 对象不止可以用`.`(点)来操作属性,还可使用`[]`(左右中括号)数组的方式来操作属性。
~~~
var object = {};
object.title = "";
alert(object.title);
alert(object[title]);
var music = {title: "aLiEz", author: "xxx"};
var movie = {
title: "",
author: "",
...,
};
~~~
#### Null与Undefined
#### 其他
时间类型
## 函数
### 命名
* 使用小驼峰式命名法(lower camel case)
* 使用有意义的英文单词
* 私有的函数使用“_”(下划线)开始
* 使用动词前缀表示一些行为的函数
~~~
function getList(goodsId) { ... }
function generateAlert(container, text, obj) { ... }
function _checkLogin() { ... }
function _post(a, b, c) { ... }
~~~
### 参数
> 与变量命名规范保持一致。
### 匿名与回调函数
匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染。在`()`里写入匿名函数后再写一个`()`表示声明一个匿名函数并执行。
~~~
function () { ... }
(function ($) { ... })(jQuery);
~~~
### 对象字面量(函数参数)
一个对象字面量就是包含在一对花括号中的0个或多个“名/值”对,可减少传参错误的发生。
~~~
function generateAlert(container, text, data) {
var oldData = {
container: container,
place: "append",
type: "info",
message: text,
...
};
// 合并对象,用户数据覆盖默认数据
var newData = $.extend({}, oldData, data);
...
}
generateAlert("alert", "hello world", {message: "hehe", type: "warning"});
~~~
### 面向对象书写方式
使用匿名函数进行封装,提高重用性。
~~~
(function ($) {
function api() {
}
api.prototype = {
init: function (domain, d) {
this.domain = "//" + domain;
this.d = d;
},
getList: function (id) {
...
},
...
}
// 注册到全局
window.api = new api;
})(jQuery);
var api = window.api;
api.init("api.shop.com", 10);
var list = api.getList(1);
...
~~~