背景

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

补充：因为受框架和第三方库及语言限度，不可能完全避免。例如：在RxJs中通常命名流的时候是以 变量名 + $ 的模式，在Class中定义公有变量时通常以 _ + 变量名 的形式来示意，在Vue中外部实例办法全副以 $ 开始，在AngularJs中外部办法以 $$ 开始，而lodash间接应用 _ 作为其别名。

2. 【强制】在代码中严禁应用拼音与中英文混合的形式，更不容许间接应用中文的形式。除了一些国内通用的中文名称，要视为英文外，其它禁止应用。

// 正例taobaotmallshanghaicoupons// 反例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 混用

// 正例usersgetUserByUid()// 反例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中以应用点和横杠来分隔文件名，并且符号名前面追加约定的类型后缀。

// VueUser.vue// Angularapp.component.tshero-list.component.tsvalidation.directive.tsapp.module.tsuser-profile.service.ts// ReactUser.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.mdCONTRIBUTORS.mdCHANGELOG.md

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

formatCouponsFilterinputRefselectRef

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

selectPicture.spec.jspageHeader.test.js

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

// 正例hostsusersvalidUsershostTexthostJsonportNumber// 反例hostListuserListhostStrintPort

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 -> headhdr -> headerft -> footftr -> footerpg -> pagebtn -> buttontxt -> textel -> elementopt -> optionbd -> bordercl -> clearfixp -> paddingm -> marginl -> leftr -> rightt -> topb -> bottomx -> horizontaly -> verticalpx -> padding-left, padding-rightpy -> padding-top, padding-bottompl -> padding-leftm -> margindlg -> dialogsel -> selectimg -> imagelbl -> labelchk -> checkboxtpl -> templatetbl -> tablehoz -> horizontalvert -> verticalref -> referencewiz -> wizardoh -> 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}// forEachusers.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 的 actionTypeLOAD_SUCCESSLOAD_FAILTOGGLE_SHOW_HISTORYON_PLAYON_LOAD_STARTFETCH_SONGS_REQUESTRECEIVE_PRODUCTS// ngrxconst 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: 字节 Bkilobyte: 千字节 KBmegabyte 兆字节 MBgigabyte 吉字节 GBtrillionbyte 太字节 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 数字 0latin 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: 可迭代的// 简写ajaxjson

罕用简写

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

hd -> headhdr -> headerbd -> bodyft -> footftr -> footertbl -> tableel -> element **cnt -> contentcmp -> componentbtn -> button **sel -> select *opt -> option *chk -> checkboxlbl -> labelwiz -> wizard *bg -> background **cur -> current **prev -> previous **idx -> indexlen -> length **pg -> pagevm -> view pagerepo -> repository *org -> organization *ref -> reference *res -> response **req -> request **msg -> message **str -> string **ch -> chracter *lbl -> labelimg -> image **buf -> buffer *usr -> userargs -> arguments *no -> numbererr -> error *tmp/temp -> temporary **rst -> resultbdr -> borderfn/func -> function **nav -> navigator *val -> valueparams -> 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 -> dialoge/ev/evt -> event **pkg -> package *tpl -> template *addr -> addressdesc -> descendingaesc -> aescendingexpr -> expression **src -> source **hoz -> horizontalvert -> verticalabbr -> abbreviateenv -> envirnment **sec -> seconds *ms -> millisecond **bool -> boolean *dbl -> double

罕用词汇及其变体

active -> inactive -> deactiveload -> preload -> unloadcoming -> incomingwith -> withoutsync -> asyncallowed -> unallowedgoing -> ingoing -> ongoingonline -> offlinevisible -> invisiblefinite -> infiniteable -> enabled -> unable -> disabledlogin -> logoutsingin -> signoutcheck -> uncheckselect -> unselectinlet -> outletregular -> irregularimplicit -> explicitimport -> exportmicro -> 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 ControllerOOP -> 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.本源，根源; 源头，水源; 起因; 提供音讯的人; 英 [ss] 美 [srs]

罕用的日期函数
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. 在…之前; 先于，优于; 当着…的面; 与其…;

背景