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

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

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

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

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

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

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

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

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

10、JS進(jìn)行前端架構(gòu)的）SeaJS模塊的編寫(xiě)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)異步加載。SeaJS模塊接口的導(dǎo)出SeaJS通過(guò)module.exports可實(shí)現(xiàn)模塊公共接口的導(dǎo)出。SeaJS的程序啟動(dòng)入口SeaJS采用seajs.use為頁(yè)面JS腳本執(zhí)行的入口。編碼調(diào)試“工欲善其事必先利其器”，在前端編碼過(guò)程當(dāng)中，編碼調(diào)試的工具的選擇與技巧的掌握夠大幅度提高前端腳本編碼的速度與質(zhì)量。瀏覽器選擇編碼調(diào)試前端腳本的調(diào)試選擇的瀏覽器可以根據(jù)項(xiàng)目兼容性的需要進(jìn)行選擇，在前期開(kāi)發(fā)階段建議使

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

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