背景

在编码的过程中变量命名是一个容易疏忽，又容易犯头疼的问题。例如在简单的页面布局中 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()

1. 【倡议】能够应用单词简写，然而只局限于罕用词汇，留神不同词汇的简写有可能抵触。

// 正例
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

16.【倡议】在工程中文档应用全大写命名

README.md
CONTRIBUTORS.md
CHANGELOG.md

17.【倡议】在 Vue 中指令命名应用 filter 作为完结。所有援用命名应用 ref 作为后缀

formatCouponsFilter
inputRef
selectRef

18.【强制】测试文件以 .spec 或者 .test 作为命名的一部分。

selectPicture.spec.js
pageHeader.test.js

19.【倡议】复数化变量名称，而不是命名中蕴含汇合类型名称。

// 正例
hosts
users
validUsers
hostText
hostJson
portNumber

// 反例
hostList
userList
hostStr
intPort

20.【倡议】在 for 循环中应用 i, j, k 来作为索引，应用 n 示意数量 / 次数 / 限度，应用 e 示意异样, 应用 evt 示意事件对象, 应用 cb 示意回调函数。

for (let i = 0; i < 10; i++) {for (let j = 0; j < 10; j++) {for (let k = 0; k < 10; k++) {// do something}
  }
}

21.【强制】在解构时应用 const 来申明。

const [foo, bar] = {foo: 1, bar: 2}

22.【倡议】在款式中 Class 命名能够应用一些罕用简写来缩小长度。

hd -> head
hdr -> header
ft -> foot
ftr -> footer
pg -> page
btn -> button
txt -> text
el -> element
opt -> option
bd -> border
cl -> clearfix
p -> padding
m -> margin
l -> left
r -> right
t -> top
b -> bottom
x -> horizontal
y -> vertical
px -> padding-left, padding-right
py -> padding-top, padding-bottom
pl -> padding-left
m -> margin
dlg -> dialog
sel -> select
img -> image
lbl -> label
chk -> checkbox
tpl -> template
tbl -> table
hoz -> horizontal
vert -> vertical
ref -> reference
wiz -> wizard
oh -> overflow: hidden

补充：有些简写不能独自应用，终须组合能力应用，例如: p, m, x, y等单个词汇。

23.【倡议】在命名时采纳 BEM 的形式，并适当变动，具体参见后续文章。

.page-header__main
.dialog__content
.gallery-list--wrap
.thumbnail-image--info
.action__btn-group

24.【倡议】款式 Class 命名应用中线连贯，ID 命名采纳下划线连贯。Class 能够同时采纳中线和下划线，但要遵循肯定的规定。

.thumbnail-item__image
#page_header

25.【参考】款式 Class 采纳组合形式，通过外层 Class 名来限度作用范畴。

// 正例
<div class="page-header">
  <div class="page-header__wrap common"></div>
  <div class="page-header__wrap tab"></div>
</div>

// 反例
<div class="page-header">
  <div class="page-header__wrap page-header--common"></div>
  <div class="page-header__wrap page-header--tab"></div>
</div>

补充：这种形式的目标在于缩小长度，通过 “ 主体 + 分类名词 ” 的形式，能够解释为“带分类的主体”，然而有一个问题是全局款式要留神不要应用通用的词汇来定义款式，比方 title, action, header, footer, left, right等，不然会引起款式笼罩。

avaScript 作为前端开发从业人员必须把握的 3 大基础知识中最重要的一环，也是平是接触工夫最长、写得最多的。在开发过程中必然会遇到命名的问题，你会词穷、纠结、惆怅吗？本文的呈现置信可能解决大部分懊恼，让你轻松写出符合规范、易读、简短的代码。

本文将通过大量的实例来试图自圆其说，造成一套系统化、实用的变量命名理化体系。通过按 JavaScript 的数据类型分类着手、细到一个函数的参数命名，并提供泛滥可选计划，并尽量给出其适用范围和利弊。

须要留神的是因为集体写作水平、和常识无限，很多方面叙述上有些僵硬，在分类上也没有什么特地的根据，文章也没有人审稿，所以有什么纰漏还请留言告知。因为写作仓促，内容可能不全，后续会随着工作和学习的深刻而一直地调整和更新。

布尔值 (Boolean) 命名

Boolean 值是两种逻辑状态的变量，它蕴含两个值：真 和假 。在 JavaScript 中对应 true 和 false，在实践中通常应用数字1 示意真值，0来示意假值。

尽管 Boolean 的状态只有两种然而在命名时能够进一步分类，这里给出几种场景：

场景一：示意可见性、进行中的状态

解释 ： 可见性 在通常指页面中的元素、组件是否显示（或者组件挂载到 DOM 上，但并不可见）。进行中 次要是阐明某种状态是处于继续进行中。

举荐命名形式为 is + 动词（当初进行时）/ 形容词，同时这种形式也能够间接不写 is，然而为了更好的作辨别，倡议还是加上。

{
  isShow: '是否显示',
  isVisible: '是否可见',
  isLoading: '是否处于加载中',
  isConnecting: '是否处于连贯中',
  isValidating: '正在验证中',
  isRunning: '正在运行中',
  isListening: '正在监听中'
}

留神：在 Java 中应用这种形式是有肯定副作用的，为什么请移步：为什么阿里巴巴禁止开发人员应用“isSuccess”作为变量名？

场景二：属性状态类

解释：通常用来形容实体（例如：HTML 标签、组件、对象）的功能属性，而且定法比拟固定。

{
  disabled: '是否禁用',
  editable: '是否可编辑',
  clearable: '是否可革除',
  readonly: '只读',
  expandable: '是否可开展',
  checked: '是否选中',
  enumberable: '是否可枚举',
  iterable: '是否可迭代',
  clickable: '是否可点击',
  draggable: '是否可拖拽'
}

场景三：配置类、选项类

解释：次要是指组件性能的开启与敞开，功能属性的配置。

这是一种比拟常见的情景，目前命名形式也有很多种，然而归纳起来也不多。举荐应用 withXx 来示意组件在基本功能状态外的其它性能，比方组件的根底性能到高级性能的开启；应用 enableXx 来示意组件某些性能的开启；应用 allowXx 来示意功能属性的配置；应用 noXx 用于倡议性能使用者这个不倡议开启。

{
  withTab: '是否带选项卡',
  withoutTab: '不带选项卡',
  enableFilter: '开启过滤',
  allownCustomScale: '容许自定义缩放',
  shouldClear: '是否革除',
  canSelectItem: '是否能选中元素',
  noColon: '不显示 label 前面的冒号',
  checkJs: '查看 Js',
  emitBOM: 'Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.'
}

留神：如果嫌分类太多，能够只应用其中一种形式，比方在 Typescript 中应用了 allownXx 和 noXx。

除了下面这些带有特定的前置介词、动词形式外还有一些在语义上带有疑难性质的组合通常也是作为 Boolean 命名的一种参考。

{
  virtualScroll: '是否启用虚构滚动模式',
  unlinkPanels: '在范畴选择器里勾销两个日期面板之间的联动',
  validateEvent: '输出时是否触发表单的校验'
}

函数命名

函数在不同的上下文中的叫法也不一样，在对象中称为办法，在类中有构造函数、在异步解决时有回调函数，还有立刻执行函数、箭头函数、柯里函数等。

函数命名的形式经常是和业务逻辑耦合在一起的，然而在命名规定上也有一些常见的模式能够遵循。

场景一：事件处理

事件处理函数是前端平时用到最多的，包含浏览器原生事件、异步事件和组件自定义事件。在写法上最常见的两种命名别离为 onXx、onXxClick和handleXx、handleXxChange。

这里如何在二者之间抉择，能够从二方面来归类。一是，原生事件采纳 onXx，而自定义事件应用 handleXx。二是，事件被动监听采纳 onXx，被动解决应用 handleXx。

从实际及三大支流框架的文档对于事件局部的内容来看，举荐应用 handleXx 这种形式，而在表单提交的时候通常采纳 onSubmit 函数。

其实，在理论我的项目中很少严格这样来命名事件处理函数，因为这种形式有肯定的局限性，比方点击按钮关上一个对话框，应用 handleOpenDlg 和 onOpenDlg 都没有间接写 openDlg 不便，如果页面有多个不同性能的对话框采纳这种形式会显得变量名过长，而 handle 和 on 就显得没有必要了，比方 hanldeOpenCommentDlg 就没有 openCommentDlg 直白。

上面列出了一些约定成俗的实用例子：

{
  onSubmit: '提交表单',
  handleSizeChange: '解决分页页数扭转',
  handlePageChange: '解决分页每页大小扭转',
  onKeydown: '按下键'
}

场景二：异步解决

这里次要是指在写数据层服务、状态治理中的 Action 命名，以及 Ajax 回调的命名规定。

{
  getUsers: '获取用户列表',
  fetchToken: '获得 Token',
  deleteUser: '删除用户',
  removeTag: '移除标签',
  updateUsrInfo: '更新用户信息',
  addUsr: '增加用户',
  createAccount: '创立账户'
}

命名次要围绕数据的增删查找来划分，获取数据通常是 getXx 和 fetchXx，在作者看来两者在应用上的辨别在于 getXx 的数据起源不肯定间接取自异步的原始数据，可能是加工解决后的，而 fetchXx 是间接拿的原始数据。当然在理论我的项目中并没有辨别，看集体爱好。

deleteXx 次要用于数据删除，而 removeXx 在语义上是移除数据，通常状况数据是还存在的，只是没有显示或数据假删除。updateXx 是指数据更新操作，addXx 是在已有列表数据中增加新的子项、而createXx 次要是创立新的实例，比方新建一个账户。

场景三：跳转路由

在理论开发过种中，比方在应用 react-router/vue-router 时，在模板或者 JSX 中能够间接在标签中写上指标地址，但有些时候跳转的指标地址是通过判断或者组合后的，并且通过事件触发跳转的，这个时候就须要一个函数来解决，那么在函数命名的时候能够思考应用

{
  toTplDetail: '跳转到模板详情页面',
  navigateToHome: '导航到首页',
  jumpHome: '跳转首页',
  goHome: '跳转首页',
  redirectToLogin: '重定向到登录页',
  switchTab: '切换 Tab 选项卡',
  backHome: '回到主页'
}

举荐应用 toXx 和 goXx 这两种形式，如果不是在以后页面关上 / 跳转页面，能够应用 toBlankTplDetail 或者 goBlankHome 这种形式来进一步语义化。如果前端页面是位于 Webview 中，也能够思考采纳 toNativeShare 这种形式来命名。

场景四：框架相干特定办法

这里次要是针对前端 3 大支流风行框架，有一些命名是带有特定标识符的，还有就是一些生命周期的命名形式。

{
  formatTimeFilter: '在 AngularJs 和 Vue 中，通常用于过滤器命名',
  storeCtrl: '用于 AngularJs 定义控制器办法',
  formatPipe: '用于 Angular 中，标识管道办法',
  $emit: 'Vue 中的实例办法',
  $$formatters: 'AngularJs 中的内置办法',
  beforeCreate: 'Vue 的生命周期命名',
  componentWillMount: 'React 生命周期命名',
  componentDidMount: 'React 生命周期命名',
  afterContentInit: 'Anuglar 生命周期命名',
  afterViewChecked: 'Angula 生命周期命名',
  httpProvider: 'AngularJs 服务',
  userFactory: '工厂函数',
  useCallback: 'React 钩子函数'
}

场景五：数据的加工

这类场景在解决列表的时候常常会碰到，比方排序、过滤、增加额定的字段、依据 ID 和索引获取特定数据等。

情景一：依据特定属性获取属性

这里能够参考 DOM 办法的命名，比方：getElememtById()、getElementsByTagName()、getElementsByClassName() 和 getElementsByName()，而后提炼出一个比拟实用的模板：getXxByYy()。其中 Xx 能够是：element, item, option, data, selection, list, options 以及一些特定上下文的名字，比方：user(s), menu(s) 等。Yy 相对来说比拟固定，常常用到的就是 id, index, key, value, selected, actived 等。

除了应用 get，还能够应用 query 和 fetch，然而须要留神和下面提到的异步数据处理作一个辨别。

{
  getItemById: '依据 ID 获取数据元素',
  getItemsBySelected: '依据传入的已选列表 ID 来获取列表全副数据',
  queryUserByUid: '依据 UID 查问用户'
}

留神：在 getItemsBySelected 这种情景下间接写成 getItemsSelected 更好，但只实用于 Yy 为形容词的场景

情景二：格式化数据

这里的格式化操作包含排序、调整数据结构、过滤数据、增加属性。命名通常应用 formatXx, convertXx, inverseXx, toggleXx, parseXx, flatXx, 也能够联合数组的一些操作方法来命名，比方 sliceXx, substrXx, spliceXx, sortXx, joinXx 等来命名。

{
  formatDate: '格式化日期',
  convertCurrency: '转换货币单位',
  inverseList: '反转数据列表',
  toggleAllSelected: '切换所有已抉择数据状态',
  parseXml: '解析 XML 数据',
  flatSelect: '开展抉择数据',
  sortByDesc: '按降序排序'
}

数组命名

数组的命名举荐应用复数模式来命名，还有就是名词和具备列表意思的单词组合。常见的词汇有 options, list, maps, nodes, entities, collection 等。

{
  users: '用户列表',
  userList: '用户列表',
  tabOptions: '选项卡选项',
  stateMaps: '状态映射表',
  selectedNodes: '选中的节点',
  btnGroup: '按钮组',
  userEntities: '用户实体'
}

选项元素、下拉元素命名

次要针对的是在下拉抉择框、选项卡元素、Radio、Checkbox 等数据源每个选项数据的命名。常见的词汇有：title, name, key, label, field, value, id, children, index, nodes 等。

基中 title/name/key/label/field 作为选项显示名, value/id 用于惟一标识选项，children/nodes 用于蕴含子节点内容。如果选项元素的语义很明确的状况下也能够间接应用特定单词来代替提到的这些泛指的词汇，例如菜单列表就能够应用 menu 来作为显示名。

// 最常见组合
{
  title: '题目',
  value: 'ID 值'
}

// 组合二
{
  label: '标签名',
  value: 'ID 值'
}

// 组合三
{
  name: '元素名',
  id: 'ID 值'
}

// 组合四
{
  field: '字段',
  value: '标识',
  index: '索引'
}

以后选项、激活项命名

实用列表的选中项、菜单选中项、步骤操作的以后进行步骤、页面路由以后路由等的命名。

{
  activeTab: '以后选中选项卡',
  currentPage: '当前页',
  selectedData: '以后选项中数据',
}

长期数据、比对数据命名

针对在代码中有时会应用一些长期的变量来存储数据、保留数据快照的场景下的命名。

{
  swapData: '长期替换数据',
  tempData: '长期数据',
  dataSnapshot: '数据快照'
}

数据循环语句中变量命名

在应用 for 循环时，多层嵌套请顺次应用 i/j/k，超过 3 层能够应用 x/y/z，m/n 来命名。应用 forEach, map, filter 等办法时，每一个元素命名能够依据不同语境下的非凡名字来命名，比方遍历 menus，那么每个元素能够命名为 menu，不然则应用上下文无关的词汇，比方：item, option, data, key, object 等。至于索引通常应用 index，如果多层能够应用 index + 数字 的模式，也能够间接应用 i/j/k 来作为索引，甚至还能够应用 subIndex/grandIndex 这种形式来命名。

对于在应用 for 循环时数组长度如果须要独自命名的话，能够应用 xxlength/xxLens，或者 xxCount。

在循环的过程中通常还会统计某个条件下数据匹配的次数、反复元素数量、记录两头后果等状况。这里举荐应用 count 示意次数，skipped 示意跳过的数量，result 示意后果。

// for 循环
for (let i = 0; i < 10; i++) {for (let j = 0; j < 10; j++) {for (let k = 0; k < 10; k++) {// do something}
  }
}

for (let i = 0, lens = this.options.length; i < lens; i++) {// do something}

// forEach
users.forEach((item, index) => {// do something})

menus.forEach((menu, index) => {if (menu.children) {menu.children.forEach((subMenu, subIndex) => {if (subMenu.children) {subMenu.children.forEach((grandMenu, grandIndex) => {// 一个不罕用的示例})
      }
    })
  }
})

办法参数命名

办法的参数名称和数量在不同的办法中各不相同，然而还是有一些固定的模式能够参考，比方在 Vue 中监听属性变动的新值和旧值；reduce 办法的上一个值，以后值；回调函数的命名、残余参数的命名等。

情景一：新值、旧值

常见于 Vue 中watch 对像中的属性监听回调函数，举荐应用

{
  oldVal: '旧值',
  newVal: '新值'
}

情景二：上一个值、下一个值和以后值

这种情景见于路由的钩子办法，Object.assign 数据拷贝的参数。

// 组合一
{
  from: '从...',
  to: '到...'
}

// 组合二
{
  prev: '上一个...',
  next: '下一个...',
  cur: '以后'
}

// 组合三
{
  source: '源',
  target: '指标'
}

// 组合四
{
  start: '开始',
  end: '完结'
}

情景三：异步数据返回

用于 Promise 的 then 办法参数，await 的返回的 Promise 等。可抉择的词汇有：res, data, json, entity，举荐应用 res。

demoPromise.then(res => {// do something})

情景四：其它状况

一些应用不多，然而在编程时约定成俗的命名形式。例如 ch 示意单个字符，str 示意字符串, n 代表次数, reg 示意正则, expr 示意表达式, lens 示意数组长度, count 示意数量, p 示意数据的精度, q 示意查问 (query), src 示意数据源(source), no 示意数字(number), rate 示意比率, status 示意状态, bool 示意布尔值, arr 示意数组值, obj 示意对象值, x 和 y 示意坐标两轴, func 示意函数, ua 示意 User Agent, size 示意大小, unit 示意单位, hoz 示意程度方向, vert 示意垂直方向, radix 示意基数，根

// 传入单个字符
function upper(ch) {}

// 数量反复
function repeat(str, n)

// 正则
'abab'.replace(reg, 'bb')

事件命名

这里依据 DOM、nodejs 和一些框架和 UI 组件的事件进行演绎

DOM 事件

这里列举 DOM 中常见的事件命名

{
  load: '已实现加载',
  unload: '资源正在被卸载',
  beforeunload: '资源行将被卸载',
  error: '失败时',
  abort: '停止时',
  focus: '元素取得焦点',
  blur: '元素失去焦点',
  cut: '曾经剪贴选中的文本内容并且复制到了剪贴板',
  copy: '曾经把选中的文本内容复制到了剪贴板',
  paste: '从剪贴板复制的文本内容被粘贴',
  resize: '元素重置大小',
  scroll: '滚动事件',
  reset: '重置',
  submit: '表单提交',
  online: '在线',
  offline: '离线',
  open: '关上',
  close: '敞开',
  connect: '连贯',
  start: '开始',
  end: '完结',
  print: '打印',
  afterprint: '打印机敞开时触发',
  click: '点击',
  dblclick: '双击',
  change: '变动',
  select: '文本被选中被选中',
  keydown/keypress/keyup: '按键事件',
  mousemove/mousedown/mouseup/mouseleave/mouseout: '鼠标事件',
  touch: '轻按',
  contextmenu: '右键点击 (右键菜单显示前)',
  wheel: '滚轮向任意方向滚动',
  pointer: '指针事件',
  drag/dragstart/dragend/dragenter/dragover/dragleave: '拖放事件',
  drop: '元素在无效开释目标区上开释',
  play: '播放',
  pause: '暂停',
  suspend: '挂起',
  complete: '实现',
  seek: '搜寻',
  install: '装置',
  progress: '进行',
  broadcast: '播送',
  input: '输出',
  message: '音讯',
  valid: '无效',
  zoom: '放大',
  rotate: '旋转',
  scale: '缩放',
  upgrade: '更新',
  ready: '筹备好',
  active: '激活'
}

自定义事件

在封装组件时提供的事件名除了参考 DOM 事件外，在命名上也能够参考 Github Api 采纳 动词过来时 + Event 的形式, Visual Studio Code Api 的 `on +

{
  assignedEvent: '调配事件',
  closedEvent: '敞开事件',
  labeledEvent: '标签事件',
  lockedEvent: '锁事件',
  deployedEvent: '部署事件'
}

此外，很多命名形式能够依据场景应用 元素 + click、元素 + change、select + 范畴 等形式灵活运用

{
  selectAll: '抉择所有',
  cellClick: '当某个单元格被点击时会触发该事件',
  sortChange: '当表格的排序条件发生变化的时候会触发该事件'
}

状态治理命名

如果在我的项目中用到了状态治理(redux/vuex/ngrx)，上面给出一些 ActionType，Mutation, Action 的命名参考。

// Redux 的 actionType
LOAD_SUCCESS
LOAD_FAIL
TOGGLE_SHOW_HISTORY
ON_PLAY
ON_LOAD_START
FETCH_SONGS_REQUEST
RECEIVE_PRODUCTS

// ngrx
const SET_CURRENT_USER = '[User] Set current';
const ADD_THREAD = '[Thread] Add';
const UPDATE_TRIP_SUCCESS = 'Update [Trip] Success';

其它命名

// 日期、工夫
// --------------------------------------------------------
sentAt: '发送工夫'
addAt: '增加工夫'
updateAt: '更新工夫'
startDate: '开始日期'
endDate: '完结日期'
startTime: '开时工夫'
endTime: '完结工夫'

本文次要为宽广前端开发人员提供一个英文词汇参考，便于记忆和查阅。文中内容依照特定的形式进行分类便于读者关注感兴趣的局部。

文中的单词并没有给出其词性，很多词性的变动须要读者具备肯定的英语语法常识，以便在特定状况下灵活运用。

数字

数字局部蕴含英文的数字示意、数字运算符、数字单位

infinite: 有限的

英文数字

zero: 零
one: 一
two: 二
three: 三
four: 四
five: 五
six: 六
seven: 七
eight: 八
nine: 九
ten: 十
eleven: 十一
twelve: 十二
thirteen: 十三
fourteen: 十四
fifteen: 十五
sixteen: 十六
seventeen: 十七
eighteen: 十八
nineteen: 十九
twenty: 二十
thirty: 三十
forty: 四十
fifty: 五十
eighty: 八十
ninety: 九十
hundred: 百
thousand: 千
million: 百万
billion: 十亿

计数单位

pixel: 像素
percent: 百分比

// 中文数字
ten: 十
hundred: 百
thousand: 千
ten thousand: 万
billion: 亿
trillion: 兆

// 存储容量
byte: 字节 B
kilobyte: 千字节 KB
megabyte 兆字节 MB
gigabyte 吉字节 GB
trillionbyte 太字节 TB

进制

decimal: 十进制
hex: 十六进制
binary: 二进制
octal: 八进制

运算符

add: 加
subtract: 减
multiply: 乘
divide: 除
and: 与
or: 或
not: 非
intersection: 交加
compose: 并集

键盘符号

punctuator: 标点符号
identifier: 标识符

// Unique graphic character allocations
// 独特的图形字符调配
// --------------------------------------------------------
exclamation mark: ! 感叹号
quotation mark: " 双引号
percent sign: % 百分号
ampersand: & and 符号
apostrophe: ' 撇号
ellipse/apostrophe: …… 省略号
left parenthesis: ( 左括号
right parenthesis: ) 右括号
asterisk: * 星号
plus sign: + 加号
comma: , 逗号
slight-pause mark:、顿号
hyphen-minus: - 连字符(-) 或者 减号(-)
full stop: . 句号
middle dot: ・ 两头点
interpunct: · 间隔号
hyphenation point: · 连字点
solidus: / 斜线
colon: : 冒号
semicolon: ; 分号
less-than sign: < 小于符号
equals sign: = 等于符号
greater-than sign: > 大于符号
question mark: ? 问号
low line: _ 下划线
digital 0: 0 数字 0
latin capital letter A:  A 大写拉丁字母
latin small letter A: A 小写拉丁字母

// Alternative graphic character allocations
// 可选的图形字符调配
// --------------------------------------------------------
number sign: # 数字符号
pound sign: £ 英镑符号
dollar sign: $ 美元符号
currency sign:  货币符

// IRV(International Reference Version) graphic character allocations
// IRV 图形字符调配
// --------------------------------------------------------
number sign: # 数字符号
dollar sign: $ 美元符号
commercial at: @ 
left square bracket: [ 左方括号
reverse solidus:  反斜线
right square bracket: ] 右方括号
circumflex accent: ^ 抑扬音符号
grave accent: ` 沉音符
left curly bracket: { 左花括号
vertical line: | 垂直线
right curly bracked: } 右花括号
tilde: ~ 波浪符

阐明：因为标点符号中英文语言环境同一个符号也不同叫法别名，因而下面列举的词汇只能说波及到了局部，并没有把所有 Dialect(方言) 蕴含进来。

注：· 符号在不同的上下文中有不同的叫法，比方“间隔号”、“两头点”、“我的项目符号”、“连子点”等，尽管肉眼看起来没有什么大的区别，然而在计算机中的 Unicode 编码是不一样的，更多参见距离符

工夫、日期

上面尽管列举了很多工夫相干的词汇，然而在理论前端开发过程中用到的就年、月、日和时、分、秒、毫秒。

time: 工夫
date: 日期
workday: 工作日
weekend: 周末
season: 节令
anniversary: 周年
century: 世纪；百年
quarter: 一刻钟
holiday: 节日；假日
morning: 上午
noon/midday: 中午
afternoon: 下午
night: 早晨
midnight: 中午
yesterday: 昨天
today: 明天
tomorrow: 今天
clock: 时钟
now: 当初；现在；立即
nowadays: 现今；时下
present: 当初（的）former: 从前的；后任的
before: 在... 之前
after: 在... 之后
future: 未来
permanent: 永恒的；不变的
period: 周期；期间；一段时间
during: 在... 的期间；在... 期间的某个时候
term: 学期；期限
early: 晚期的，提前；在初期
ahead: 在前的；当先的；提前的
later: 起初；稍后；随后
start/begin: 开始
end: 完结
pause: 暂停
suspend: 推延；使暂停
timeout: 超时；临时劳动；工间劳动
interval: 距离
overtime: 超时的；加班的，加班工夫

工夫

year: 年
month: 月
day: 日
week: 周
hour: 小时
minute: 分
seconds: 秒
millisecond: 毫秒

星期

Monday: 星期一
Tuesday: 星期二
Wednesday: 星期三
Thursday: 星期四
Friday: 星期五
Saturday: 星期六
Sunday: 星期日

月份

January: 一月
February: 二月
March: 三月
April: 四月
May: 五月
June: 六月
July: 七月
August: 八月
September: 九月
October: 十月
November: 十一月
December: 十二月

节令

spring: 秋季
summer: 冬季
autumn: 秋季
winter: 夏季

地理位置

map: 地图
location: 地理位置
place: 中央
earth: 地球
province: 省
city: 市
district: 区
area: 区域、范畴
region: 地区、范畴、部位
address: 地址
edges: 边界
boundary: 边界；范畴；分界线
coordinate: 坐标
east: 东
south: 南
west: 西
north: 北

方位

direction: 方向
position: 地位
top: 上
right: 右
bottom: 下
left: 左
opposite: 对面的
center: 两头（程度）middle: 两头（垂直）

排版

abstract: 摘要
annex: 附录
suffix: 后缀；词尾
prefix: 前缀
titl: 题目
summary: 总结；概要
specifications: 标准
headline: 大题目；内容提要；栏外题目
preface: 前言；引语；序言
chapter: 章；篇；回
section: 章节；局部
abbreviation: 缩写；缩写词

font: 字体
color: 色彩
heading: 题目
align: 对齐
align left/align center/align right: 左对齐 / 居中对齐 / 右对齐
align top/align middle/align bottom: 顶对齐 / 垂直居中 / 底部对齐
text: 文本
zoom: 放大
size: 大小
opacity: 透明度
position: 地位
rotation: 旋转
fill: 填充
shadow: 暗影
blur: 含糊
filter: 滤镜
radius: 圆角
unite: 合并
subtract: 差集
intersect: 交加
exclude: 排除
join: 合并
insert image: 插入图片
code: 插入代码
highlight: 高亮
strikethrough: 删除线
underscore: 下划线
italic: 斜体
bold: 粗体
horizontal line: 程度分隔线
attach file: 附加文件
checklist: 清单列表
bullet: 我的项目符号
indention: 缩进

形态

figure: 图形
stroke: 描边
fill: 填充
border: 边框
line: 线
rectangle: 矩形
ellipse: 椭圆
sphere: 球
triangle: 三角形
sector: 扇形
annulus: 圆环
trapezium: 梯形
polygon: 多边形
arch: 弓形
circle: 圆、循环、周期
star: 星形、评分
cylinder: 圆柱
circle cone: 圆锥
love: 爱心

语法

grammar: 语法
syntax: 句法
morphology: 词法
structure: 构造
sentence: 句子
clause: 从句
phrase: 词组
word: 单词
adjective: 形容词
verb: 动词
noun: 名词
abstract noun: 抽象名词
pronouns: 代词
determiner: 限定词
conjunction: 连词
interjection: 感叹词
adverb: 副词
preposition: 介词；前置词
derivative: 派生词
numeral: 数词
auxiliary: 助动词
tense: 时态
passive: 被动语态
gerund: 动名词
antonym: 反义词
article: 冠词
antecedent: 后行词
regular/irregular verbs: 规定╱不规则动词
transitive/intransitive verbs: 及物╱不及物动词
subject: 主语
object: 宾语
predicate: 谓语；表语
adverbial: 状语
complement: 补语
appositive: 同位语
adjunct: 修饰语
affix: 词缀
acronym: 首字母缩略词
abbreviation: 缩写词

罕用色彩

pink: 粉红
violet: 紫罗兰
magenta: 洋红(玫瑰红)
purple: 紫色
blue: 纯蓝
azure: 蔚蓝色
cyan: 青色
green: 纯绿
lime: 闪光绿
ivory: 象牙色
yellow: 纯黄
olive: 橄榄
gold: 金色
orange: 橙色
snow: 雪白色
red: 纯红
brown: 棕色
white: 纯白
sliver: 银灰色
gray: 灰色
black: 纯黑

JavaScript 语言相干

type: 数据类型
primitive type: 原始类型
object: 对象
array: 数组
string: 字符串
boolean: 布尔值
symbol: 符号
undefined: 未定义
null: 空
function: 函数
array function: 箭头函数
curried function: 柯里函数
callback: 回调函数
class: 类
module: 模块
import: 导入
export: 导出
constructor: 构造函数
prototype: 原型
reference: 援用
closure: 闭包
destructure: 解构
variable: 变量
property: 属性
attribute: 个性
iterator: 迭代器
generator: 生成器
yield: 产出
observable: 可观赛的
hosit: 晋升
operator: 运算符
equal: 相等
statement: 语句
block: 块
comment: 正文
whitespace: 空格
event: 事件
listener: 监听器
accessor: 拜访器
decorator: 装璜器
proxy: 代理
reflect: 反射
promise: 承诺
test: 测试
fetch: 拿；取
descriptor: 形容符号
sync: 同步
async: 异步
await: 等待
find: 查找
every: 所有
some: 局部
foreach: 为每一个
map: 遍历
filter: 过滤
pad: 填充
index: 索引
data: 数据
slice: 把... 分成局部
splice: 拼接，接合
reduce: 演绎
push: 推
pull: 拉
pop: 弹出
split: 拆散
join: 连贯
flatten: 变平
replace: 替换
search: 搜寻
scope: 作用域
timeout: 超时
interval: 距离
value: 值
define: 定义
math: 数学
sum: 求和
configurable: 可配置
enumerable: 可枚举
writable: 可写
local: 部分的
global: 全局的
not: 非
or: 或
xor: 异或
and: 且
regexp: 正则表达式
match: 匹配
pattern: 模式
greed: 贪心
color: 色彩
rest: 残余
assign: 赋值
tag: 标签
buffer: 缓冲区
super: 极好的
extend: 扩大
readonly: 只读
override: 重写
dynamic: 动静的；多态
default: 默认的
implement: 实现；执行
strict: 严格的
deprecate: 不举荐；拥护
tab: 制表符
space: 空格
indentation: 缩进
public: 公共的
private: 公有的
namespace: 命名空间
member: 成员
method: 办法
parameter/argument: 参数
instance: 实例
ternary: 三目运算
literary: 字面量
template: 模板
character: 字符
markup: 标记
syntax: 语法
equality: 相等
conditional statements: 条件判断语句
true: 是
false: 否
type-checker: 类型查看
compile-time: 编译时
lexical scope: 词法作用域
static scope: 动态作用域
loop: 循环
notation: 符号
operand: 操作数；运算对象
ordinary object: 一般对象
standard object: 规范对象
built-in object: 内置对象
exotic object: 外来对象
last-in/first-out manner: 后进先出的形式
reserved word: 保留单词
signature: 签名
enumerable: 可枚举的
iterable: 可迭代的

// 简写
ajax
json

罕用简写

简写前面用”*“号标注的为举荐应用简写，能够放心大胆在我的项目中应用。

hd -> head
hdr -> header
bd -> body
ft -> foot
ftr -> footer
tbl -> table
el -> element **
cnt -> content
cmp -> component
btn -> button **
sel -> select *
opt -> option *
chk -> checkbox
lbl -> label
wiz -> wizard *
bg -> background **
cur -> current **
prev -> previous **
idx -> index
len -> length **
pg -> page
vm -> view page
repo -> repository *
org -> organization *
ref -> reference *
res -> response **
req -> request **
msg -> message **
str -> string **
ch -> chracter *
lbl -> label
img -> image **
buf -> buffer *
usr -> user
args -> arguments *
no -> number
err -> error *
tmp/temp -> temporary **
rst -> result
bdr -> border
fn/func -> function **
nav -> navigator *
val -> value
params -> parameter *
dev -> development *
prod -> product *
util -> utility *
hoc -> high order component *
cb -> callback *
lib -> library *
prop(s) -> property(ies) *
attr(s) -> attribute(s) *
arr -> array *
conf -> config *
dlg -> dialog
e/ev/evt -> event **
pkg -> package *
tpl -> template *
addr -> address
desc -> descending
aesc -> aescending
expr -> expression **
src -> source **
hoz -> horizontal
vert -> vertical
abbr -> abbreviate
env -> envirnment **
sec -> seconds *
ms -> millisecond **
bool -> boolean *
dbl -> double

罕用词汇及其变体

active -> inactive -> deactive
load -> preload -> unload
coming -> incoming
with -> without
sync -> async
allowed -> unallowed
going -> ingoing -> ongoing
online -> offline
visible -> invisible
finite -> infinite
able -> enabled -> unable -> disabled
login -> logout
singin -> signout
check -> uncheck
select -> unselect
inlet -> outlet
regular -> irregular
implicit -> explicit
import -> export
micro -> macro

专用名词缩写

GUI -> Graphical User Interface 图形用户界面
OEM -> Original Equipment manufacturer 原始设施制造商
CMS -> Content Manager System 内容管理系统
PWA -> Progressive Web App 渐近式 Web 利用
SDK -> Software Development Kit 软件开发工具包
IDE -> Integrated Development Envirnment 集成开发环境
SOA -> Service-Oriented Architecture 面向服务架构
ORM -> Object Relation Mapping 对象关系映射
MVC -> Model View Controller
OOP -> Object Oriented programing 面向对象编程
BEM -> Block Element Modifier 块 - 元素 - 修饰符
BFC -> Block Format Context 
SKU -> Stock Keeping Unit 库存单位
AJAX -> Asynchronous JavaScript and 
HOC -> High Order Component 高阶组件
I18N -> Internationalization 国际化
GUID -> Globally Unique Identifier 寰球惟一标识符

UI 组件相干

参考 Element、Antd、Bootstrap 和 Material Design

// 通用
Head: 题目
Label: 标签
Button: 按钮
Icon: 图标
Link: 文字链接
Input: 输入框
Checkbox: 筛选框
Radio: 单选框
Select: 下拉抉择框
Switch: 开关
Upload: 文件上传
Form: 表单
Radio: 音频
Video: 视频
Canvas: 画布

// 布局
Layout: 布局
Grid: 网格；栅格
Container: 布局容器

// 导航
Affix: 固钉
Breadcrumb: 面包屑
Dropdown: 下拉菜单
Menu: 导航菜单
Pagination: 分页
PageHeader: 页头
Steps: 步骤条
NavMenu: 导航菜单
Minimap: 小地图

// 数据录入
AutoComplete: 主动实现
Cascader: 级联抉择框
DatePicker: 日期抉择框
TimePicker: 工夫抉择框
DateRangePicker: 日期区间抉择框
ColorPicker: 色彩抉择框
InputNumber: 数字输入框
Mentions: 提及
Rate: 评分
Slider: 滑动输入条；滑块
TreeSelect: 树选择器
Transfer: 穿梭框
Wizard: 向导

// 数据展现
Avatar: 头像
Badge: 徽标数
Comment: 评论
Collapse: 折叠面板
Carousel: 走马灯；轮播
Card: 卡片
Panel: 面板
Calender: 日历
Descriptions: 形容列表
Empty: 空状态
List: 列表
Popover: 气泡卡片
Statistic: 统计数值
Tree: 树形控件
Tooltip: 文字提醒
Timeline: 时间轴
Tag: 标签
Tabs: 标签页
InfiniteScroll: 有限滚动
Chips: 芯片
Dialog: 对话框

// 反馈
Alert: 正告提醒
Drawer: 抽屉
Modal: 对话框
Message: 全局提醒
MessageBox: 弹框
Notification: 告诉揭示框
Progress: 进度条
Popconfirm: 气泡确认框
Result: 后果
Spin: 加载中
Skeleton: 骨架屏

// 其它
Anchor: 锚点
BackTop: 回到顶部
Divider: 分隔线
ConfigProvider: 全局化配置

// Button 尺寸
// --------------------------------------------------------
mini: 微型的；袖珍的
tiny: 渺小的；很少的
micro: 极小的；根本的；渺小的；宏观的
small: 小
medium: 中等
large: 大
fixed: 固定宽度的

// Button 外观
// --------------------------------------------------------
default: 默认的
plain: 奢侈的
primary: 次要的
info: 信息的
warning: 正告的
error: 谬误的
danger: 危险的
gray: 灰色的
link: 带链接的
outline: 带轮廓的
dashed: 带虚线的
round: 带圆角的
circle: 圆形的
ghost: 幽灵的

// 表单控件验证状态
// --------------------------------------------------------
valid: 无效的
invalid: 有效的
pending: 验证中
required: 必填的
dirty: 脏的
pristine: 洁净的

代码罕用词汇

上面列出开发过种中常常应用的动词、名词、介词、形容词。这些词汇通常能够互相组合在特定上下文中适当变动能够笼罩工作中的绝大多数场景。

// 动词
on: 监听、正在进行中
get: 取
set: 设置
fetch: 获取
find: 查找
add: 增加
create: 创立
remove: 移除
delete: 删除
update: 更新
upgrade: 降级
downgrade: 使降级
sync: 同步
toggle: 切换
pull: 拉
push: 推
show: 显示
hide: 暗藏
resolve: 解析；合成
parse: 解析
lock: 锁定
link: 连贯
merge: 合并
close: 敞开
clone: 克隆
clear: 革除
format: 格式化
convert: 转变
cancel: 勾销
accept: 抵赖；批准
check: 查看，核查
concat: 合并数组、字符串
join: 合并
split: 离开
spread: 开展
search: 搜寻
sort: 排序
assign: 调配，指定
handle: 解决
trigger: 触发
login: 登入
logout: 登出
register: 注册
sign: 签名
throw: 抛出
load: 加载
preload: 加载
copy: 复制
paste: 粘贴
connect: 连贯
change: 扭转
select: 抉择
validate: 验证
submit: 表单提交
commit: 提交
match: 匹配
scroll: 滚动
write: 写
read: 读
enable: 启用
disable: 禁用
limit: 限度
bootstrap: 启动
init: 初始化
install: 加载
upload: 上传
inject: 注入
provide: 提供
exit: 退出
access: 拜访
flush: 刷新 / 使裸露
refresh: 刷新
release: 公布
preview: 预览；试映
publish: 出版；发行
navigate: 导航；浏览
redirect: 重定向
back: 返回
switch: 切换
launch: 加载
browse/visit: 浏览
append: 追加
insert: 插入
swap: 替换
map: 遍历
extract: 提取；选取
provide: 提供
inject: 注入
observe: 察看
render: 渲染
debug: 调试
align: 对齐
popup: 弹出
transfer: 转让、迁徙
attach: 附加
build: 构建
diagnose: 诊断，判定
ignore: 疏忽
deploy: 部署；开展
send/sent: 送；寄出
defer: 推延
delegate: 委托
destroy: 销毁
dispatch: 派发；分派
trace: 追踪

// 名词
avatar: 头像
brand: 品牌
record: 记录
issue: 问题
project: 我的项目
repo(repository): 仓库；知识库
ecosystem: 生态系统
assets: 资产
resource: 资源
toolkit: 工具包、工具箱
workbench: 工作台
item: 我的项目；条款
option: 选项
field: 字段
type: 类型
status: 状态
property: 属性
attribute: 个性
parameter/argument: 参数
length: 长度
size: 尺寸
shape: 形态
label: 标签
value: 值
view: 视图
page: 页面
env(envirnment): 环境
context: 上下文
count: 总数；计数
amount: 数量；数额
sum: 共计；金额
num(number): 号码
total: 总数
money: 钱；货币
filter: 过滤器
pipe: 管道
stream: 流
buffer: 缓冲器
comment: 评论
ref(reference): 援用
res(response): 响应
req(request): 申请
entity: 实体
event: 事件
setup 设置
prefix 前缀
suffix 后缀
wizard 小部件
model 模型
flag 标记
factory 工厂
service 服务
constant: 常量
var(iable): 变量
collection: 汇合
array: 数组
raw: 原始值
platform 平台
capital: 大写字母
uppercase/lowercase: 大 / 小写
letter: 字母
entrance: 入口
path: 门路
route: 路由
router: 路由器
config: 配置
middleware: 中间件
success: 胜利
error: 谬误
fail(ure): 失败
frontend: 前端
backend: 后端
local: 本地
sever: 服务器
production: 线上；产品
border: 边框
outline: 轮廓
precision: 精度
separator: 分隔符
mask: 遮罩
metadata: 元数据
location: 地位
sandbox: 沙箱
scope: 作用域
queue: 队列
heap: 堆
notice: 告诉
bubble: 气泡
hooks: 钩子
cell: 单元格
row: 行
column: 列
group: 组
cursor: 游标
pattern: 模式
abstract: 形象
compose: 复合；并集
callback: 回调函数
priority: 优先级
grade/rank/hierarchy 等级、层级
table,chart, graph, diagram: 表格，图表，曲线图，图表
system: 零碎、体系
guards: 保障、守卫
segment/fragment: 片段、碎片
shaking: 抖动
mix: 混同
dependence: 依赖
injection: 注入
markup: 标记
email: 电子邮件
version: 版本
detail: 详情
stub: 存根
score: 问题
breakpoint: 断点
record: 记录
pointer: 指针
thumbnail: 缩略图
gallery: 画廊
viewport: 视口
strategy: 策略
outlet: 进口
inlet: 入口
gist: 宗旨；要点；根据
licence: 许可证
copyright: 版权
order: 命令
input: 输出
output: 输入
effect: 影响；成果；作用
position: 地位
corner: 角落
animation: 动画
dot: 点
palette: 调色板；颜料
album: 相册
photo: 照片
host: 主机
session: 会话
cookie: 饼干；小甜点
domain: 域名
certificates: 证书
coercion: 强制
payload: 载物
thread: 线程
process: 过程
timestamp: 工夫缀
conflicts: 抵触
terminal: 终端
portrait: 肖像
auxiliary: 附属物
backup: 备份
bitmap: 位图
breakpoint: 断点
concurrency: 并发
lock: 锁
digest: 摘要
exception: 异样
genericity: 泛型
handle: 句柄
macro: 宏
manifest: 清单
modifier: 修饰字；修饰符
override: 覆写
overload: 重载
procedure: 过程
protocol: 协定
recursion: 递归
marquee: 跑马灯

// 形容词
native: 原生的
hybrid: 混合的
basic: 根底的
complex: 简单的
empty: 空的
online: 在线的
offline: 离线的
public: 公共的
private: 公有的
static: 动态的
dynamic: 动静的
shared: 共享的
safe: 平安的
relative: 绝对的
absolute: 相对的
original: 原始的
infinite: 有限的
partial: 部分的
ascending: 按升序
descending: 按降序
primary: 原始的，第一的
secondary: 第二的
tertiary: 第三的
deprecated: 弃用的
concrete: 具体的
abstract: 形象的
explicit: 显示的；明确的
implicit: 宛转的；暗示的
mutable: 可变的

业务罕用词汇

# 电商
coupons: 优惠券
couponsCode: 优惠码
discount: 折扣
points: 积分
memeber: 会员
vip: 会员
membership: 会员
delivery: 运费
domain: 域名
dashboard: 仪表盘
store: 门店
shop: 店铺
product: 产品
goods: 商品
order: 订单
setting: 设置
manager: 治理
channel: 渠道
notFound: 404 页面
feedback: 反馈
scratch: 刮刮卡
client: 客户端
market: 市场
promotion: 促销
popularize: 推广
tool: 工具
banner: 广告
friendlink：友情链接
partner：合作伙伴
vote: 投票

技术文章浏览罕用词汇

// 副词
approximately: 大概；近似地；近于
indirectly: 间接地；曲折地
inevitably: 不可避免地；必然地
repeatedly: 重复地；再三地
defiantly: 挑战地；反抗地

// 形容词
general: 个别的；一般的；大体的
partial: 部分的
well-formed：合乎语法规定的
appropriate: 适当的；失当的；适合的
reasonable: 正当的；公平的
non-trivial: 非平庸的
conditional: 有条件的；假设的
disheartened: 丧气的；灰心的
unmotivated: 对（工作等）不感兴趣的；没有理由的
terse: 简洁的；简练的；简要的
chaotic: 混沌的；凌乱的，无秩序的
effective: 无效的
discursive: 切题的；东拉西扯的；无档次的
impressive: 感人的；令人钦佩的；给人以深刻印象的
error-prone: 于出错的
weird: 怪异的；不堪设想的；超自然的
hypothetical: 假如的；假设的
tricky:  刁滑的；机敏的；辣手的

事件
Onmouseover 鼠标移到指标上；鼠标移进时
Onclick 鼠标单击
Onmouseout 鼠标移出时
onkeyup 键抬起时
onkeydown 键按下时
blur vt. 涂污；使…模糊不清；使黯淡；玷污 n. 污迹；模糊不清的事物
onblur 失去焦点, 数组罕用办法
push 推动，减少；对…施加压力，逼迫；按；压服
filter“n. 滤波器；[化工] 过滤器；筛选；滤光器 vt. 过滤；浸透；用过滤法除”

运算单词
plus（示意运算）加; 加的; 正的; 附加的; 比所示数量多的;
minus（示意运算）减去; 减号; 负号; 不利; 有余;
multiply 乘;（使）相乘;（使）减少;（使）滋生;
quotient 商，商数，系数
divide(by) 离开，除

DOM 操作局部
replace vt. 取代，代替；替换，更换；偿还，偿还；把…放回原处
Node n. 节点；瘤；[数] 叉点
Element n. 元素；因素；原理；成分；自然环境
parentNode 父节点
childNodes 子节点
nextSibling 下一个兄弟节点
previous adj. 以前的; 先前的; 过早的;（工夫上）稍前的;
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素
firstChild 第一个子节点
lastChild 最初一个子节点
firstElementChild 第一个子元素
lastElementChild 最初个子元素
innerText 底层模板, 外部的纯文本, 元素文本
append vt. 附加; 增加; 贴上; 签（名）
appendChild 办法, 增加节点办法
removeChild 去除节点办法
createElement 创立元素
attribute n. 属性；特质
setAttribute 设置属性
getAttribute 获取属性
removeAttribute 移除属性

相熟局部
area 地区; 区域，范畴; 面积，高山; 畛域;
perimeter < 数 > 周长; 四周，边界;
meter“米, 公尺 #计量器, 仪表; 计量官; 计量监督员”
radius 半径（间隔）; 用半径度量的圆形面积; 半径范畴; 桡骨;
difference 差异，差别; [数]差数，差额; 意见分歧; 特色;
product 产品; 后果; 乘积; 作品;
destination 目标，指标; 目的地，起点;
Object n. 指标；物体；客体；宾语
Model n. 模型；典型；典范；模特儿；款式
instance n. 实例；状况；倡议
inner adj. 外部的；心田的；精力的
transparent adj. 通明的；显然的；坦白的；易懂的

理解局部
selected 筛选进去的
checked 查看; 选中的；
current 当初的；流通的，通用的；最近的；草写的

罕用数组办法
sort vt. 将…分类；将…排序；挑选出某物
shift 扭转; 去掉; 解脱掉; 换挡;
unshift 松开打字机或键盘的字型变换键; 办法将元素插入到一个数组的开始局部
reverse 颠倒；倒转
concat 合并多个数组；合并多个字符串
slice 切成片; 切下; 划分;
splice 拼接；接合；使结婚
source n. 本源，根源; 源头，水源; 起因; 提供音讯的人; 英 [sɔːs]  美 [sɔrs]

罕用的日期函数
getTime 获得零碎工夫
getMilliseconds 获得 Date 对象中的毫秒字段
getSeconds 返回工夫的秒
getMinutes 返回工夫的分钟数
getHours 返回工夫的小时字段
getDay 返回一周的某一天数字
getDate 返回月份的某一天
getMonth 获得 Date 对象中示意月份的数字
getFullYear 返回以后 Date 对象中的年份值

罕用办法
trim 会从一个字符串的两端删除空白字符
split 用于把一个字符串宰割成字符串数组
forEach 为每一个遍历，循环
map 地图，天体图; 相似地图的事物;
indexOf 查找字符或者子串第一次呈现的中央,
lastIndexOf 查找字符或者子串是后一次呈现的中央
every 每个; 每; 所有可能的; 短缺的;
some 一些; 某个; 大概; 相当多的;
ceil vt. 装天花板，装船内格子板;

BOM
window n. 窗口; 窗，窗户;
setTimeout 法用于在指定的毫秒数后调

用函数或计算表达式
interval n. 距离; 幕间休息;（数学）区间;
setInterval 设置工夫距离, 依照指定工夫周期调用函数或计算表达式, 循环
history n. 历史，历史学；历史记录；来历
location n. 定位; 地位，场合; 内景（拍摄地）;

把握局部
path n. 小路，路; 路线，途程; 〈比喻〉（人生的）路线;（思维，行为，生存的）路径;
port n. 港口;（事件的）意义;（计算机与其余设施的）接口;（船、飞机等的）左舷;
protocol n. 礼仪;（内政公约的）草案;（数据传递的）协定; 科学实验报告（或打算）;
navigator n. 领航员; 航海家，航行者，航海者;（船舶，飞机的）驾驶员; 一个浏览器的品牌;
agent n. 代理人; 代理商; 特工; 药剂; 英
useragent 用户代理, 代理程式识别码
back vt. 使后退; 反对; 加背书于; 下赌注于;vi. 后退; 倒退;
offset vt. 对消; 弥补;（为了比拟的目标而）把…并列（或并置）; 为（管道等）装支管;
step n. 步，脚步; 步骤，伎俩; 步调; 级别;
animate vt. 使有怄气; 驱动; 使栩栩如生地动作; 赋予…以生命;
Extensible adj. 可开展的，可扩张的，可延长的;

js API
client n. 顾客; 当事人; 诉讼委托人; [计算机] 客户端;
resize vt. 调整大小
offsetHeight 网页内容理论高度
math n. 数学
getComputedStyle 能够获取以后元素所有最终

应用的 CSS 属性值
罕用局部
compute vt. 计算；估算；用计算机计算
computed v. 计算，估算
computer n.（电子）计算机，电脑;
floor n. 地板，高空；楼层；基底；议员席
mode n. 模式；形式；格调；时尚 英
compatMode 兼容模式；
document.compatMode(判断以后浏览器采纳的渲染形式)
responsive adj. 应答的，响应的; 反馈灵活的; 共鸣的; 易反馈的;
tablet 药片, 小块 . 碑，匾; 便笺簿, 平板电脑
wrap n. 膝毯，披肩，围巾，围脖，头巾，罩衫，外套，大衣; 包装纸;
slide n. 滑动；幻灯片；滑梯；雪崩 英
assign vt. 调配；指派；计 赋值 英[ə
insert vt. 插入; 嵌入;（在文章中）增加; 加
before prep. 在…之前; 先于，优于; 当着…的面; 与其…;