A. 前端架構之路（4） - 前端開發文檔
上一節講到開發規范，不以規矩，不成方圓，團隊開發離不開規范，這一節講的開發文檔是對開發規范的一個補充。
從目的上講，規范與文檔都是為了降低團隊的協作成本和維護成本，提高開發效率和質量，保證不會因為開發人員的變動而產生較大的影響。
隨著前端的發展，文檔已經慢慢的變得不可或缺了，並由社區的努力而形成了 JSDoc ，類似 JavaDoc 和 PHPDoc。
JSDoc 是一個根據 javascript 文件中注釋信息，生成 JavaScript 應用程序或庫、模塊的 API 文檔 的工具。你可以使用他記錄如：命名空間，類，方法，方法參數等，並且很多編輯器和 IDE 都是直接支持智能提示的。
JSDoc 注釋一般應該放置在方法或函數聲明之前，它必須以 /** 開始，其他任何以 /* ， /*** 或者超過3個星號的注釋，都將被JSDoc解析器忽略。例如：
另外一個需要記錄的信息就是業務邏輯、更新日誌與備注。
有些比較復雜的業務邏輯不太適合放在注釋裡面，需要單獨寫邏輯文檔，以備後面查看。
有時候，有些邏輯並不是簡單的用文字描述就能說的清楚的，還需要圖表或者思維導圖的輔助。
更新日誌也是一個比較重要文檔，能夠方便查找更新狀態、時間、開發人員等。
如果有額外的一些信息，需要用文檔備注一下。
上一篇： 前端開發規范
下一篇： 構建工具 for teamwork
參考文章：
更多博客，查看 https://github.com/senntyou/blogs
B. 前端開發應該如何寫技術文檔
一名合格的前端開發工程師，不單單需要掌握前端必須的各種技術，同時還要掌握其它技術，需要掌握一點後台的知識，同時也要對網站構架有一定的了解，這樣才可以稱之為一個合格的Web前端開發工程師。
如果你想要快速學習Web前端技術，專業全面的學習方式比較好。適合零基礎的小白迅速成長，學習曲線先快後慢，也適合有一定基礎的學員進階學習，鞏固知識的基礎上，穩步進步突破職業瓶頸。
C. 系統架構文檔怎麼寫
你這不是系統架構文檔,而是概要設計文檔和詳細設計文檔.
D. 「產品前端架構」介面設計
用戶使用 Web 客戶端訪問 Web 系統，系統在收到請求後執行操作
（收集數據模型，選擇數據經行組裝），將結果返回給客戶。
其中包括的元素和關系如下圖所示：
約定
每個規范也會對應若干規定若干規則約定來指導前後端工程師的具體實施。
頁面入口規范（範例）
同步數據規范（範例）
非同步介面規范（範例）
通過 模擬數據 的形成，將前端本地開發與後端獨立出來，
這樣前端工程師就可以獨立的進行本地的開發工作。
使用頁面入口規范制定項目結構（配置信息，目錄結構和模板結構），
此過程可以使用自動化工具自動完成。
根據同步數據規范可生成模擬數據的配置文件。（此部分通用可以使用自動化工具來完成）
根據非同步介面規范生成模擬非同步數據。
前端開發環境包含兩個部分， 本地模擬伺服器 和 本地代理 。
Local Server
根據請求規則進行匹配，然後生成（整合模板和模擬數據）所請求的頁面
Local Proxy
攔截非同步請求後，根據請求的匹配規則返回所請求的數據（例如 JSON 或 XML）。
前後端聯調需要去除本地環境，在實際開發中只需要對配置文件進行調整既可
（控制哪些請求需要被本地伺服器或代理攔截，哪些需要使用遠程伺服器）。
E. 什麼是前端架構
架構設計的最重要目的是為了進行整體系統概覽，以及開發方向指導。
而架構要包含的內容，簡單說就是下面四個
1、系統間關系
2、系統內關系
3、應用內架構
4、系統規范與原則
而架構的原則主要是三個方面
1、架構的合適：架構就像衣服，不能太長，也不能太短
2、可擴展的：架構需要充分考慮擴展性
3、持續不斷的：架構不是一次性物品，是一個跟著軟體生命周期的長期過程
F. 如何通過 Vue+Webpack 來做通用的前端組件化架構設計
angular:
我覺得angularjs的學習上手周期比較長，可能遇到問題，都無法立刻解決，而且編碼的質量明顯的很差，如果團隊沒有制定規范，那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說，我認為編碼規范是很重要的，否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全，我感覺一些開源支持的力量不夠多。不過，如果有項目需求，需要去做IE瀏覽器的支持話，我建議選擇avalonjs
vue：
vuejs 文檔比較齊全，vue吸取了angularjs
的一些優點，規避了一些缺點，至少編碼規范上有了一個質的飛躍，學習上手的周期比較短。vue起初只是一個輕量級的類庫，用來做類似於react的事情，
同時vue也是可以拿來做前端架構設計的，比如：vueify + vue-router （spa框架）。
vue學習地址：http://cn.vuejs.org/
以上說了那麼多沒用的，下面就來點幹活了！
我的前端組件化架構設計，目錄如下：
項目架構用到的知識點，還是挺多的，知識清單如下：
［1］: gulp + webpack 構建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用來做樣式全局化, 只需要通過變數去維護，通過編譯變數既可以換膚。
[3] : vue-loader （vue文件組件化）:用來去編譯處理 *.vue 的文件，一個vue 文件就是一個單獨的組件，vue組件開發具有高獨立且易維護。組件的劃分可大可小，一個頁面也可以看作成由多個vue 組件構成的，一個頁面也可以是一個vue組件, vue 文件結構如下：
[4] ： babel-loader ：實現對vue文件中 es6 語法的編譯解析
[5] ： vue-router ：用來做路由分發，而且文檔非常的齊全（學習地址:http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一個install 方式用來注入，我們可以注入一些全局的(屬性、方法、以及通用的ui組件)。
下面說說文件夾的含義：
common 文件夾: 是用來存一些通用的東西，比如樣式，以及全局的js等等
components 文件夾：用來放獨立的組件，我打算後期做細分，ui 組件，以及page 組件等等，這裡面就是團隊的心血，以後就能做成獨立的組件庫了。
filters 文件夾：用來放通用的過濾器操作。
plugins 文件夾：用來放 Vue.use 注入到Vue全局的插件庫，比如：請求載入、彈框、分頁、ui組件 等等。plugins 只是把 componets 組件暴露給 Vue全局。
views 文件夾: 用來存放頁面模塊
app.vue 文件：第一次啟動的主程序模塊
app.js 文件：啟動前的載入，注入，實例化
router.config.js 文件：路由模塊
目前該架構在前後台的SPA架構都適用，可能還是有很多不完善，不過我還很年輕，vue也還狠年輕，望各位道友多給我們年輕人一些機會。
G. 前端文檔介面怎麼寫
1.先上一個案例
a.介面名稱如果是獲取天氣預報那麼應該突出「獲取」，第一個單詞應該是動詞,for example:get
b.採用小駝峰命名法
c.介面地址是後端人員編寫的，這行就不要寫了
d.參數和返回的數據一律小寫
e.如果返回值有圖片地址的話，應該是個路徑而不是圖片名 for exampl：picname:"./file/weather/real.jpg"
H. 前端本地開發和伺服器部署的架構怎樣設計合適
在 Application Virtualization Server Management Console 中創建伺服器組之後，可以使用以下過程向該組中添加伺服器。注意 伺服器組中的所有伺服器必須連接到相同的數據存儲。
如果您有一個資料庫的使用頻率非常高，而且由於這些資料庫經常發出更新請求而導致群集復制器過載的話，您需要考慮使用多個群集復制器。在一個伺服器中運行多個群集復制器，可以同時將新的更改復制到其它伺服器中。
如果一個群集復制器在把更改復制到一個資料庫時太忙，會有另外一個群集復制器把更改復制到其它的伺服器。這樣，通過共同分擔復制負荷的方式，多個群集復制器使得數據得到快速的更新並能嚴格的保持同步。
I. 前端開發的技術文檔怎麼寫
可以從項目背景，功能模塊，目錄結構，介面列表來寫，還可以配合jsdoc自動生成各個js文件的詳細文檔
J. 微服務架構下，進行前後端分離，前端怎麼寫
分離後的前端，不再是一個簡單的HTML文件，已經是一個獨立的應用系統。除了要考慮頁面的數據渲染展示，還要用工程化的思想來考慮前端的架構，前後端的交互和數據安全等事情。
RESTful介面交互
前後端分離之後，更多的是採用RESTful風格的介面與後端進行數據交互。
REST是「呈現狀態轉移（REpresentational State Transfer）」的縮寫，一種API的架構風格，在客戶端和服務端之間通過呈現狀態的轉移來驅動應用狀態的演進。
在 REST 樣式的 Web 服務中，每個資源都有一個地址。資源本身都是方法調用的目標，方法列表對所有資源都是一樣的。這些方法都是標准方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。
RESTful的API設計，使得後端通過介面向前端傳遞數據，數據的格式通常是JSON這種通用的格式。對前端來說，只要後端返回過來的是RESTful的數據就行，不管後端是用Java寫，還是用python或PHP，拜託對後端的依賴，做到前端系統的獨立。
工程化構建
Nodejs不止可以用來做前端伺服器，在開發階段，它也能發揮很大的作用。
前端生態的發展，是圍繞著Nodejs進行的。用npm來管理項目依賴，可以很好的維護和運行在Nodejs環境上。
打包工具grunt、gulp、webpack和rollup等，都是運行在nodejs上，再結合語法編譯、打包部署等插件，將應用輸入成一個完整的應用。
如果你使用了Angular、React或Vue框架，或者你使用瀏覽器暫時還不兼容的ES6語法，還需要在應用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。
SPA
SPA是單頁Web應用（single page web application，SPA）的簡寫，就是只有一張Web頁面的應用，是載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
像Angular、React或Vue就是為了SPA而設計的，結合前端路由庫（react-router、vue-router）和狀態熱存儲（rex、vuex）等，可以開發出一個媲美Native APP的Web APP，用戶體驗得到了很大的提升。
當然，SPA也不是完美的，也不是適合所有的web應用，需要結合項目和場景來選擇。
SPA有如下缺點：
初次載入耗時增加。可以通過代碼拆分、懶載入來提升性能，減少初次載入耗時。
SEO不友好，現在可以通過Prerender或Server render來解決一部分。
頁面的前進和後端需要開發者自己寫，不過現在一些路由庫已經幫助我們基本解決了。
對開發者要求高，由於做SPA需要了解一整套技術棧，所以，要考慮後期是否有合適的人選進行維護。