JavaScript前端架構(gòu)設(shè)計v16

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

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

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

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

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

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

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

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

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

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

11、用以上、Chrome、Firefox等集成調(diào)試工具比較好的瀏覽器（選擇原生態(tài)的，不要被封裝過的，如：“雙核”瀏覽器），需要兼容性測試時再選擇需要兼容的瀏覽器。調(diào)試輸出alert 最基本的輸出方式console.log Firedebug的輸出方式，IE從8.0開始引入，chrome默認(rèn)就有，使用與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ǎn)編碼調(diào)試通過F12打開調(diào)試窗口，找到需要斷點(diǎn)的代碼設(shè)置斷點(diǎn)；也

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