前端编码规范之JavaScript规范
-
JS文件名称规范
使用小写英文、-（-不能开头）组合成文件名。大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.js 不能通过 London.js 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.js 可以通过 London.js 或 london.js 访问。
你必须保持统一的风格，建议统一使用小写的文件名。 -
JS文件后缀规范
- 统一使用.js为文件后缀。
- 压缩文件以.min.js为文件后缀。
- 如有版本，需加上版本号，如：js-name-1.9.0.js。
-
JS格式规范
-
缩进：用两个空格来代替制表符（tab）。
这是唯一能保证在所有环境下获得一致展现的方法。（包含HTML和css）
-
空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格
– Example –
-js // 不推荐 var tax=0.20; var price=0.20+(10*10);// 推荐 var tax = 0.20; var price = 0.20 + (10 * 10);
-
-
语句规则
-
始终使用
;结束一行声明语句。}后面不要跟;– Example –
-js // 不推荐 var tax = 0.20 function fnName() {var price = 1 }// 推荐 var tax = 0.20; function fnName() {var price = 1; } -
对于数组和对象不要使用多余的
,（兼容IE）。– Example –
-js // 不推荐 var arr = [1,2,]; var person = {name: 'name',age: 20, }// 推荐 var arr = [1, 2]; var person = {name: 'name',age: 20 } -
,前不要空格，,后需空格。– Example –
-js // 不推荐 var arr = [1,2,]; var person = {name: 'name',age: 20, }// 推荐 var arr = [1, 2]; var person = {name: 'name',age: 20 } -
推荐行末
,，不推荐行首,。– Example –
-js // 不推荐 var foo = 1, bar = 2, baz = 3;var obj = {foo: 1, bar: 2, baz: 3 }// 推荐 var foo = 1,bar = 2,baz = 3;var obj = {foo: 1,bar: 2,baz: 3 } -
{前添加一空格，{后需换行，}独占一行– Example –
-js // 不推荐 function fnName(){var price = 1;}function fnName(){var price = 1;}function fnName() {var price = 1; }// 推荐 function fnName() {var price = 1; } -
:前不要空格，:后需空格– Example –
-js // 不推荐 var obj = {foo:1,bar:2,baz:3 }// 推荐 var obj = {foo: 1,bar: 2,baz: 3 } -
语句结构中的代码块要进行Tab缩进。
– Example –
-js // 不推荐 if(true) { var price = 10; } function fnName(){ var price = 1; }// 推荐 if(true) {var price = 10; } function fnName() {var price = 1; } -
参数与括号间是否有空格
-
参数与括号之间不要空格。
-
参数与参数之间
,前不要空格，,后需空一格。– Example –
-js // 不推荐 function fn( arg1, arg2 ) {// ... } if ( true ) {// ... }// 推荐 function fn(arg1, arg2) {// ... } if(true) {// ... }
-
-
每行代码字符小于 80
为了便于阅读每行字符建议小于数 80 个，
建议在 运算符、逗号或者括号后换行;
运算符处换行时，运算符必须在新行的行首– Example –
-js document.getElementById("demo").innerHTML = "Hello W3Cschool."; var result = number1 + number2 + number3+ number4 + number5; -
不同行为或逻辑的语句集，使用空行隔开
易于阅读。
-
-
变量名
建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。
- 区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；
- 长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；
- 命名应该是有意义的，看命知其意；
- 不能为JavaScript中的关键词、保留字全名；
- 切勿使用拼音，拼音首字母缩写；
- 前缀应当是名词
- 建议使用驼峰命名；
- 全局变量为大写；
– Example –
-js // 不推荐 var jiage = 10; var 1jiage = 10; var jia-ge = 10;// 推荐 var price = 10; var intPrice = 10; -
常量名
- 常量 (如 PI) 为大写，多单词以
_隔开；
– Example –
-js // 不推荐 const max_count = 10; const maxCount = 10;// 推荐 const MAX_COUNT = 10; - 常量 (如 PI) 为大写，多单词以
-
let 和 var
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。
在函数外声明的变量作用域是全局的：全局变量在 JavaScript 程序的任何地方都可以访问。
在函数内声明的变量作用域是局部的（函数内）：函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。-
JavaScript 块级作用域(Block Scope)
使用 var 关键字声明的变量，不具备块级作用域的特性，它在 {} 外依然能被访问到。
使用 let 关键字声明的变量，只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。– Example –
-js { var x = 2; } // 这里可以使用 x 变量//------------------------------------------------{ let x = 2; } // 这里不能使用 x 变量 -
重新定义变量
使用 var 关键字声明的变量，在块中重新声明变量也会重新声明块外的变量：
使用 let 关键字声明的变量，只在 let 命令所在的代码块 {} 内有效。– Example –
-js var x = 10; // 这里输出 x 为 10 { var x = 2;// 这里输出 x 为 2 } // 这里输出 x 为 2//------------------------------------------------var x = 10; // 这里输出 x 为 10 { let x = 2;// 这里输出 x 为 2 } // 这里输出 x 为 10 -
循环作用域
使用 var 关键字声明的变量，它声明的变量是全局的，包括循环体内与循环体外：
使用 let 关键字声明的变量，变量作用域只在循环体内，循环体外的变量不受影响。– Example –
-js var i = 5; for (var i = 0; i < 10; i++) {// 一些代码... } // 这里输出 i 为 10//------------------------------------------------let i = 5; for (let i = 0; i < 10; i++) {// 一些代码... } // 这里输出 i 为 5 -
在函数体内使用 var 和 let 关键字声明的变量，作用域都是 局部的。
-
在函数体外或代码块外使用 var 和 let 关键字声明的变量，作用域都是 全局的。
-
-
const 关键字
const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。
使用 const 定义的对象或者数组，其实是可变的。– Example –
-js // 创建常量对象 const car = {type:"Fiat", model:"500", color:"white"}; // 修改属性: car.color = "red"; // 添加属性 car.owner = "Johnson";// 创建常量数组 const cars = ["Saab", "Volvo", "BMW"]; // 修改元素 cars[0] = "Toyota"; // 添加元素 cars.push("Audi");//------------------------------------------------// 但是我们不能对常量对象重新赋值 const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"};// 错误const cars = ["Saab", "Volvo", "BMW"]; cars = ["Toyota", "Volvo", "Audi"];// 错误 -
函数名
-
区分大小写，允许包含字母、数字、下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；
-
长度应该尽可能的短，并抓住要点，尽量在函数名中体现出函数的功能；
-
不能为JavaScript中的关键词、保留字全名；
-
切勿使用拼音，拼音首字母缩写；
-
建议使用驼峰命名；
-
前缀应当为动词；
-
函数名常用的动词:
动词/说明 动词/说明 get 获取 set 设置 add 增加 remove 删除 create 创建 destory 移除 start 启动 stop 停止 open 打开 close 关闭 read 读取 write 写入 load 载入 save 保存 create 创建 destroy 销毁 begin 开始 end 结束 backup 备份 restore 恢复 import 导入 export 导出 split 分割 merge 合并 inject 注入 extract 提取 attach 附着 detach 脱离 bind 绑定 separate 分离 view 查看 browse 浏览 edit 编辑 modify 修改 select 选取 mark 标记 copy 复制 paste 粘贴 undo 撤销 redo 重做 insert 插入 delete 移除 add 加入 append 添加 clean 清理 clear 清除 index 索引 sort 排序 find 查找 search 搜索 increase 增加 decrease 减少 play 播放 pause 暂停 launch 启动 run 运行 compile 编译 execute 执行 debug 调试 trace 跟踪 observe 观察 listen 监听 build 构建 publish 发布 input 输入 output 输出 encode 编码 decode 解码 encrypt 加密 decrypt 解密 compress 压缩 decompress 解压缩 pack 打包 unpack 解包 parse 解析 emit 生成 connect 连接 disconnect 断开 send 发送 receive 接收 download 下载 upload 上传 refresh 刷新 synchronize 同步 update 更新 revert 复原 lock 锁定 unlock 解锁 check out 签出 check in 签入 submit 提交 commit 交付 push 推 pull 拉 expand 展开 collapse 折叠 begin 起始 end 结束 start 开始 finish 完成 enter 进入 exit 退出 abort 放弃 quit 离开 obsolete 废弃 depreciate 废旧 collect 收集 aggregate 聚集
-
-
字符串
-
统一使用单引号，不要使用双引号。
– Example –
-js // 不推荐 var str = "字符串"; var str = "";// 推荐 var str = '字符串'; var str = ''; -
使用 数组 或 + 拼接字符串
– Example –
-js // 使用数组拼接字符串 var str = [// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.'- '
- 第一项
','- 第二项
','
- '
- 第一项
',+ '- 第二项
',+ ' -
注释
-
单行注释。
//后需空一格 -
多行注释。
/**开头并独占一行，*/结束并独占一行，*在同一列对齐;
如果是注释函数，需注明函数功能、参数介绍（@param）、返回参数（@return）– Example –
-js /*** @param {Object} len*/ function fn(len) {// ... } -
代码注释。
– Example –
-js /**function fn(len) {} */ -
文档化注释。
文档注释前必须空一行。
自文档化的文档说明 what，而不是 how。
为了便于代码阅读和自文档化，以下内容必须包含以/**...*/形式的注释中。- 文件（@file/@author/@DateTime）
- namespace（@namespace ）
- 类（@class）
- 函数或方法（@param/@return/@type）
- 类属性（@public/@protected/@private）
- 事件（@event）
- 全局变量（@var/@type）
- 常量（@const/@type）
- AMD 模块（@module/@exports）
-
用 TODO 来标记待办事项。
完成后必须删除。
VSCode可下载TODO Highlight（TODO高亮）、Todo Tree（TODO树）两个扩展插件。
对象声明
-
使用字面值创建对象。
– Example –
-js // 不推荐 let user = new Object();// 推荐 let user = {} -
使用字面量来代替对象构造器。
– Example –
-js // 不推荐 var user = new Object(); user.age = 0; user.name = 0; user.city = 0;// 推荐 var user = {age: 0,name: 1,city: 3 } -
对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号。
– Example –
-js // 不推荐 var info = {name: 'someone','age': 28 }// 推荐 var info = {name: 'someone',age: 28 } -
对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 建议添加
'。– Example –
-js // 不推荐 var info = {name: 'someone','user-token': '' }// 推荐 var info = {'name': 'someone','user-token': '' }
数组声明
-
使用字面值创建数组。
– Example –
-js // 不推荐 var arr = new Array();// 推荐 var arr = [];
关于空行
- 不要无缘无故添加空行。
- 为每个逻辑功能块添加空行，这样更易于阅读。
- 比较短的代码间不要使用不必要的空行和缩进。
使用 ES6,7
优先使用 ES6,7 中新增的语法糖和函数。比如箭头函数、await/async ， 解构， let ， for…of 等等
undefined 判断
不要直接使用
undefined进行变量判断；使用typeof和字符串undefined对变量进行判断。
– Example –
-js
// 不推荐
if (typeof person === 'undefined') {// ...
}// 推荐
if (person === undefined) {// ...
}
条件判断和循环最多三层
条件判断能使用三元运算符和逻辑运算符解决的，就不要使用条件判断；
循环嵌套不能超过3层。
this 的转换命名
建议使用
_self来转换命名
– Example –
-js
// 不推荐
var a = this// 推荐
var _self = this
慎用 console.log
调试完，一定要删除日志输出。
禁止正式版运行时有日志输出。
尽可能使用简洁的表达式
– Example –
-js
// 字符串为空// 推荐
if (!name) {// ......
}// 不推荐
if (name === '') {// ......
}// -----------------------------------------// 字符串非空// 推荐
if (name) {// ......
}// 不推荐
if (name !== '') {// ......
}// -----------------------------------------// 数组非空// 推荐
if (collection.length) {// ......
}// 不推荐
if (collection.length > 0) {// ......
}// -----------------------------------------// 布尔不成立// 推荐
if (!notTrue) {// ......
}// 不推荐
if (notTrue === false) {// ......
}// -----------------------------------------// null 或 undefined// 推荐
if (typeof noValue === 'undefined') {// ......
}// 不推荐
if (noValue === undefined) {// ......
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！