JavaScript前端架構設計v1.6第一頁，共70頁。一、JS架構設計的背景第二頁，共70頁。淘寶前端工程師的增長前端架構的重要性第三頁，共70頁。阿里巴巴頁面性能優(yōu)化前端架構的重要性頁面性能優(yōu)化：20秒

12秒

8.5秒?第四頁，共70頁。腳本數(shù)量的龐大前端架構的重要性腳本homeConsole.js達到了13389行（未包含注釋與空行）,壓縮后達到527kb！第五頁，共70頁。不同瀏覽器支持的需要為什么要架構設計第六頁，共70頁。用戶觀念改變的需要為什么要架構設計第七頁，共70頁。構建龐大項目的需要為什么要架構設計第八頁，共70頁。項目的需要為什么要架構設計第九頁，共70頁。沒有架構設計的弊端第十頁，共70頁。二、JS架構設計第十一頁，共70頁。1、JavaScript架構演變歷程第十二頁，共70頁。2、JS前端架構的步驟第十三頁，共70頁。２.1松散型的模塊化設計沒有使用具體的模塊化設計的框架，根據(jù)業(yè)務模塊需求進行腳本的設計，不同頁面對自身調(diào)用的模塊進行按需引用、加載。第十四頁，共70頁。基于頁面的模塊代碼加載方式松散型的模塊化設計模塊1代碼頁面1頁面2頁面3框架基礎庫模塊公共代碼模塊2代碼模塊3代碼第十五頁，共70頁。2.1.1需求確認在JavaScript前端架構之前首先要進行需求的分析、確認。需求確認的內(nèi)容包括：

１、用戶對象2、用戶計算機水平3、使用的瀏覽器4、使用的計算機設備5、主要的操作第十六頁，共70頁。優(yōu)克普云PaaS建模平臺需求確認通過分析PaaS建模的用戶群體，可以得出初步的結論：PaaS建模前端主要關注功能的實現(xiàn)，對瀏覽器并沒有太多的限制要求，瀏覽器支持IE8以上的版本即可（瀏覽器支持的減少可以降低前端很多工作量）。第十七頁，共70頁。2.１.2當前流行的框架框架的選擇jQueryDOJOEXTPrototypeYUIJavaScriptMVCMooToolseasyUIminiUI第十八頁，共70頁?？蚣芘c應用的關系框架的選擇框架通用lib包product基礎庫通用組件產(chǎn)品需求第十九頁，共70頁?？蚣苓x擇的考慮因素框架的選擇第二十頁，共70頁。2.1.3目錄結構定義規(guī)則第二十一頁，共70頁。優(yōu)克普云平臺PaaS前端腳本目錄結構目錄結構業(yè)務無關的公共庫第三方框架業(yè)務模塊的腳本第二十二頁，共70頁。2.1.4應用編碼

第二十三頁，共70頁。采用閉包的模塊設計應用編碼第二十四頁，共70頁。沒有采用閉包的開發(fā)方法閉包設計

沒有采用閉包的設計，所有的屬性與方法的定義全部對外開放，其他模塊調(diào)用API很混亂，并容易引起全局沖突。第二十五頁，共70頁。采用閉包的模塊開發(fā)方法閉包設計

采用閉包后，私有的方法與公有的方法進行了區(qū)分，外部模塊訪問不到datalistSelector的私有對象與方法。第二十六頁，共70頁。通用控件的設計為了提高可復用性、可擴展性，在項目中經(jīng)常要設計能夠符合不同需求的通用控件，通用控件的設計也能夠為今后發(fā)展自己的框架打下基礎。第二十七頁，共70頁。通用選擇框控件的需求第二十八頁，共70頁。嵌入頁面彈出窗口通用選擇框最終展示結果第二十九頁，共70頁。通用選擇框的目錄結構通用選擇框設計展示模板的配置只要更改模板的.html，css樣式第三十頁，共70頁。通用選擇框提供簡單的接口通用選擇框設計

定義通用選擇框的模塊及對外開放的接口，options參數(shù)為外部擴展開發(fā)傳入的參數(shù)。第三十一頁，共70頁。通用選擇框options擴展開發(fā)接口通用選擇框設計是否多選是否彈出窗口第三十二頁，共70頁。通用選擇框options參數(shù)數(shù)據(jù)源接口通用選擇框設計第三十三頁，共70頁。最終的調(diào)用方式通用選擇框設計定義以樹形方式展示的字典選擇框第三十四頁，共70頁。數(shù)據(jù)來源格式通用選擇框設計第三十五頁，共70頁。JS前端緩存的設計空間換取時間，緩存永遠計算機設計的重中之重，從cpu到io，到處都可以看到緩存的身影，JS前端架構設計重，緩存設計必不可少。JS數(shù)據(jù)及對象的緩存瀏覽頁面的緩存第三十六頁，共70頁。模擬k/v形式的簡單前端緩存設計前端緩存的設計調(diào)用形式Object緩存對象第三十七頁，共70頁?；趈Query緩存設計前端緩存的設計第三十八頁，共70頁。2.3基于CMD規(guī)范的模塊化設計遵循CMD規(guī)范的前端設計具備可維護性、可測試性。在運行啟動加載時，每個模塊能夠按需進行加載。第三十九頁，共70頁?；贑MD規(guī)范的SeaJS

CMD（CommonModuleDefinition），是SeaJS在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，該規(guī)范明確了模塊的基本書寫格式和基本交互規(guī)則。在CMD規(guī)范中，一個模塊就是一個文件。第四十頁，共70頁。開發(fā)規(guī)范定義第四十一頁，共70頁。SeaJS框架的目錄結構定義以上為基于ＣＭＤ規(guī)范設計的一個系統(tǒng)，在模塊化設計中。采用ＣＭＤ規(guī)范可以規(guī)范模塊的書寫格式、能自動處理模塊的依賴，還非常有助于代碼組織、開發(fā)調(diào)試和性能優(yōu)化。（注：支付寶是采用基于ＣＭＤ規(guī)范的SeaJS進行前端架構的）第四十二頁，共70頁。SeaJS模塊的編寫SeaJS模塊標識的定義與目錄結構相同，其他關聯(lián)模塊的引入采用require。第四十三頁，共70頁。SeaJS模塊的引用采用require引入關聯(lián)模塊，實現(xiàn)了其他關聯(lián)模塊的動態(tài)異步加載。第四十四頁，共70頁。SeaJS模塊接口的導出SeaJS通過module.exports可實現(xiàn)模塊公共接口的導出。第四十五頁，共70頁。SeaJS的程序啟動入口SeaJS采用seajs.use為頁面JS腳本執(zhí)行的入口。第四十六頁，共70頁。編碼調(diào)試“工欲善其事必先利其器”，在前端編碼過程當中，編碼調(diào)試的工具的選擇與技巧的掌握夠大幅度提高前端腳本編碼的速度與質(zhì)量。第四十七頁，共70頁。瀏覽器選擇編碼調(diào)試前端ＪＳ腳本的調(diào)試選擇的瀏覽器可以根據(jù)項目兼容性的需要進行選擇，在前期開發(fā)階段建議使用ＩＥ８以上、Chrome、Firefox等集成調(diào)試工具比較好的瀏覽器（選擇原生態(tài)的，不要被封裝過的，如：“雙核”瀏覽器），需要兼容性測試時再選擇需要兼容的瀏覽器。第四十八頁，共70頁。調(diào)試輸出編碼調(diào)試第四十九頁，共70頁。自定義調(diào)試輸出lw.utils.debug調(diào)試輸出

自定義調(diào)試輸出在執(zhí)行時會把輸出信息展現(xiàn)在頁面的最頂端。第五十頁，共70頁。斷點編碼調(diào)試通過F12打開調(diào)試窗口，找到需要斷點的代碼設置斷點；也可以在JavaScript代碼中加入一句debugger來手工造成一個斷點效果。第五十一頁，共70頁。Chrome調(diào)試時自動清除前端緩存的設置編碼調(diào)試第五十二頁，共70頁。IE11調(diào)試時自動清除前端緩存的設置編碼調(diào)試第五十三頁，共70頁。3發(fā)布發(fā)布規(guī)則第五十四頁，共70頁。壓縮合并工具采用雅虎的yuicompressorJavaScript腳本壓縮工具結合ant腳本進行腳本的壓縮與合并。第五十五頁，共70頁。云平臺公共腳本庫壓縮合并的Ant腳本第五十六頁，共70頁。版本發(fā)布的注意事項第五十七頁，共70頁。三、總結反思及心得體會第五十八頁，共70頁。1、總結第五十九頁，共70頁。2、反思第六十頁，共70頁。3、學習心得體會需要熟練應用HTML、DIV與CSS學習心得體會第六十一頁，共70頁。了解原生態(tài)的DOM編程、接觸并了解Ajax的原理學習心得體會第六十二頁，共70頁。了解不同瀏覽器之間的差異學習心得體會第六十三頁，共70頁。掌握幾種開發(fā)測試工具學習心得體會第六十四頁，共70頁。熟悉JavaScript每一個方法