ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 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); ... ~~~