《從零構建先後分離的web項目》：前端了解過關了嗎？前端基礎架構和硬核介紹

時間 2019-11-11

標籤從零構建先後分離的web項目前端瞭解過關基礎架構硬核介紹欄目系統架構简体版

原文原文鏈接

# 前端準備：前端了解過關了嗎？前端基礎架構和硬核介紹css

技術棧的選擇

首先咱們構建前端架構須要對前端生態圈有一切瞭解，而且最好帶有必定的技術前瞻性，好的技術架構可能往後會方便的擴展，減小重構的次數，即便重構也不須要大動干戈，我一般選型技術棧會參考如下三點：前端

1、提出自身業務的需求

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

有了這樣的問題咱們能夠帶着問題去重點選型一些這寫問題技術方案比較成熟的技術棧。vue

2、自身是否成熟，文檔是否友好

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

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

3、瞭解其生態系統

上文提到了生態系統，以我比較經常使用的 vue 來舉例，vue 發展至今僅官方爲咱們提供了以 vuex、 vue-router、 vue-loader、 vue-cli、 vuepress、 vue-devtools、 vue-ssr 爲首的 89 個開源項目，包括無數的 vue 相關的 UI 庫，vue 插件甚至是近兩年淘寶提供的 Hybrid ： weex 的支持react

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

統計時間 2018-09-01

我想有了這樣的生態支持，徹底能夠知足咱們中小項目的 95% 以上的需求，至於比較哪一個更強是沒有意義的。git

由於比較熟悉讓我斗膽私自選擇 vue 做爲咱們的 SPA 主架構es6

4、畫出咱們指望的前端基礎架構模型

由於咱們上一章選型了 Vue，若是隻考慮前端咱們最初的想法:技術棧大概是這樣的：github

經過 node 和 webpack 的支持把 vue 組件 build 打包成傳統元素，發佈到 http 服務中，請求後端服務。

隨後多是這樣的：web

隨着目前主流第三方庫的愈來愈多和技術的嚐鮮、客戶端的需求、或被動[不得不用]、或主動的去引用了 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 這些東西，這裏大白話講講：
他們的前後順序是：ES五、ES6(ES2015)、ES七、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 個單詞)，他是不標準的