前端开发规范：JavaScript 规范

JavaScript 风格指南

变量

变量声明

标准变量统一使用小驼峰，如 userInfo，activeIndex
常量全大写，用下划线连接，如 BASE_URL，DOMAIN
构造函数，大写第一个字母
变量名需要具有语义化，不要声明 a，bb,div1,xcx 等名称
作用域不大临时变量可以简写，比如：str,num,obj,un,arr。
禁止使用 let，统一使用 let 或 const

对数据进行声明，避免用意不明的数据

//正例：
const MINUTES_IN_A_YEAR = 525600;
for (let i = 0; i < MINUTES_IN_A_YEAR; i++) {runCronJob();
}//反例：
// 525600 是什么?
for (let i = 0; i < 525600; i++) {runCronJob();
}

避免重复的描述

//正例：
let Car = {make: "Honda",model: "Accord",color: "Blue",
};//反例：
let Car = {carMake: "Honda",carModel: "Accord",carColor: "Blue",
};

函数

函数参数 (理想情况下应不超过 2 个)

限制函数参数数量很有必要，这么做使得在测试函数时更加轻松。过多的参数将导致难以采用有效的测试用例对函数的各个参数进行测试。

应避免三个以上参数的函数。通常情况下，参数超过两个意味着函数功能过于复杂，这时需要重新优化你的函数。当确实需要多个参数时，大多情况下可以考虑这些参数封装成一个对象。

JS 定义对象非常方便，当需要多个参数时，可以使用一个对象进行替代。

//正例：
let menuConfig = {title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true
}function createMenu(menuConfig) {...
}//反例：
function createMenu(title, body, buttonText, cancellable) {...
}

函数命名

驼峰式命名，统一使用动词，或者动词+名词形式

//正例：
jumpPage、openUserInfoDialog//反例：
go、nextPage、show、open、login

请求数据方法，以 data 结尾

// good
getListData   postFormData// bad
getList  postForm

尽量使用常用单词开头

set、get、open、close、jump

附：函数方法昂用的动词

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 聚集

采用默认参数精简代码

//正例：
function writeForumComment(subject = 'No subject', body = 'No text') {...
}//反例：
function writeForumComment(subject, body) {subject = subject || 'No Subject';body = body || 'No text';
}

使用 Object.assign 设置默认对象

//正例：
let menuConfig = {title: "Order",// User did not include 'body' keybuttonText: "Send",cancellable: true,
};function createMenu(config) {config = Object.assign({title: "Foo",body: "Bar",buttonText: "Baz",cancellable: true,},config,);// config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}// ...
}createMenu(menuConfig);//反例：
let menuConfig = {title: null,body: "Bar",buttonText: null,cancellable: true,
};function createMenu(config) {config.title = config.title || "Foo";config.body = config.body || "Bar";config.buttonText = config.buttonText || "Baz";config.cancellable = config.cancellable === undefined ? config.cancellable : true;
}createMenu(menuConfig);

并发

Async/Await 是较 Promises 更好的选择

Promises 是较回调而言更好的一种选择，但 ES7 中的 async 和 await 更胜过 Promises。

在能使用 ES7 特性的情况下可以尽量使用他们替代 Promises。

//正例：
async function getCleanCodeArticle() {try {let request = await require("request-promise");let response = await request.get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin");let fileHandle = await require("fs-promise");await fileHandle.writeFile("article.html", response);console.log("File written");} catch (err) {console.log(err);}
}//反例：
require("request-promise").get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin").then(function (response) {return require("fs-promise").writeFile("article.html", response);}).then(function () {console.log("File written");}).catch(function (err) {console.error(err);});

错误优先处理

将会导致出问题的错误优先处理掉

//正例：
function getCleanCodeArticle() {let request = await require("request-promise");let res = await request.get("https://en.wikipedia.org/wikRobert_Cecil_Martin");if(res.code===403){return '暂无权限'}else if(res.code!==200){return '请求异常'}return '请求成功'
}//反例：
function getCleanCodeArticle() {let request = await require("request-promise");let res = await request.get("https://en.wikipedia.org/wikRobert_Cecil_Martin");if(res.code===200){return '请求成功'}else if(res.code===403){return '暂无权限'}return '请求异常'
}

注释

只对存在一定业务逻辑复杂性的代码进行注释

注释并不是必须的，好的代码是能够让人一目了然，不用过多无谓的注释。

//正例：
function hashIt(data) {let hash = 0;let length = data.length;for (let i = 0; i < length; i++) {let char = data.charCodeAt(i);hash = (hash << 5) - hash + char;// Convert to 32-bit integerhash = hash & hash;}
}//反例：
function hashIt(data) {// The hashlet hash = 0;// Length of stringlet length = data.length;// Loop through every character in datafor (let i = 0; i < length; i++) {// Get character code.let char = data.charCodeAt(i);// Make the hashhash = (hash << 5) - hash + char;// Convert to 32-bit integerhash = hash & hash;}
}

函数可使用 jsDoc 进行代码注释

jsDoc

/*** 返回一本书.* @param {string} title - 书本的标题.* @param {string} author - 书本的说明*/
function Book(title, author) {}

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

jshint

用’=', '!‘代替’==', ‘!=’；
不要在内置对象的原型上添加方法，如 Array, Date；
不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
不要在一些不需要的地方加括号，例：delete(a.b)；
不要声明了变量却不使用；
不要在应该做比较的地方做赋值；
debugger 不要出现在提交的代码里；
不要在循环内部声明函数；

杂项

对上下文 this 的引用只能使用’_this’, ‘that’, 'self’其中一个来命名；
switch 的 falling through 和 no default 的情况一定要有注释特别说明；

前端开发规范：JavaScript 规范相关推荐

如何快速学Web前端开发？JavaScript函数好学吗？
如何快速学Web前端开发?JavaScript函数好学吗?很多企业在招聘Web前端工程师时会倾向于招聘JavaScript技术的人才,因此专业中必然要包含JavaScript知识.函数是为完成某一功能 ...
Web 前端开发技术 —— JavaScript
Web 前端开发技术 -- JavaScript 总结 JavaScript 内容! 文章目录 Web 前端开发技术 -- JavaScript 一.js 的引用方式与执行顺序 1.引用方式在标签中 ...
前端开发核心JavaScript要怎么学？给转行或是自学的朋友提些学习建议
JavaScript给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习JavaScript的途径.我试着总结自己学习多年JavaScript的经验,希望能给后来的学习 ...
web前端开发：JavaScript 基本语法，
标识符规则在应用程序中,使用变量来作为值的符号名.变量的名字又叫做标识符,其需要遵守一定的规则. 必须以字母.下划线(_)或者美元符号($)开头后续的字符也可以是数字(0-9). 因为 JavaS ...
简化前端开发的javascript工具类收集
在此文中,非常有用的JavaScript库,来帮助你简化前端开发. Moment.js 修改和展示日期,能轻易地应用到Web应用中.例如,如果要显示15天前的日期 moment().subtract( ...
前端开发：JavaScript合并数组的方法
前言在前端开发的时候,对于数据处理是很重要的一块,尤其是要根据实际的业务需求来处理数据,有很强的兼容性要求.而且有些时候后端提供的数据和实际的业务需求数据是有偏差的,所以前端在拿到后台返回的数据之后 ...
前端开发中HTML 规范
DOCTYPE 声明 HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明: <!DOCTYPE html> HTML5标准模版 <!DOCTYPE htm ...
前端开发中的规范 - 样式篇
CSS的引用.开头: 样式放头上,脚本放脚下.不内嵌,只外链. @charset "utf-8"; 注意:必须要定义在 CSS 文件所有字符的前面(包括编码注释),@charset ...
前端开发API及规范
es6教程 es6API
【Java Web前端开发】JavaScript基础
文章目录 JavaScript: JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接就可以被 ...