JavaScript前端架構(gòu)設(shè)計(jì)v

1、一、JS架構(gòu)設(shè)計(jì)的背景淘寶前端工程師的增長? 前端架構(gòu)的重要性阿里巴巴頁面性能優(yōu)化? 前端架構(gòu)的重要性頁面性能優(yōu)化： 20秒12秒8.5秒?腳本數(shù)量的龐大? 前端架構(gòu)的重要性腳本homeConsole.js達(dá)到了13389行（未包含注釋與空行）,壓縮后達(dá)到527kb！不同瀏覽器支持的需要? 為什么要架構(gòu)設(shè)計(jì)用戶觀念改變的需要? 為什么要架構(gòu)設(shè)計(jì)構(gòu)建龐大項(xiàng)目的需要? 為什么要架構(gòu)設(shè)計(jì)項(xiàng)目的需要? 為什么要架構(gòu)設(shè)計(jì)沒有架構(gòu)設(shè)計(jì)的弊端二、JS架構(gòu)設(shè)計(jì)1、JavaScript架構(gòu)演變歷程2、JS前端架構(gòu)的步驟.1 松散型的模塊化設(shè)計(jì)沒有使用具體的模塊化設(shè)計(jì)的框架，根據(jù)業(yè)務(wù)模塊需求進(jìn)行腳本的設(shè)計(jì)，不同頁

2、面對(duì)自身調(diào)用的模塊進(jìn)行按需引用、加載?；陧撁娴哪K代碼加載方式? 松散型的模塊化設(shè)計(jì)模塊1代碼模塊2代碼模塊3代碼模塊公共代碼基礎(chǔ)庫框架2.1.1 需求確認(rèn)在JavaScript前端架構(gòu)之前首先要進(jìn)行需求的分析、確認(rèn)。需求確認(rèn)的內(nèi)容包括：、用戶對(duì)象2、用戶計(jì)算機(jī)水平3、使用的瀏覽器4、使用的計(jì)算機(jī)設(shè)備5、主要的操作優(yōu)克普云PaaS建模平臺(tái)需求確認(rèn)?通過分析PaaS建模的用戶群體，可以得出初步的結(jié)論：PaaS建模前端主要關(guān)注功能的實(shí)現(xiàn)，對(duì)瀏覽器并沒有太多的限制要求，瀏覽器支持IE8以上的版本即可（瀏覽器支持的減少可以降低前端很多工作量）。2.2 當(dāng)前流行的框架? 框架的選擇jQueryYUIP

3、rototypeDOJOJavaScriptMVCeasyUIEXTMooToolsminiUI框架與應(yīng)用的關(guān)系? 框架的選擇產(chǎn)品需求產(chǎn)品需求product通用組件通用組件通用lib包基礎(chǔ)庫基礎(chǔ)庫框架框架選擇的考慮因素? 框架的選擇2.1.3 目錄結(jié)構(gòu)? 定義規(guī)則優(yōu)克普云平臺(tái)PaaS前端腳本目錄結(jié)構(gòu)? 目錄業(yè)務(wù)無關(guān)的公共庫結(jié)構(gòu)第三方框架業(yè)務(wù)模塊的腳本2.1.4 應(yīng)用編碼?采用閉包的模塊設(shè)計(jì)? 應(yīng)用編碼沒有采用閉包的開發(fā)方法? 閉包設(shè)計(jì)沒有采用閉包的設(shè)計(jì)，所有的屬性與方法的定義全部對(duì)外開放，其他模塊調(diào)用API很混亂，并容易引起全局沖突。采用閉包的模塊開發(fā)方法? 閉包設(shè)計(jì)采用閉包后，私有的方法與公

4、有的方法進(jìn)行了區(qū)分，外部模塊訪問不到datalistSelector的私有對(duì)象與方法。通用控件的設(shè)計(jì)為了提高可復(fù)用性、可擴(kuò)展性，在項(xiàng)目中經(jīng)常要設(shè)計(jì)能夠符合不同需求的通用控件，通用控件的設(shè)計(jì)也能夠?yàn)榻窈蟀l(fā)展自己的框架打下基礎(chǔ)。通用選擇框控件的需求通用選擇框最終展示結(jié)果? 嵌入頁面? 彈出窗口通用選擇框的目錄結(jié)構(gòu)? 通用選擇框設(shè)計(jì)展示模板的配置只要更改模板的.html，css樣式通用選擇框提供簡單的接口? 通用選擇框設(shè)計(jì)定義通用選擇框的模塊及對(duì)外開放的接口，options參數(shù)為外部擴(kuò)展開發(fā)傳入的參數(shù)。通用選擇框options擴(kuò)展開發(fā)接口? 通用選擇框設(shè)計(jì)是否多選是否彈出窗口通用選擇框options

5、參數(shù)數(shù)據(jù)源接口? 通用選擇框設(shè)計(jì)最終的調(diào)用方式? 通用選擇框設(shè)計(jì)定義以樹形方式展示的字典選擇框數(shù)據(jù)來源格式? 通用選擇框設(shè)計(jì)JS前端緩存的設(shè)計(jì)空間換取時(shí)間，緩存永遠(yuǎn)計(jì)算機(jī)設(shè)計(jì)的重中之重，從cpu到io，到處都可以看到緩存的身影，JS前端架構(gòu)設(shè)計(jì)重，緩存設(shè)計(jì)必不可少。JS數(shù)據(jù)及對(duì)象的緩存瀏覽頁面的緩存模擬k/v形式的簡單前端緩存設(shè)計(jì)? 前端緩存的設(shè)計(jì)Object緩存對(duì)象調(diào)用形式基于jQuery緩存設(shè)計(jì)? 前端緩存的設(shè)計(jì)2.3 基于CMD規(guī)范的模塊化設(shè)計(jì)?遵循CMD規(guī)范的前端設(shè)計(jì)具備可維護(hù)性、可測(cè)試性。在運(yùn)行啟動(dòng)加載時(shí)，每個(gè)模塊能夠按需進(jìn)行加載?；贑MD規(guī)范的SeaJSCMD（Common Mo

6、dule Definition），是SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出，該規(guī)范明確了模塊的基本書寫格式和基本交互規(guī)則。在 CMD 規(guī)范中，一個(gè)模塊就是一個(gè)文件。開發(fā)規(guī)范定義SeaJS框架的目錄結(jié)構(gòu)定義?以上為基于規(guī)范設(shè)計(jì)的一個(gè)系統(tǒng)，在模塊化設(shè)計(jì)中。采用規(guī)范可以規(guī)范模塊的書寫格式、能自動(dòng)處理模塊的依賴，還非常有助于代碼組織、開發(fā)調(diào)試和性能優(yōu)化。（注：支付寶是采用基于規(guī)范的SeaJS進(jìn)行前端架構(gòu)的）SeaJS模塊的編寫?SeaJS模塊標(biāo)識(shí)的定義與目錄結(jié)構(gòu)相同，其他關(guān)聯(lián)模塊的引入采用require。SeaJS模塊的引用?采用require引入關(guān)聯(lián)模塊，實(shí)現(xiàn)了其他關(guān)聯(lián)模塊的動(dòng)態(tài)異動(dòng)態(tài)異步加

7、載步加載。SeaJS模塊接口的導(dǎo)出?通過module.exports可實(shí)現(xiàn)模塊公共接口的導(dǎo)出。SeaJSSeaJS的程序啟動(dòng)入口?SeaJS采用seajs.use為頁面JS腳本執(zhí)行的入口。編碼調(diào)試“工欲善其事必先利其器”，在前端編碼過程當(dāng)中，編碼調(diào)試的工具的選擇與技巧的掌握夠大幅度提高前端腳本編碼的速度與質(zhì)量。瀏覽器選擇? 編碼調(diào)試前端腳本的調(diào)試選擇的瀏覽器可以根據(jù)項(xiàng)目兼容性的需要進(jìn)行選擇，在前期開發(fā)階段建議使用以上、Chrome、Firefox等集成調(diào)試工具比較好的瀏覽器（選擇原生態(tài)的，不要被封裝過的，如：“雙核”瀏覽器），需要兼容性測(cè)試時(shí)再選擇需要兼容的瀏覽器。調(diào)試輸出? 編碼調(diào)試自定義調(diào)

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