js常用变量

背景

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

【建议】可以使用单词简写，但是只局限于常用词汇，注意不同词汇的简写有可能冲突。

// 正例
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. 在…之前; 先于，优于; 当着…的面; 与其…;