《從零構建前後分離的web專案》準備 – 前端了解過關了嗎？

莊文達發表於2019-03-01

Web前端

前端基礎架構和硬核介紹

技術棧的選擇

首先我們構建前端架構需要對前端生態圈有一切瞭解，並且最好帶有一定的技術前瞻性，好的技術架構可能日後會方便的擴充套件，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三點：

一、提出自身業務的需求

SEO 是否非常重要？
主要面向：移動端還是 pc 端？
是否有開發 app 的規劃？

有了這樣的問題我們可以帶著問題去重點選型一些這寫問題技術方案比較成熟的技術棧。

二、自身是否成熟，文件是否友好

這裡舉一個以前開發過程中實際遇到的，當時為了優化使用者體驗，節省開發效率選型了一款 MVVM 輕量框架，可惜當時沒有決定權，CTO 選型了 avalon

當時之所以沒有選擇 backbone ，主要是因為沒有成熟的中文文件，考慮到團隊的流動性和上手性暫時沒做考慮，最終選擇了司徒正美的 avalon 當時來說還是比較前衛的，也有一些以去哪網為首的大公司都在用。我們當時用的時候 avalon2 剛出不久，直接用的 2.0，使用過程也出現了一點問題：文件離散，這一塊那一塊，存在後置性，生態少，擴充套件價效比不高，有時候遇到匪夷所思的 bug 尋找原因翻了幾遍 demo 、文件可能會找到答案，沒有重點標識。當然就當時來說確實是給我們提升了部分開發效率，但是我可能當時更偏向 Angular 或 vue 的。因為他們有無以倫比的生態圈和各種問題的技術方案以以及完善的開發者文件，值得一提的是 avalon 的作者是兼職維護的，如果全棧運營的話，我相信遠比現在更好，看一看 avalon 的原始碼也會對自己有不少的提升。對於生產的技術選型要更加謹慎。

三、瞭解其生態系統

上文提到了生態系統，以我比較常用的 vue 來舉例，vue 發展至今僅官方為我們提供了以 vuex、 vue-router、 vue-loader、 vue-cli、 vuepress、 vue-devtools、 vue-ssr 為首的 89 個開源專案，包括無數的 vue 相關的 UI 庫，vue 外掛甚至是近兩年淘寶提供的 Hybrid ： weex 的支援

截止今天 github 開源的與 vue 相關的專案多達 167,752 個，與 angular 相關的多達 416,811 個，與 react 相關的多達 594,272 個。

統計時間 2018-09-01

我想有了這樣的生態支援，完全可以滿足我們中小專案的 95% 以上的需求，至於比較哪個更強是沒有意義的。

因為比較熟悉讓我斗膽私自選擇 vue 作為我們的 SPA 主架構

四、畫出我們期望的前端基礎架構模型

因為我們上一章選型了 Vue，如果只考慮前端我們最初的想法:技術棧大概是這樣的：

通過 node 和 webpack 的支援把 vue 元件 build 打包成傳統元素，釋出到 http 服務中，請求後端服務。

隨後可能是這樣的：

隨著目前主流第三方庫的越來越多和技術的嚐鮮、客戶端的需求、或被動[不得不用]、或主動的去引用了 babel less sass *.loader 和 hybrid 等元件庫。

再後來的技術棧需要我們根據真正踩坑之後才會逐步完善

可能是 polyfill 懶載入 xss protobuf 等針對 瀏覽器相容、速度優化、 SEO 、通訊協議 等具體問題。所以，前期可以不用過多考慮，我們只要知道：這個問題我們是可以解決的，但是現在可以先不去考慮，有些同學，太過於“完美主義”以至於想法不錯，但動起手來做了幾天就不做了，完美主義害死人。

瞭解 Webpack

WebPack 可以看做是模組打包機器，它可以分析你的專案結構，找到 JavaScript 模組以及其它的一些瀏覽器不能直接執行的擴充語言：Stylus、Scss、less、TypeScript、CoffeeScript 等，並將其轉換和打包為合適的格式供瀏覽器使用。比較常用的還可以通過 webpack-dev-server 進行開發模式的熱更新

WebPack 是一種模組化開發的方案

當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle

webpack 通過 loader 可以支援各種語言和前處理器編寫模組，最後打包為一個（或多個）瀏覽器可識別的 *JavaScript css * 檔案

目前支援的 loader 列表

瞭解 ES6

官方說法

ECMAScript 6（簡稱ES6）是於2015年6月正式釋出的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程式.

科普

很多人總是搞不清楚 ES 這些東西，這裡大白話講講：
他們的先後順序是：ES5、ES6(ES2015)、ES7、ES8

在 2015 年 6 月 ES6 的第一個版本釋出，正式名稱就是《ECMAScript 2015 標準》（簡稱 ES2015）算是 2011 年 ECMAScript 5.1 之後的 6.0版本
2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）[因為改動小，其實他是 6.1 版本，但總有人願意叫它 ES7 ，不標準的]
2017 年 6 月釋出的《ECMAScript 2017 標準》（簡稱 ES2017） [因為改動小，其實他是 6.2 版本，但總有人願意叫它 ES8 ，不標準的]

就像 Kubernetes 人們開他起了一個 K8S 的名字 (K 和 S 中間有 8 個單詞)，他是不標準的