《前端之路》 之 前端開發規範 從制定到實施

時間  2019-11-21
標籤 前端之路 前端 開發 規範 制定 實施 简体版
原文   原文鏈接

目錄javascript

前端開發規範 從制定到實施

在咱們開始這個題目的時候，咱們應該思考下面幾個問題：css

  1. 前端開發爲何須要 開發規範？
  2. 前端開發規範是什麼？
  3. 何時須要這個規範？
  4. 如何制定這個規範？
  5. 如何落實這個規範？

1、前端開發爲何須要 開發規範？

why？html

前端還在 刀耕火種的時代的時候，前端是沒有 工程 這個概念的。更可能是切圖仔這個概念，（將設計師設計出來的 web 、app、h5 的 UI 經過 PS 切圖 而後再經過 HTML、CSS 實現出來）的這麼一個工種。那麼隨着 互聯網興起到後來的移動互聯網發展，To C 產品需求 精細化， 用戶對於 C 端產品愈來愈挑剔也促使着 前端工程化愈來愈規範化了。 漸漸的前端工程造成，那麼隨之而來的就是 工程化 帶來的 規範化。前端

回到 why 的問題上來，咱們先舉一個簡單的例子來講，vue

可能 工程化 這個名詞在不少的後端語言中早早的就已經造成了，但前端 這麼一門到如今大學課程都沒開課的工種，全靠大學畢業後工做中自學積累而來，那麼咱們是否能夠說，現階段前端搞的好的人，Ta 的自學能力必定不會差。java

2、前端開發規範是什麼？

what?node

什麼是前端開發規範？react

HTML\CSS\Javascript\TypeScript 的代碼編寫規範，這裏咱們着重講一下 JS 的 編碼規範webpack

一、Types

javascript 的數據類型git

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 、歡迎推薦 : )

前端開發規範 從制定到實施

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程