前端工程化概述

時間 2019-11-08

標籤前端工程概述简体版

原文原文鏈接

摘要：

前端工程化概述什麼是工程化定義工程化即系統化、模塊化、規範化的一個過程。若是說計算機科學要解決的是系統的某個具體問題，或者更通俗點說是面向編碼的，那麼工程化要解決的是如何提升整個系統生產效率。

前端工程化概述

什麼是工程化

定義

工程化即系統化、模塊化、規範化的一個過程。
若是說計算機科學要解決的是系統的某個具體問題，或者更通俗點說是面向編碼的，那麼工程化要解決的是如何提升整個系統生產效率。
與其說軟件工程是一門科學，不如說它更偏向於管理學和方法論。

解決什麼問題

工程化解決的問題是，如何提升編碼、測試、維護階段的生產效率。

什麼是前端

維基百科

前端Front-end和後端back-end是描述進程開始和結束的通用詞彙。javascript

前端做用於採集輸入信息，後端進行處理。計算機程序的界面樣式，視覺呈現屬於前端。css

百度百科

前端對於網站來講，一般是指，網站的前臺部分包括網站的表現層和結構層。html

所以前端技術通常分爲前端設計和前端開發，前端設計通常能夠理解爲網站的視覺設計，
前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，如今最新的高級版本HTML五、CSS3，以及SVG等。前端

前端發展史

1. 簡單明快的早期時代

適合小項目，不分先後端，頁面由JSP、PHP等在服務端生成，瀏覽器負責展示。vue

2. 後端爲主的 MVC 時代

爲了下降複雜度，之後端爲出發點，有了Web Server層的架構升級，好比Structs、Spring MVC等。java

前兩個階段存在的問題

前端開發重度依賴開發環境。
先後端職責依舊糾纏不清，可維護性愈來愈差。

3. Ajax 帶來的 SPA 時代

2005年Ajax正式提出，前端開發進入SPA（Single Page Application 單頁面應用）時代。react

Ajax時代面臨的挑戰

先後端接口的約定。
前端開發的複雜度控制。SPA應用大多以功能交互型爲主，大量 JS 代碼的組織，與 View 層的綁定等，都不是容易的事情。

4. 前端爲主的 MVC、MV* 時代

爲了下降前端開發複雜度，Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue等大量前端框架涌現。git

5. Node 帶來的全棧時代

隨着Node.js的興起，爲前端開發帶來一種新的開發模式。github

業界比較出名的實踐是，阿里巴巴的中途島計劃。web

後兩個步驟帶來的好處

先後端職責很清晰。
前端開發的複雜度可控，經過合理的分層，讓項目更可維護。
部署相對獨立，產品體驗能夠快速改進。

前端工程化要解決什麼

1. 制定各項規範，讓工做有章可循

統一團隊成員的編碼規範，便於團隊協做和代碼維護
- 目錄結構，文件命名規範
- 編碼規範：eslint, stylelint
開發流程的規範
- 使用敏捷，加強開發進度管理和控制
- 應對各項風險，需求變動等
- code review 機制
- UAT 提高發布的需求的質量
先後端接口規範，其餘文檔規範

2. 使用版本控制工具，高效安全的管理源代碼

使用 git 版本控制工具
Git分支管理
Commit描述規範，例如：task-number + task 描述
建立 merge request，code review 完畢以後方可合併代碼

3. 使用合適的前端技術和框架，提升生產效率，下降維護難度

目標： 職責分離、下降耦合，加強代碼的可讀性、維護性和測試性。

採用模塊化的方式組織代碼
- JS 模塊化：AMD、CommonJS、UMD、ES6 Module
- CSS 模塊化：less、sass、stylus、postCSS、css module
採用組件化的編程思想，處理 UI 層
- react、vue、angular
將數據層分離管理
- redux、mbox
使用面向對象或者函數編程的方式組織架構

4. 提升代碼的可測試性，引入單元測試，提升代碼質量

5. 經過使用各類自動化的工程工具，提高整個開發、部署效率

JavaScript 對模塊化的現實須要

js設計之初，主要用於處理簡單的頁面效果和邏輯驗證之類的簡單工做。
被過於隨意的設計，缺少模塊化一直是其缺陷之一。
隨着單頁應用與富客戶端的流行，不斷增加的代碼庫也急需合理的代碼分割與依賴管理的解決方案，這就是咱們在軟件工程領域所熟悉的模塊化。
模塊化主要解決的問題：解決代碼分割、加強維護性、提升代碼重用、做用域隔離、模塊之間的依賴管理、發佈的自動化打包與處理等多個方面。

主要的模塊化方案

直接聲明依賴（Directly Defined Dependences）
命名空間（Namespace Pattern）
模塊模式（Module Pattern）
依賴分離定義（Detached Dependency Definitions）
沙盒（Sandbox）
依賴注入（Dependency Injection）
標籤化模塊（Labeled Modules）
CommonJS、AMD、UMD、ES 2015 Modules

1. 直接聲明依賴

除了備註描述，什麼問題都沒解決

// file app.js
var helloInLang = {
  en: 'Hello world!'
};

// file hello.js

/* helloInLang defined in app.js */
function writeHello(lang) {
  document.write(helloInLang[lang]);
};複製代碼

2. 命名空間

命名空間模式始於2002年，使用特殊的約定命名，用於避免命名衝突和全局做用域污染。

缺點：大型項目可維護性較差，沒有解決模塊間依賴管理的問題。

// file app.js
var app = {};

// file greeting.js
app.helloInLang = {
  en: 'Hello world!'
};

// file hello.js
app.writeHello = function (lang) {
  document.write(app.helloInLang[lang]);
};複製代碼

3. 模塊模型

封裝了變量和function，和全局的namaspace不接觸，鬆耦合

只暴露可用public的方法，其它私有方法所有隱藏

// file app.js
var app = {};

// file greeting.js
app = (function (app) {
    var _app = app || {};

    _app.helloInLang = {
      en: 'Hello world!'
    };

    return _app;
} (app));

// file hello.js
app = (function (app) {
    var _app = app || {};

    _app.writeHello = function (lang) {
      document.write(app.helloInLang[lang]);
    };

    return _app;
} (app));複製代碼

4. 依賴注入

2009年 Angular 引入 Java 世界的依賴注入思想。

核心思想：某個模塊不須要手動初始化某個依賴對象，只須要聲明該依賴，並由外部框架自動實例化該對象，並傳遞到模塊內。

// file greeting.js
angular.module('greeter', [])
  .value('greeting', {
    helloInLang: {
      en: 'Hello world!'
    },
    ayHello: function(lang) {
      return this.helloInLang[lang];
    }
  });

// file app.js
angular.module('app', ['greeter'])
  .controller('GreetingController', ['$scope', 'greeting', function($scope, greeting) {
    $scope.phrase = greeting.sayHello('en');
  }]);複製代碼

5. CommonJS

服務器端 javascript 模塊化解決方案，適用於同步模塊加載。

// file greeting.js
var helloInLang = {
    en: 'Hello world!'
};
var sayHello = function (lang) {
    return helloInLang[lang];
}
module.exports.sayHello = sayHello;

// file hello.js
var sayHello = require('./lib/greeting').sayHello;
var phrase = sayHello('en');
console.log(phrase);複製代碼

6. AMD

瀏覽器端 javascript 模塊化解決方案，適用於異步模塊加載。

// file lib/greeting.js
define(function() {
    var helloInLang = {
        en: 'Hello world!'
    };

    return {
        sayHello: function (lang) {
            return helloInLang[lang];
        }
    };
});

// file hello.js
define(['./lib/greeting'], function(greeting) {
    var phrase = greeting.sayHello('en');
    document.write(phrase);
});複製代碼

7. UMD

UMD 容許在環境中同時使用 AMD 與 CommonJS 規範。

(function(define) {
    define(function () {
        var helloInLang = {
            en: 'Hello world!'
        };

        return {
            sayHello: function (lang) {
                return helloInLang[lang];
            }
        };
    });
}(
    typeof module === 'object' && module.exports && typeof define !== 'function' ?
    function (factory) { module.exports = factory(); } :
    define
));複製代碼

8. ES2015 Modules

ES2015 Modules 做爲 JavaScript 官方標準，日漸成爲了開發者的主流選擇。

// file lib/greeting.js
const helloInLang = {
    en: 'Hello world!'
};

export const greeting = {
    sayHello: function (lang) {
        return helloInLang[lang];
    }
};

// file hello.js
import { greeting } from "./lib/greeting";
const phrase = greeting.sayHello("en");
document.write(phrase);複製代碼