# Standard 0.10.1+

# 规范

• js使用Airbnb JavaScript Style Guide

• css代码规范参考

• 外置样式很多时不建议使用vue-loader的scoped Scoped css for dynamic element

• 根据情况使用 /deep/

• 值得参考的css理论：OOCSS、SMACSS与BEM

• immutable和lodash 看看用哪个

• CSS Class 命名 BEM略复杂，不想用

# vue中

• Vue 组件细则

• 尽可能用组件自定义事件 如el-select @change代替vue watch

• 事件命名可参考 Element-ui的 node_modules\element-ui\packages\table\src\table-header.js:110

• 善于利用vuex的dispath进行预加载，比如用户登陆时可以加载主页的静态资源

• 列表相关的CRUD解耦，新增，修改，删除操作完后不要去getList，仅在前端实现状态更新

• 前端请求防止高并发的loading相关，比如按钮的高频点击，可以写个全局mixin，待ajax结束把loading关掉，推荐使用promise.finally()，记得使用polyfill

• vue中善于利用Destructuring

• 更多🚀

# 项目示例汇总

• 为了使用函数参数重载，可以不遵循airbnb7.7

• 箭头函数 {} 和 return 省略，可尽量省略return和花括号，使用vscode格式化工具prettier自动换行处理

• 项目暂不使用Class，推荐模块组合方式

• 模块export export { zip, flatten, camelCase, sumBy } from 'lodash' 生产后的lodash会打包多余模块，尽量让import和export各司其职

• 代码块，空白，逗号 使用vscode格式化工具prettier自动换行处理

• 不使用分号，遇到两个 IIFE 合并时手动加

• String到Number类型转换 '3'直接使用+'3'转换

• 文件命名规则 nuxt项目中pages使用下划线 _ ，components组件使用驼峰camelCase,其他文件使用-连接符

• 项目尽可能不使用jQuery，使用 $ 作为存储 vue $refs DOM 节点对象的变量名前缀

• vuetify源码中有大量的vue unwatch

  //node_modules\vuetify\src\mixins\validatable.js
  beforeDestroy () {
    this.form && this.form.unregister(this)
  }
  

• 页面表格多且功能繁琐，尽量使用vue-data-tables

• 不同页面，相同class类名麾下的css，浏览器不会继续加载第二次，除非刷新页面，写style不加scoped时要特别注意,比如登陆页和注册页共用一个div时，尽量使用OOCSS方案，使用bootstrap的多className写法.

# 性能

• On Layout & Web Performance
• String vs Array Concat
• Try/Catch Cost In a Loop
• Bang Function
• jQuery Find vs Context, Selector
• innerHTML vs textContent for script text
• Long String Concatenation
• Are Javascript functions like map(), reduce(), and filter() optimized for traversing arrays?
• jsperf 分析代码性能

# 相关资源

了解 ES6

• ECMA 2015 (ES6) 规范草案
• ExploringJS
• ES6 兼容性表
• ES6 特性全面概况
• ES Checker

看看这个

• Annotated ECMAScript 5.1

工具

• 代码风格检查器（Lint）
  • ESlint - Airbnb Style .eslintrc
  • JSHint - Airbnb Style .jshintrc
  • JSCS - Airbnb Style Preset

其他风格指南

• Google JavaScript Style Guide
• jQuery Core Style Guidelines
• Principles of Writing Consistent, Idiomatic JavaScript
• Naming this in nested functions - Christian Johansen
• Conditional Callbacks - Ross Allen
• Popular JavaScript Coding Conventions on Github - JeongHoon Byun
• Multiple var statements in JavaScript, not superfluous - Ben Alman

拓展阅读

• Understanding JavaScript Closures - Angus Croll
• Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
• You Might Not Need jQuery - Zack Bloom & Adam Schwartz
• ES6 Features - Luke Hoban
• Frontend Guidelines - Benjamin De Cock