樸實前行--模塊化重構(gòu)之旅劉暢臨.ppt

,樸實前行,模塊化重構(gòu)之旅,技術(shù)中心-網(wǎng)站研發(fā)部-前端 報告人：劉暢臨,目錄,第一部分 背景,第二部分 解決方案,第三部分 總結(jié)與展望,第一部分 背景,1.現(xiàn)有架構(gòu),1.1.自動化構(gòu)建工具,Closure Compiler、cssmin、imagemin,第一部分 背景,1.現(xiàn)有架構(gòu),1.2.代碼,include,共用,業(yè)務(wù),通用組件,業(yè)務(wù)腳本,第一部分 背景,2.問題,大,第一部分 背景,2.問題,重復(fù),依賴層次不清晰,內(nèi)容規(guī)劃欠妥,亂,第一部分 背景,2.問題,開發(fā)環(huán)境復(fù)雜,用例生成步驟繁瑣,我們在這里,雜,第三部分 總結(jié)與展望,第二部分 解決方案,第一部分 背景,第二部分 解決方案,使用新的高大上的框架,第二部分 解決方案,不用慫！就是干！,為何忽然在此出現(xiàn)=_=!,Why not?,1) 學(xué)習(xí)成本、項目風(fēng)險,2) 沒有充分利用好現(xiàn)有工具,第二部分 解決方案,需求s,前面那誰！別磨蹭！快走，趕著回家寫代碼呢！,3.亂明確代碼間的層次關(guān)系,2.大文件瘦身,1.按時、高質(zhì)量地完成項目,我們的目標,4.雜成為聰明的瞎子,第二部分 解決方案,行動,1. html,回到屬于你的地方,按功能分拆模塊,我只在乎你,簡化模板內(nèi)部邏輯,提前處理無法簡化的邏輯,通過id、class與js耦合,第二部分 解決方案,行動,2. css,使用stylus重新規(guī)劃樣式代碼,公共,布局,工具,通用模塊,業(yè)務(wù)線,模塊1、2、3,特殊工具、元件,元件,組合,重置,繼承,第二部分 解決方案,行動,2. css,引入模塊狀態(tài)類,手術(shù)前：,手術(shù)后：,js：,css：,第二部分 解決方案,行動,3. js,基礎(chǔ),基礎(chǔ)庫(jQuery),工具（Loader、Listener、Cookie、Storage）,UI組件（Dropdown、Dialog、Switchable）,模塊組織規(guī)范,業(yè)務(wù),通用業(yè)務(wù)邏輯 （BO）,通用業(yè)務(wù)組件（含UI）,業(yè)務(wù)模塊,應(yīng)用,購物袋,訂單結(jié)算,收銀臺,基礎(chǔ)架構(gòu),第二部分 解決方案,行動,3. js,M,維護本地數(shù)據(jù),監(jiān)聽動作變更事件,V,Dom Event Handler,Template,php+html+artTemplate,模塊組織規(guī)范,維護視圖數(shù)據(jù),發(fā)起動作變更事件,調(diào)用api,Listener,View交互,Dom Event,Render,調(diào)用業(yè)務(wù)組件,調(diào)用業(yè)務(wù)邏輯,監(jiān)聽數(shù)據(jù)變更事件 （本模塊）,發(fā)起數(shù)據(jù)變更事件,監(jiān)聽數(shù)據(jù)變更事件 （跨模塊）,第二部分 解決方案,行動,4. 基于grunt，弄一個東西，擺脫對環(huán)境、數(shù)據(jù)的依賴,1) 建立url配置（類型：模板、api）,2) 根據(jù)約定好的接口格式，生成對應(yīng)用例（php array、json）,3) url與用例綁定，訪問模擬頁面,左手寫代碼 右手寫詩的浪漫前端,數(shù)據(jù),敬請期待,一場史無前例的發(fā)布會,N年后可能有的,目錄,第一部分 背景,第三部分 總結(jié)與展望,第二部分 解決方案,第三部分 總結(jié)與展望,1.總結(jié),工程師首要的工作是按時、高質(zhì)量地完成項目,代碼重構(gòu)引入新框架，用好當(dāng)前的工具框架也可能帶來代碼質(zhì)量的飛躍,前后端分離也可以很簡單,2.展望,在閑暇中學(xué)習(xí)新工具、新框架,實現(xiàn)更nb的、與工具融合的模塊化,完善FeDP，提高生