程序开发过程中变量命名不仅是一个头疼问题，也是一个对开发者综合素质的检验，它会直接影响到代码的最终交付质量、代码 Review 人员心智承受力。如何写出具有创造性、优雅性、易读性的高质量代码，需要开发者在实际工作中不断总结、提炼，在阅读他人代码时不断地吸收，并在一定的编码规范上形成自己的编码风格。在代码一道除了天资和经验更需要一份详实的参考来辅助，这正是本系列文章的出发点所在。
变量的命名不局限于 JavaScript 代码中的属性、方法和对象，也包含了路由的命名，工程结构的命名，数据库表和字段的命名，样式中 Class 和 ID 选择器的命名，HTML 元素的选择等。
本系列将分成多篇来分析前端开发过程中变量命名所涉及到的知识点，规划如下：
- 前端开发变量命名系列 – 开篇
- 前端开发变量命名系列 – JavaScript 篇
- 前端开发变量命名系列 – HTML 及 UI 组件篇
- 前端开发变量命名系列 – CSS 篇
- 前端开发变量命名系列 – NodeJs 篇
- 前端开发变量命名系列 – 工程目录结构篇
- 前端开发变量命名系列 – 常用英文词汇篇
由于个人写作水平和技术实力及经验有限，一家之言，难免服众，更何况个人在圈子中没有任何名气和背景。所以在 Github 上为此专门开了一个组织 Code Naming Guide，其内容不限于前端开发领域，前端部分地址为 code-naming-guide/frontend。希望更多的同行一起参与进来共同完善和维护。
注意：目前只暂时占了个 github 的名，等到所有（部分）系列文章完结后，再从整体的角度去思考如何组织 github 中的内容及分类。在阅读文章的过程中有疑问和更好的建议欢迎留言或者微信: jenemy_xl
在编码的过程中变量命名是一个容易忽略，又容易犯头疼的问题。例如在复杂的页面布局中 Class 的命名，同样一个结构在不同的上下文要表达的意思不一样，是采用通用命名呢？还是采用更具有描述性的业务相关词汇？但是呢还需要考虑到样式的复用、是否会冲突、被覆盖、组合命名的长度是否太长等问题。
在实际工作中，每个人都有自己命名风格和惯用词汇，有的喜欢使用英文简写、有的喜欢使用中英文结合、有的喜欢给变量加数据类型前缀、有的喜欢乱造词汇、有的甚至单词都拼写不正确。在看别人代码的过程中你是否像我一样无语，但也只能截图指出并吐槽二下，有些时候对方并不买单，改正。
每次到换工作的时候就更新博客，7 月下旬的高温天气就适合在家里码字，这次选择这个话题的原因是目前在网上还没有相关的文章来系统全面的论述有前端关代码变量命名的资料。Java 有《码出高效 – 阿里巴巴 Java 开发手册 终级版》，而前端这方面目前还是一个空白，虽然有很多代码规范，但是很少有人愿意在这方面去花心思，更多的是研究框架的源码、数据结构与算法和尝试新的技术，本人由于大脑开发有限、没有能力去啃这些骨头，只好捡一些很少有人去碰触的简单不费脑的知识点来考究一二，希望也能为前端的生态做出一点小贡献。
目前流行的经典命名规则有：驼峰命名法、匈牙利命名法、下划线命名法、帕斯卡命名法
相关命名的具体规则请另行查阅。前端主要涉及到驼峰命名法，React 组件会用到 帕斯卡命名法。
然后是变量命名规则：
- 变量名首字母必须为字母 (a-z A-Z)，下划线(_)，或者美元符号($) 开始
- 变量名只能是字母 (a-z A-Z)，数字(0-9)，下划线(_) 的组合，并且之间不能包含空格，数字不能放在变量名首位。
- 变量名不能使用编程语言的保留字。比如在 javascript 中不能使用 true, false, while, case, break 保留字等等。
这里给出一些在开发过程中约定成俗的通用规则，涉及 JavaScript, Typescript, 框架组件, 样式及目录。在文章中将使用 【强制】来 表示必须严格遵守，【推荐】来表示建议 ，【参考】 来给出多种命名方式的一种。
1.【强制】在 JavaScript 中使用驼峰命名法来表示变量，不能以下划线或美元符号作为开始和结束。
// 反例
_name
__name
name_
$name
name$
补充：由于受框架和第三方库及语言限制，不可能完全避免。例如：在 RxJs 中通常命名流的时候是以 变量名 + $ 的形式，在 Class 中定义私有变量时通常以 _ + 变量名 的方式来表示，在 Vue 中内部实例方法全部以 $ 开始，在 AngularJs 中内部方法以 $$ 开始，而 lodash 直接使用 _ 作为其别名。
2. 【强制】在代码中严禁使用拼音与中英文混合的方式，更不允许直接使用中文的方式。除了一些国际通用的中文名称，要视为英文外，其它禁止使用。
// 正例
taobao
tmall
shanghai
coupons
// 反例
yhq [优惠券]
3.【强制】类名使用大写驼峰命名法来表示，Typescript 中枚举值使用大写驼峰命名法表示。
// 正例
class User {}
enum Color {Red = 1, Green, Blue}
// 反例
class user {}
4.【强制】常量名全部大写，单词间使用下划线隔开，力求表达完整清楚，不要嫌名字长。
// 正例
GOOGLE_MAP_TOKEN
// 反例
TOKEN
5.【建议】Typescript 中抽象类使用 Abstract 或 Base 开头；异常类使用 Exception 结尾。
abstract class BaseDepartment {}
6.【建议】在 TypeScript 中，类型使用 Type 作后缀，接口使用 I 作为前缀。
type PropsType = {}
interface ILoginProps {}
7.【建议】采用有意义的命名，在项目中坚持使用一种变量命名方式。不要 usr 与 user 混用
// 正例
users
getUserByUid()
// 反例
registerUsr()
copyUserInfo()
8.【建议】方法名必须准确表达该方法的行为，在多数情况下以动词开头。
// 正例
fetchCoupons()
updateToken()
createAccount()
generateUniqueId()
// 反例
getData()
9. 【建议】可以使用单词简写，但是只局限于常用词汇，注意不同词汇的简写有可能冲突。
// 正例
setProps() [props -> property]
selectCouponsDlg() [dlg -> dialog]
readPkg() [pkg -> package]
previewTpl [tpl -> template]
// 反例
vehicleDesc [desc -> description]
vehicleDesc [desc -> descending]
vehicleAesc [aesc -> aescending]
fetchUsr() [usr -> user]
10.【建议】在 Vue 和 Angular 中，模板语法中所有组件名使用中线命名法，在 React 中使用大写驼峰命名法来表示。
// Vue
<el-button type="text" @click="toDetail"> 详情 </el-button>
<custom-component a-prop="prop" />
// Angular
<nz-sider [nzWidth]="200" style="background:#fff"></nz-sider>
// React
<SelectPicture data={this.images} />
11.【推荐】统一使用中线命名法来命名目录。
|-- page-header
| |-- PageHeader.vue
12.【参考】在 Vue 模板语法中组件属性使用连字符命名法，在 Vue 中使用 JSX 则属性使用驼峰命名法，并且文件文以”.jsx”为文件类型。
<Thumbnail
withHeadPicture={true}
data={this.selectedImages[0]}
withDetail={this.enabledDetail}
/>
13.【强制】在服务名上使用 Service 后缀
class UserService {}
14.【建议】在 Vue 中组件文件名采用大写驼峰命名方式，React 同样如此，在 Angular 中以使用点和横杠来分隔文件名，并且符号名后面追加约定的类型后缀。
// Vue
User.vue
// Angular
app.component.ts
hero-list.component.ts
validation.directive.ts
app.module.ts
user-profile.service.ts
// React
User.jsx
15.【参考】在 React 中使用目录名称作为组件名，在目录内容直接使用 index 作为入口，在 Vue 中不可以，在 Angular 中可以将 index 作为模块的入口，当然也可以直接作为组件的入口，但这样和其整个命名风格有所背离。
// Vue
|-- user-info
| |-- UserInfo.vue
// Angular
|-- user-info
| |-- user-info.component.ts
| |-- index.ts
// React
|-- user-info
| |-- index.jsx
