手機騰訊網mt框架之mtwebapp示例解析。

手機騰訊網mt2.0框架發佈有一段時間，可是常常有朋友問怎麼用，其實項目裏面是有一個基於jqmobi和ratchet的webapp示例的，這裏咱們就來分析一下。 代碼目錄在：https://github.com/mtjs/mt/tree/master/demo/mtwebapp 下你們能夠看下。 首先咱們看下咱們這個例子都用了哪些東西 ###1.mt MT是手機騰訊網前端團隊開發維護的一個專一於移動端的、帶有增量更新特點的js模塊管理框架.這個不用說了，就是咱們今天要講的東西,你們以爲不錯請在github上給個star，github地址：https://github.com/mtjs/mt ###2.jqmobi 這個當年是跟zepto齊名的基礎庫後來被intel收購了。。。，你們感興趣的話能夠把這裏的jqmobi替換成zepto，替換步驟這裏就不說了 ###3.ratchet 專一移動的css框架，號稱mobile下得bootstrap,試用了一下有很多問題，可是用來作個例子是能夠的：） ###4.pm.js，mtpl.js 前者是手機騰訊網webapp哈希路由管理器（在手機騰訊網咱們叫虛擬頁面管理器，這是它叫pm.js的由來），後者是一個手機騰訊網的一個微型模板引擎，特色就是小而快，簡單實用。

##好了咱們如今仔細看看一個示例 咱們把https://github.com/mtjs/mt/tree/master/demo/mtwebapp 直接放到tomcat的webapps目錄下（java同窗都知道，這裏就不解釋了），整個示例是一個包含2個虛擬頁面（暫且這麼叫吧）的單頁webapp。 而後，咱們修改mtwebapp/WEB-INF/web.xml的servlet配置：

<!-- lang: xml -->
    <display-name>StoreIncServlet</display-name>
<servlet-name>StoreIncServlet</servlet-name>
<servlet-class>com.storeinc.StoreIncServlet</servlet-class>
<init-param>
<param-name>jsPath</param-name>
<param-value>/Users/waynelu/nginxhtmls/jetty/webapps/mtwebapp/</param-value>
</init-param>
<init-param>
<param-name>chunkSize</param-name>
<param-value>12</param-value>
</init-param>
<init-param>
<param-name>diffAlg</param-name>
<param-value>lcs</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>StoreIncServlet</servlet-name>
<url-pattern>/storeinc/*</url-pattern>
</servlet-mapping>

把jsPath的值改爲你本身的路徑， ###jsPath js存放路徑 ###diffAlg 增量更新算法選擇，分別是lcs:編輯距離計算 chunk塊匹配 ###chunkSize 算法是chunk時的塊長度

而後訪問 http://localhost:8080/mtwebapp/index.jsp 能夠看到一個Movie finder程序。

程序就是這麼個程序，那麼咱們來看看代碼： 先看程序結構：

###js/common 包括了jqmobi,mt,pm,mtpl等基礎庫代碼， ###js/pages 包含index.js, theater.js分別是兩個頁面的業務代碼 ###js/init.js 則是整個webapp的入口程序

咱們看一下index.jsp:

<script type="text/javascript" id="file_config">
var g_config = {
  //代碼模塊映射，說明jqmobi,pm,basepage,txtpl,init這幾個模塊都存在base.js裏，theater,index兩個頁面各自存放
    jsmap: {
        "jqmobi": "/base.js",
        "pm": "/base.js",
        "basepage": "/base.js",
        "txTpl": "/base.js",
        "theater": "/pages/theater.js",
        "index": "/pages/index.js",
        "init": "/base.js"
    },
storeInc:{
    //統計回調，統計腳本請求狀況,jsUrl是js地址，mode是請求模式，
    //full:表示全量請求，inc表示增量請求，local表示從本地存儲讀取
    statFunc:function(jsUrl,mode){
        console.log('get '+jsUrl+' from '+mode);
    },
    //寫本地存儲異常回調，將腳本內容寫入本地存儲出現異常的時候調用，
    //用來提供給業務清理本地存儲，storekey表示寫如的key
    storeExFunc:function(storeKey){
        console.log('set store item '+storeKey+' exception') ;
    },
    'store': true,  //是否啓用本地存儲
    'inc': true, //是否使用增量更新
    'proxy':true,//是否走servlet方式計算增量文件
    'debug': false
},
//是否走combo,同時支持conf指定哪幾個js是合併下載的

combo:{cb:true,conf:[]},
testEnv: false,
staticPath: 'release',//相對路徑
serverDomain: 'http://10.0.0.7:8080/mtwebapp/storeinc/',//servlet地址，這個就是上面web.xml裏配置的servlet
ver: '2014071500017',//版本號
buildType: 'project'
}

###jsmap 在服務器混淆的過程當中哪一個js模塊最終打到哪一個js裏

storeInc

關於增量更新的一些配置，好比是否啓用增量更新，統計回調，錯誤回調等

###serverDomain+staticPath 這個是js最終的請求地址

###ver js版本號，爲裏測試demo裏放了index.jsp index1.jsp兩個文件，分別對應不一樣的版本號

而後咱們看看打包配置 build.conf文件:

<!-- lang: js -->
{

 './release/{pv}/base-{pv}.js': 

    {

        files: ['js/common/jqmobi.js', 'js/common/pm.js', 'js/common/basepage.js', 'js/common/txTpl.js', 'js/init.js']

},

      'pages':



  {

        dir: './js/pages',



        releaseDir: './release/{pv}/pages/'



      }



    }

說明jqmobi,pm,basepage,txtpl,init等模塊被打到了base的js裏 pages下的各個頁面則單獨打包

打包腳本build.sh: node /Users/waynelu/nginxhtmls/mt2/js/mtbuild.js index.jsp build.conf lcs 主要是調用mubuild.js，參數以下：

index.jsp 用來讀取cdn地址和上一個版本號拼成上一版本地址和本次版本計算增量文件，另外會修改index.jsp裏的版本號 build.conf 就是上面的打包配置 lcs 是增量更新算法

好了，接下來咱們分別訪問index.jsp和index1.jsp,切換2014071600018,2014071500017兩個版本的js,這時候咱們一下網絡請求：

從這裏咱們能夠看到，在這2個版本之間切換用戶實際只下載了不到1k的流量，而事實上若是不走增量更新base.js這個文件用戶是須要下載25k的js的

好了，到此咱們完整的分析了mt的一個mtwebapp demo，但願對你們有用 再說一遍咱們項目github #https://github.com/mtjs/mt MT是手機騰訊網前端團隊開發維護的一個專一於移動端的、帶有增量更新特點的js模塊管理框架 你們以爲不錯請加star!

另外個人微博： waynelu 歡迎你們跟我交流