前端快速開發(fā)框架需求說明書

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

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

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

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

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

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

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

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

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

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

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

12、的相關(guān)規(guī)范，需求.采用通用的 API 文檔生成工具.可視化的 API 文檔查看.在可視化的基礎(chǔ)上，后端人員和前端人員都可以對所有接口進(jìn)行數(shù)據(jù)的測試和聯(lián)調(diào)?？梢园凑战y(tǒng)一的規(guī)范，自動化的生成文檔，免去維護(hù)的繁瑣工作要點(diǎn).采用 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