JavaScript前端架構(gòu)設計v1.6

1、一 、 J S 架 構(gòu) 設 計 的 背 景二 、 J S 架 構(gòu) 設 計三 、 總 結(jié) 反 思 及 心 得 體 會一、JS架構(gòu)設計的背景淘寶前端工程師的增長前端架構(gòu)的重要性成立之初，10個人團隊，1名UED工程師現(xiàn)在，支付寶就有100多名前端工程師團隊阿里巴巴頁面性能優(yōu)化前端架構(gòu)的重要性頁面性能優(yōu)化： 20秒 12秒 8.5秒 ?腳本數(shù)量的龐大前端架構(gòu)的重要性腳本homeConsole.js達到了13389行（未包含注釋與空行）,壓縮后達到527kb！不同瀏覽器支持的需要單一的IE瀏覽器多種瀏覽器支持為什么要架構(gòu)設計用戶觀念改變的需要追求酷炫效果注重交互體驗為什么要架構(gòu)設計構(gòu)建龐大項目的需要單

2、一頁面腳本大型項目腳本為什么要架構(gòu)設計項目的需要大部分時間花在后臺代碼編寫大部分時間花在前臺代碼編寫為什么要架構(gòu)設計沒有架構(gòu)設計的弊端1、難以維護2、應用加載緩慢3、體驗性差4、重復編碼5、擴展困難一 、 J S 架 構(gòu) 設 計 的 背 景二 、 J S 架 構(gòu) 設 計三 、 總 結(jié) 反 思 及 心 得 體 會二、JS架構(gòu)設計1、JavaScript架構(gòu)演變歷程第1時期，“混沌時代”第2時期，框架時代第時期，模塊化設計2、JS前端架構(gòu)的步驟需求確認框架選型目錄結(jié)構(gòu)應用編碼發(fā)布.1 松散型的模塊化設計沒有使用具體的模塊化設計的框架，根據(jù)業(yè)務模塊需求進行腳本的設計，不同頁面對自身調(diào)用的模塊進行按需

3、引用、加載。基于頁面的模塊代碼加載方式松散型的模塊化設計模塊1代碼頁面1頁面2頁面3框架基礎庫模塊公共代碼模塊2代碼模塊3代碼2.1.1 需求確認在JavaScript前端架構(gòu)之前首先要進行需求的分析、確認。需求確認的內(nèi)容包括：、用戶對象2、用戶計算機水平3、使用的瀏覽器4、使用的計算機設備5、主要的操作優(yōu)克普云PaaS建模平臺需求確認 開發(fā)人員、信息中心管理員用戶對象用戶對象 高計算機水平計算機水平 能夠根據(jù)要求使用特定的瀏覽器使用的瀏覽器使用的瀏覽器 性能較好使用的計算機設備 進行組織架構(gòu)管理、授權(quán)管理、數(shù)據(jù)建模、業(yè)務建模及系統(tǒng)參數(shù)等的配置主要的操作主要的操作通過分析PaaS建模的用戶群體

4、，可以得出初步的結(jié)論：PaaS建模前端主要關注功能的實現(xiàn)，對瀏覽器并沒有太多的限制要求，瀏覽器支持IE8以上的版本即可（瀏覽器支持的減少可以降低前端很多工作量）。2.2 當前流行的框架框架的選擇jQueryDOJOEXTPrototypeYUIJavaScriptMVCMooToolseasyUIminiUI框架與應用的關系框架的選擇框架通用lib包product基礎庫基礎庫通用組件通用組件產(chǎn)品需求產(chǎn)品需求框架選擇的考慮因素項目需要的瀏覽器支持滿足需求的豐富的組件框架的穩(wěn)定性框架的成熟度擴展的容易程度學習的成本框架的選擇2.1.3 目錄結(jié)構(gòu)第三方框架引用的獨立定義與業(yè)務無關的公共部分的獨立定義

5、與模塊業(yè)務相關的公共部分的獨立定義模塊相關的獨立定義定義規(guī)則優(yōu)克普云平臺PaaS前端腳本目錄結(jié)構(gòu)項目jslwlinewell.jslinewell.utils.jsjQueryjquery.jspluginsminiuiztreemodulejscommondatalistaddDatalist.jslistDatalist.jsobjects目錄結(jié)構(gòu)業(yè)務無關的公共庫第三方框架業(yè)務模塊的腳本2.1.4 應用編碼可擴展性可維護性靈活性采用閉包的模塊設計使用閉包來封裝“隱私”、狀態(tài)和結(jié)構(gòu)包裹公開和私有的方法和變量，避免污染全局作用域避免與其他開發(fā)人員的接口沖突只返回公開的API，此外的一切則是封閉

6、和私有的。應用編碼沒有采用閉包的開發(fā)方法閉包設計沒有采用閉包的設計，所有的屬性與方法的定義全部對外開放，其他模塊調(diào)用API很混亂，并容易引起全局沖突。采用閉包的模塊開發(fā)方法閉包設計采用閉包后，私有的方法與公有的方法進行了區(qū)分，外部模塊訪問不到datalistSelector的私有對象與方法。通用控件的設計為了提高可復用性、可擴展性，在項目中經(jīng)常要設計能夠符合不同需求的通用控件，通用控件的設計也能夠為今后發(fā)展自己的框架打下基礎。通用選擇框控件的需求原始需求1、應用系統(tǒng)的字典需要能夠通過樹形、列表的方式進行選擇2、應用系統(tǒng)使用組織架構(gòu)需要能夠以樹形的方式進行展示、選擇3、應用系統(tǒng)使用組織架構(gòu)需要提

7、供按部門、角色、崗位等方式展示人員進行選擇4、通用選擇可以是彈出窗口的形式，也可以作為控件嵌入頁面5、需要提供搜索的功能6、可以支持單選、多選擴展需求1、支持不同數(shù)據(jù)來源、不同形式的可展示位列表與樹形的數(shù)據(jù)2、可以定制通用選擇框的模板3、能夠組裝選中后的數(shù)據(jù)格式嵌入頁面彈出窗口通用選擇框最終展示結(jié)果通用選擇框的目錄結(jié)構(gòu)通用選擇框設計展示模板的配置只要更改模板的.html，css樣式通用選擇框提供簡單的接口通用選擇框設計定義通用選擇框的模塊及對外開放的接口，options參數(shù)為外部擴展開發(fā)傳入的參數(shù)。通用選擇框options擴展開發(fā)接口通用選擇框設計是否多選是否彈出窗口通用選擇框options參

8、數(shù)數(shù)據(jù)源接口通用選擇框設計最終的調(diào)用方式通用選擇框設計定義以樹形方式展示的字典選擇框數(shù)據(jù)來源格式通用選擇框設計返回的數(shù)據(jù)格式JSON數(shù)組JSON單個對象需要包含顯示值與實際值的兩個屬性樹形JSON逐級加載JS前端緩存的設計空間換取時間，緩存永遠計算機設計的重中之重，從cpu到io，到處都可以看到緩存的身影，JS前端架構(gòu)設計重，緩存設計必不可少。JS數(shù)據(jù)及對象的緩存瀏覽頁面的緩存模擬k/v形式的簡單前端緩存設計前端緩存的設計調(diào)用形式Object緩存對象基于jQuery緩存設計前端緩存的設計2.3 基于CMD規(guī)范的模塊化設計 1.靈活架構(gòu)，焦點分離 2.方便模塊間組合、分解 3.方便單個模塊功能調(diào)

9、試、升級 4.多人協(xié)作互不干擾 可維護性 1.可分單元測試 可測試性遵循CMD規(guī)范的前端設計具備可維護性、可測試性。在運行啟動加載時，每個模塊能夠按需進行加載?；贑MD規(guī)范的SeaJSCMD（Common Module Definition），是SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，該規(guī)范明確了模塊的基本書寫格式和基本交互規(guī)則。在 CMD 規(guī)范中，一個模塊就是一個文件。開發(fā)規(guī)范定義SeaJS框架的目錄結(jié)構(gòu)定義以上為基于規(guī)范設計的一個系統(tǒng)，在模塊化設計中。采用規(guī)范可以規(guī)范模塊的書寫格式、能自動處理模塊的依賴，還非常有助于代碼組織、開發(fā)調(diào)試和性能優(yōu)化。（注：支付寶是采用基于規(guī)范的Sea

10、JS進行前端架構(gòu)的）SeaJS模塊的編寫SeaJS模塊標識的定義與目錄結(jié)構(gòu)相同，其他關聯(lián)模塊的引入采用require。SeaJS模塊的引用采用require引入關聯(lián)模塊，實現(xiàn)了其他關聯(lián)模塊的動態(tài)異步加載。SeaJS模塊接口的導出SeaJS通過module.exports可實現(xiàn)模塊公共接口的導出。SeaJS的程序啟動入口SeaJS采用seajs.use為頁面JS腳本執(zhí)行的入口。編碼調(diào)試“工欲善其事必先利其器”，在前端編碼過程當中，編碼調(diào)試的工具的選擇與技巧的掌握夠大幅度提高前端腳本編碼的速度與質(zhì)量。瀏覽器選擇編碼調(diào)試前端腳本的調(diào)試選擇的瀏覽器可以根據(jù)項目兼容性的需要進行選擇，在前期開發(fā)階段建議使

11、用以上、Chrome、Firefox等集成調(diào)試工具比較好的瀏覽器（選擇原生態(tài)的，不要被封裝過的，如：“雙核”瀏覽器），需要兼容性測試時再選擇需要兼容的瀏覽器。調(diào)試輸出alert 最基本的輸出方式console.log Firedebug的輸出方式，IE從8.0開始引入，chrome默認就有，使用與alert一樣，在console窗口數(shù)據(jù)結(jié)構(gòu)自定義輸出 在云平臺的公共庫中，定義了lw.utils.debug輸出調(diào)試的結(jié)果編碼調(diào)試自定義調(diào)試輸出lw.utils.debug調(diào)試輸出自定義調(diào)試輸出在執(zhí)行時會把輸出信息展現(xiàn)在頁面的最頂端。斷點編碼調(diào)試通過F12打開調(diào)試窗口，找到需要斷點的代碼設置斷點；也

12、可以在JavaScript代碼中加入一句debugger來手工造成一個斷點效果。Chrome調(diào)試時自動清除前端緩存的設置編碼調(diào)試IE11調(diào)試時自動清除前端緩存的設置編碼調(diào)試3發(fā)布對公共腳本進行壓縮并合并對各模塊腳本進行壓縮發(fā)布壓縮的版本，并設置調(diào)用的版本號發(fā)布規(guī)則壓縮合并工具采用雅虎的yuicompressor JavaScript腳本壓縮工具結(jié)合ant腳本進行腳本的壓縮與合并。云平臺公共腳本庫壓縮合并的Ant腳本版本發(fā)布的注意事項1、在項目編碼時需要把引用腳本的公共部分獨立出來 獨立公共的引用部分，避免發(fā)布時每個文件都需要更改2、發(fā)布時需要加入版本 發(fā)布時在文件名后加入版本，如：lw.js?version=1，避免瀏覽器端緩存3、SeaJS的發(fā)布 SeaJS可以通過ngnix的合并功能，在加載的時候進行動態(tài)合并 https:/ 、 J S 架 構(gòu) 設 計 的 背 景二 、 J S 架 構(gòu) 設 計三 、 總 結(jié) 反 思 及 心 得 體 會三、總結(jié)反思及心得體會1、總結(jié)架構(gòu)要從需求的角度出發(fā)去考慮不存在放之四海皆準的前端架構(gòu)只有合適的架構(gòu)，沒有最好的架構(gòu)架構(gòu)要與時俱進架構(gòu)要不斷積累2、反思需要對不同場景的應用架構(gòu)進行實踐要能夠更多學習基于互聯(lián)網(wǎng)的先進架構(gòu)技術引入到項目中在項目中架構(gòu)要有更多的積累，形成成熟的框架3、學習心得體會