1、前端快速開發框架需求說明書代號：Bricks目的：將前端研發領域中各種分散的技術元素集中在一起，并對常見的前端開發問題、不足、缺陷和需求所提出的一種解決問題的方案，同時能夠確保加以有效的執行。特點：工程化自動化關鍵字：規范簡化效率1.問題 31.1.前端開發需要用到的技術元素 31.2.解決方案應包含的功能及優點 32.需求要點 42.1.UI 風格 42.2.統一的交互體驗 42.3.UI 組件 52.4.項目構建 52.5.性能優化 62.6.制定通用的 html、css 規范 62.7.功能套件 62.8.與后端通訊的統一處理方式的制定 72.9.可視化的接口聯調 71.問題1前端開發需

2、要用到的技術元素1.開發規范：包括開發、部署的目錄規范，編碼規范2. .模塊化開發：更好的分離和更好的代碼組織方式3. .組件化開發：可復用的單一功能小部件4. .性能優化：js 運行性能，圖片，文件，請求5. .項目構建：包括構建與優化，開發與調試等6. .功能套件：公共的功能套件及基于項目特殊性所需要的套件以上幾項是從現有前端開發中所用到的技術元素進行歸納和總結。所有的技術點都有一定的內在聯系：1 .模塊化開發涉及到性能優化、對構建工具又有一定的配套實現要求，也會影響開發規范的定制2 .組件化開發應該基于模塊化框架來加載其他依賴的組件，如果組件化框架自帶模塊管理功能，那么就可能導致工程性的

3、性能優化實現困難3 .組件庫應該與組件化開發配套，組件倉庫中的組件都應該按照相同的標準來實現，否則下載的組件不具有可復用性、可移植性，就是去了倉庫的意義4 .我們設計的開發規范工具是否能很容易的實現，如果部署上有特殊要求，工具是否能很容易的做出調整，而不是修改規范。5 .工具是否能提供接入公司已有流程中的接口，比如命令調用等問題。由于現有前端開發中暴露出來了許多問題，比如：開發的規范性問題，組件的可復用問題，項目單元測試及構建問題等等。為了解決前端開發所暴露出來的問題，就需要有一套解決方案來處理所出現的問題。所以本文檔作為描述該解決方案的具體細節說明。1.2.解決方案應包含的功能及優點1 .快

4、速搭建項目，提供靈活的腳手架工具（可根據需要定制），自動生成項目、頁面、模板、路由等各類資源。2 .自動化構建，對文件進行編譯、校驗、壓縮、合并、優化處理等3 .統一的編碼方式前端開發的可維護性4 .功能完整的 UI 組件庫5 .一致的 UI 風格和交互體驗針對上述的各個功能，需要有對應的描述完整的文檔說明，包括如何使用工具一步一步的搭建應用，以及工具的使用說明文檔。2.需求要點1UI 風格問題在現有的應用開發中，各個應用雖然在表象上貼近扁平化風格，但是實際的內容設計和功能設計仍然是傳統化的風格， 缺乏統一的 UI 風格來指導應用的 UI 設計， 迫切需要摸索和沉淀出一套適合建模產品的 UI

5、風格來指導后續的應用設計和開發需求UI 風格的摸索和確定（基于建模產品的特點進行學習和設計以及以扁平化為 UI 方向）要點.收集和整理現有應用的類型和特點，針對類型進行分類.在了解應用的基礎上，學習和確定符合應用的 UI 風格.組件的 UI 風格也要和 UI 風格一致技術要點.采用 Bootstrap 樣式框架庫.以 ThemeForest 等應用模板為參考（該模板類別豐富，功能齊全，UI 統一，交互一致）1統一的交互體驗問題在現有的應用開發中，交互體驗沒有統一，存在著不同應用交互不一致，以及沒有統一的指導性文檔來引導產品和開發進行交互體驗的設計，在 UI 風格確定的情況下，需要制定符合該風格

6、的交互體驗指導說明。（在借鑒其他用戶體驗原則基礎上）概述：從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解“人”本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。通過對產品的界面和行為進行交互設計，讓產品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標。需求制定出風格一致的交互體驗設計指導說明要點.整體界面的設計和交互.組件的交互需要保持統一技術要點無1UI 組件問題基于現有的 UI 組件功能的不完整性

7、和易用性方面存在缺陷，以及前端開發所采用的框架為MVC,所以為了與框架無縫結合以及使用上的統一，需要制定出一套 MVCUI 組件庫需求制定出基于 Ember 的 MVCUI 組件庫，包含組件核心機制和制定指導后續組件開發的模式。具體的控件不重復造輪子，以移植到核心機制及 MVC 框架上為前提），UI 組件核心提供組件的基本功能，包括有限狀態機的流轉、動作的觸發及處理等等，為組件的編碼提供清晰的結構和用戶行為和組件行為的分離。大部分組件的細節編碼以不重復造輪子為前提，將整套組件移植到核心基礎上。要點：.組件基礎功能的確定和編碼.具體組件編碼模式的確定.風格相同組件的確定技術要點：.狀態機的編碼.

8、基于Ember.Component 的組件編碼模式的確定.組件基于上述核心功能的改造和遷移，符合 MVC 模式1項目構建問題目前項目的應用開發中，應用搭建，開發比較混亂，沒有遵循統一的模式，導致維護上的困難，以及項目代碼質量低下，并且對應的文件沒有經過處理，體積和數量過大，導致性能較差，為了解決開發上的一致問題，需要有統一的項目腳手架以及對應的構建工具和便捷的命令工具來指導后續的開發，提升效率。需求.統一的應用開發腳手架.制定出開發應用的基本模式，能夠指導應用開發時各個模塊的拆分，和編碼.項目構建工具的優化和改進（EmberAppKit 及 Ember-Cli,在學習已有優點的基礎上，進行優化

9、和改進）.腳手架的可擴展要點.規范的目錄.針對制定好的規范所形成的指導性文檔說明.構建工具功能的擴展.提供可擴展的腳手架套件技術要點.針對 Ember-Cli 目前的腳手架進行研究，以及基于本身應用的基礎上，對比是否有需要改進的地方.提供更豐富的功能，以方便開發者進行構建，比如命令行創建對應的控制器，路由和其他資源文件.定制化腳手架研究性能優化問題目前應用開發上，比較少關注性能優化方面的問題，而性能優化是前端開發中非常重要的一個環節，為了處理好前端性能問題，需要有針對性的對前端開發的各個方面進行深入研究，總結出優化性能、提升效率的方式方法。需求提升性能要點：.請求優化.Js 運行性能優化.資源

10、文件優化制定通用的 html、css 規范問題目前的應用開發中，html 和 css 沒有遵循一致的開發規范，以及開發人員和美工人員的配合缺乏統一的方式，需要制定出通用的規范來指導工作需求制定規范的 html 規范和 css 規范模塊化的 css功能套件問題現有應用開發中，大部分應用都有用到相同的功能，比如國際化問題，應用間通訊，路由切換引起的歷史記錄問題等等，但是缺乏公共的功能提煉。需求總結和提煉現有應用開發中的公用功能，針對每個公用功能進行編碼要點.總結和提煉現有應用開發中的共用功能.應用間通訊.路由切換中數據的保存.i18n 國際化與后端通訊的統一處理方式的制定問題現有的應用開發中，沒有

11、遵循一致的與后端通訊的接口，混亂的使用引起的維護困難和不一致的情況，需要制定前端開發與后端接口通訊的標準。需求.采用統一的與后端交互的模塊接口，Ember-Data.擴展 Ember-Data,以提供不同數據格式的擴展和解析，以適應不同的后端數據接口要點.分析和總結采用前端 ORM 與后端通訊的弊端.分析弊端以及解決問題可視化的接口聯調問題現有前端開發人員與后端開發聯調接口的弊端：.后端人員編寫好接口后，手動維護 api 接口文檔，文檔不夠清晰，不夠直觀，.并且接口有變更后，后端人員需要再次手動維護該文檔，并且經常出現缺漏維護的現象.前端人員的接口的定義變化較大基于以上原因，需要制定出接口維護

12、的相關規范，需求.采用通用的 API 文檔生成工具.可視化的 API 文檔查看.在可視化的基礎上，后端人員和前端人員都可以對所有接口進行數據的測試和聯調。可以按照統一的規范，自動化的生成文檔，免去維護的繁瑣工作要點.采用 Swagger 的可視化 API 生成工具.支持多種后端，比如 java、node、ruby效果APIDikMrtrCaEyggfOEie，口userword(huw/Hid*UitOpmRm|TAvord.jSGn/rtord/entri：e&Rrbyrnftfitrirs制制口word|SET/wond.jwrVfwordV。xam 限 5Rebjirnseumpleif

13、oraword1TrwordjsofV(wordi/examplesFetshweumplcsgTwrdJEMord.jMHVfwordJ/wordFormsR由MjfitoAw，d|Wr/wond.jwn/iword/wflrdFormsRMjmi.otherf&rmt口faword|Mll(rord.jHV(word/wordFormsOrtetesardtUonshipfrom。wordIMTfvmrdJwfVIwcrdJGMmw&rd*sastringrnurru曲帆也ObjectihjitrcpreunliitParametersParjm4lefVMu。DeWifi噂n)febur

14、nsexwtlywhilrequeiled.KewmUJggr2G$12。懺tct$口妙中圣齡。徜眇肉的JlimMildCfttteCrtaregdIF同emsogTryMZ.|GFTZwoEjson/MwWdefWiionsReturm.deRnAonsfc-rdword|GU/rjrd,json/wcnjJ/stat5Rfiurni住曲|5CT/mrdjson/wardtopFjtample電Eurm1top富*Ep*SQTaword|由/wo 旭118n/MordVsrit*承 uMLookupiRdur井,mcmj%rwoM尿i3*dM111堂ierittnce話whichgisfound1*MTA/ordJ5orVwani/contextudlLockupRttumsiforAwordbed。門ui*senocnwhichaisfound|T/word,jwn/vrt