前端开发规范 从制定到实施

在咱们开始这个题目的时候，咱们应该思考下面几个问题：

1. 前端开发为何须要 开发规范？
2. 前端开发规范是什么？
3. 何时须要这个规范？
4. 如何制定这个规范？
5. 如何落实这个规范？

[TOC]

1、前端开发为何须要 开发规范？

why？

前端还在 刀耕火种的时代的时候，前端是没有 工程 这个概念的。更可能是切图仔这个概念，（将设计师设计出来的 web 、app、h5 的 UI 经过 PS 切图 而后再经过 HTML、CSS 实现出来）的这么一个工种。那么随着 互联网兴起到后来的移动互联网发展，To C 产品需求 精细化， 用户对于 C 端产品愈来愈挑剔也促使着 前端工程化愈来愈规范化了。 渐渐的前端工程造成，那么随之而来的就是 工程化 带来的 规范化。

回到 why 的问题上来，咱们先举一个简单的例子来讲，

可能 工程化 这个名词在不少的后端语言中早早的就已经造成了，但前端 这么一门到如今大学课程都没开课的工种，全靠大学毕业后工做中自学积累而来，那么咱们是否能够说，现阶段前端搞的好的人，Ta 的自学能力必定不会差。

2、前端开发规范是什么？

what?

什么是前端开发规范？

HTML\CSS\Javascript\TypeScript 的代码编写规范，这里咱们着重讲一下 JS 的 编码规范

一、Types

javascript 的数据类型

1.1 基本数据类型

• string
• number
• boolean
• null
• undefined
• symbol

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
复制代码

1.2 引用数据类型

• object
• array
• function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
复制代码

以上则 是 基础数据 在 coding 的时候的基本规范。

二、References

变量、常量、定义规范

• 2.1 eslint: prefer-const, no-const-assign

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
复制代码

建议使用 const 定义常量，能够阻止一些 重复定义致使的 bug
复制代码

• 2.2 eslint: no-var

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
复制代码

推荐使用 let 来定义变量，造成块级做用域，减小由于变量提高致使的bug
复制代码

三、Objects

对象 定义规范

• 3.1 eslint: no-new-object

// bad
const item = new Object();

// good
const item = {};
复制代码

推荐使用 对象字面量来定义空对象，而不是经过 new 实例化进行操做
复制代码

• 3.2 动态属性名 使用 计算属性

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};
复制代码

• 3.3 eslint: object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};
复制代码

推荐 在给对象添加方法的时候，使用 简化符号
复制代码

• 3.4 eslint: object-shorthand

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};
复制代码

方法名若是和对象的属性名称相同的时候，推荐使用简化符号编写
复制代码

• 3.5 在使用 object-shorthand 的时候，推荐先写出简化符号的属性或者方法

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  lukeSkywalker,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
};
复制代码

• 3.6 eslint: quote-props： as-needed

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
复制代码

推荐在 给对象属性不要轻易加引号，除非必要的状况下，好比属性的key带有 符号等
复制代码

• 3.7 eslint: no-prototype-builtins 不使用 prototype 的内置命令

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
// ...
console.log(has.call(object, key));
复制代码

推荐理由是：这些方法可能被有关对象上的属性所遮蔽
复制代码

• 3.8 对象扩展符 比使用 Object.assign 好

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
复制代码

推荐缘由就是， 对象扩展符 比 Object.assign 看着舒服10倍吧
复制代码

四、Arrays

• 4.1 eslint: no-array-constructor

/*推荐使用经过字面量建立对象、数组*/
// bad
const items = new Array();
// good
const items = [];
复制代码

• 4.2 Use Array#push

/*推荐使用 push 来进行 stack add */
// bad
someArr[someArr.length] = 'xxxxsssswwww'
// good
someArr.push('xxxxsssswwww')
复制代码

• 4.3 Use array spreads ... to copy arrays

/*推荐使用 `...` 进行数组 复制 */
// bad
for(i=0; i<arr.length; i++) { newArr[i] = arr[i] }
// good
let newArr = [...arr]
复制代码

• 4.4 use spreads ... instead of Array.from

/*推荐使用 `...` 将可迭代对象转换为数组 */
// bad
const foo = document.querySelectorAll('.foo'); nodes = Array.from(foo)	// array[]
// good
let nodes = [...foo]
复制代码

• 4.5 Use Array.from for converting an array-like object to an array

/*推荐使用 `Array.from` 将 array-like[类数组] 转换为对象 */
const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
// bad
const arr = Array.prototype.slice.call(arrLike);
// good
const arr = Array.from(arrLike);
复制代码

• 4.6 Use Array.from instead of spread ... for mapping over iterables

/*推荐使用 `Array.from` 实现可迭代数组方法而不是经过 ... */
// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, fn);
复制代码

• 4.7 eslint: array-callback-return

/*推荐使用 `Array.from` 实现可迭代数组方法而不是经过 ... */
// good
[1, 2, 3].map(x => x + 1);
// 优化写法、代码简洁易懂
复制代码

• 4.8 Use line breaks after open and before close array brackets

/* 数组换行格式 优化 */
// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];
复制代码

五、Destructuring - 解构

• 5.1 eslint: prefer-destructuring 对象结构

/* 对象结构 带来的更加简洁的代码 */
// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}
复制代码

• 5.2 eslint: prefer-destructuring 函数参数结构

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
复制代码

• 5.3 eslint: prefer-destructuring 数组结构

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;
复制代码

六、 String

...

七、 function

...

八、Classes & Constructors

这里的核心就是减小构造函数的使用、多使用 经过 class 来进行 类的建立、constructor、extends 实现继承、构造函数等 原始的方法。
复制代码

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};

// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}
复制代码

九、Modules

模块化的 导入、导出。
复制代码

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;
复制代码

十、space

...

因为篇幅有限，这里就不作过多的描述了，详情能够查看 Airbnb eslint 规则

3、何时须要这个规范？

我以为任什么时候候都须要这个规范！！！

不管是一我的，仍是 前端小组，甚至全公司的 大前端开发团队 都是须要的！！！

4、如何制定这个规范？

如何定制这个规范

一、CODE 代码层面实现

借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。由于咱们项目是在webpack中引入eslint-loader来启动eslint的，因此咱们只要稍微修改webpack的配置，就能在启动webpack-dev-server的时候，每次保存代码同时自动对代码进行格式化。

// webpack.config.base.js or webpack.config.dev.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue|jsx)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          fix: true
        }
      }
    ]
}
复制代码

二、lint lint 规则层面：

秉承着 一个原则， 渐进式 规则完善，从最基本的 规范到 逐步 健全的规范落实，结合 code review 逐渐完善。

5、如何落实这个规范？

对了，关键点就是 如何落实这个规范！！！
复制代码

一、IDE 的选择

前端IDE开发的选择，从大学阶段的 DW（Adobe Dreamweaver）、Notepad++ 等等，再到后面的 Sublime 、Webstorm 再到后面的 Atom 、Visual Studio Code （VScode）。

IDE 不断的变化过程当中也给了咱们 更加高效编程的选择

二、IDE 的 本地设置文件 setting.json

在 vscode 中的设置中配置（新旧不一样版本的 vscode setting.json 的展示形式是不同的）
复制代码

可是这个 格式化 每每只是最最进本的格式化，在前端如此多的 语言中很显然是不够用的，下面，咱们就主要介绍下 `Prettier`
复制代码

三、Prettier - Code formatter 格式化插件的使用

在 vscode 的应用商店进行 搜索（Prettier - Code formatter ）下载安装 

在项目的根目录建立 Prettier 的配置文件 `.prettierrc`

Prettier 格式化的配置文件文档地址： https://prettier.io/docs/en/options.html

基本的配置文件格式以下：
复制代码

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 140,
  "semi": true,
  "bracketSpacing": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}
复制代码

那么，咱们来看下 Prettier 作了哪些事情

能支持jsx

也能支持css

四、ESLint 与 Prettier配合使用

首先确定是须要安装prettier，而且你的项目中已经使用了ESLint，有eslintrc.js配置文件。

4.1 配合ESLint检测代码风格

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，而后与格式化以前的代码进行对比，若是过出现了不一致，这个地方就会被prettier进行标记。

//.eslintrc
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
复制代码

这样就 能够经过 eslint 来 extend prettier 的规范，最后结合 webpack 的 module 中 对于 js、vue、jsx 文件的 loader 处理，来实现 实时的 lint 。

五、项目架构中 应该具有的 配置文件

那么 回归到最后，咱们去架构这个项目的时候，从 前端编码规范层面去考虑的话，咱们的项目 最少须要的几个 配置文件是这样子的：
复制代码

5.1 、webpack.config.js

webpack 是 构建根本，结合各种插件使用

5.2 、prettierrc

结合 vscode 终极格式化 咱们的代码，一键化操做带你飞~

5.3 、eslintrc

eslint 结合 各种 eslint 的规则。 进行 强/弱 类型提示 （0、一、2）

5.4 、babelrc

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": ["transform-runtime", "transform-decorators-legacy"],
  "env": {}
}
复制代码

结合 babel 的各种 loader 进行 ES 的语法预编译处理，这里因为时间关系就不仔细去阐述了。

六 、总结

一套好的规范，能够解决不想遇到的意外的bug、能够规范本身的编码习惯、可让 code Review 更加简单。
好处多多，有待不断摸索，前期天然回遇到一些困难，但结果是值得期待的~
复制代码

GitHub 地址：（欢迎 star 、欢迎推荐 : )

前端开发规范 从制定到实施