快速搭建webapp和業(yè)務(wù)使用課件

1、使用MT快速搭建移動webapp 2014-04-26自我介紹趙娜手機騰訊網(wǎng)前端工程師QQ：79397550E-mail：79397550目錄4MT介紹設(shè)計原理和實現(xiàn)快速搭建和業(yè)務(wù)使用與主流框架區(qū)別未來和展望MT介紹什么是MT：MT（mobile tencent/mobile touch）手機騰訊網(wǎng)前端團隊開發(fā)維護的一個專注于移動端webapp的模塊管理和模塊加載的框架主要功能：1.模塊依賴管理2.模塊加載（支持增量更新，本地存儲）3.頁面的路由和分發(fā)4.簡單易用的打包上傳工具特點：1.專注于移動端，以為用戶省流量為目的，無更新不下載2.方便接入，自由組合，接入者可以只選擇其中某一項，或者某幾

2、項功能3.開發(fā)者只需要專注于自己的業(yè)務(wù)行業(yè)數(shù)據(jù)網(wǎng)絡(luò)分布設(shè)計原理和實現(xiàn)二、MT設(shè)計原理和實現(xiàn)設(shè)計和實現(xiàn)-core.js模塊依賴管理 core.js功能：負責(zé)管理模塊依賴，AMD規(guī)范，相較requireJs和seajs，功能單一，接口簡潔，輕量。壓縮完僅1KB使用：設(shè)計和實現(xiàn)-storeinc.js模塊加載 storeinc.js功能：負責(zé)模塊的加載，與模塊管理工具配合使用，可以實現(xiàn)本地存儲，和增量合并的功能設(shè)計和實現(xiàn)-storeinc.js模塊加載 storeinc.js設(shè)計和實現(xiàn)-本地緩存效果本地存儲效果：設(shè)計和實現(xiàn)-業(yè)務(wù)使用效果4非wifi下測速結(jié)論：新版的速度占比相比老版，3s以內(nèi)提升了4

3、%設(shè)計和實現(xiàn)-pm.js頁面時序和路由管理 pm.js功能：1.事件驅(qū)動，利用觀察者模式解耦，負責(zé)頁面加載的時序管理和路由控制2.將頁面的加載時序分成幾個階段，進行不同的事件分發(fā)，如果采用模塊管理，一個頁面則被看作一個模塊，該功能需與core.js配合使用。3.hashchange觸發(fā)，與業(yè)務(wù)無關(guān)設(shè)計和實現(xiàn)-pm.js頁面時序和路由管理 pm.js設(shè)計和實現(xiàn)-配合使用三個主要功能如何配合：快速搭建webapp和業(yè)務(wù)使用三、快速搭建webapp和業(yè)務(wù)使用快速搭建webapp業(yè)務(wù)接入：快速搭建webapp快速搭建webapp在業(yè)務(wù)中的使用：業(yè)務(wù)接入效果業(yè)務(wù)接入效果：主流框架區(qū)別四、主流框架區(qū)別st

4、ackoverflow 2013stackoverflow 2013最熱語言AngularJsstackoverflow 2013新技術(shù)討論與主流框架區(qū)別前端主流框架：MVC ，MVVM框架代表：AngularJS，backboneAngularJS特點：數(shù)據(jù)和視圖的雙向綁定,將 Model 和 View 自動關(guān)聯(lián)了起來，數(shù)據(jù)有修改，view會自動更改。缺點：接入門檻高，而且比較重，開發(fā)者不能隨意改變dom的結(jié)構(gòu)優(yōu)點：社區(qū)活躍，也有大量ui插件，易于測試與主流框架區(qū)別BackBone：特點：實現(xiàn)了MVC和router的功能優(yōu)點：可以更自由的與第三方類庫搭配，不太要求固定的模式，靈活性高，輕量缺點：深度依賴underscore，代碼組織上沒有很好的規(guī)范與主流框架區(qū)別MT：特點：移動應(yīng)用搭建的解決方案，so，不能稱之為框架優(yōu)點：可以更自由的與第三方類庫搭配，輕量，靈活性高，自由組合，讓開發(fā)者專注于自己的業(yè)務(wù)缺點：功能少，交給業(yè)務(wù)實現(xiàn)的東西多，靈活是一把雙刃劍未來和展望展望和未來：1.繼續(xù)專注移動開發(fā)的幾個特點，網(wǎng)絡(luò)情況差，手機內(nèi)存小2.集成一些適用于移動開