文档章节

手机腾讯网mt框架之mtwebapp示例解析。

卢勇福
 卢勇福
发布于 2014/11/12 10:19
字数 1412
阅读 1643
收藏 67

手机腾讯网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 欢迎大家跟我交流

© 著作权归作者所有

共有 人打赏支持
卢勇福

卢勇福

粉丝 39
博文 19
码字总数 22106
作品 9
海淀
高级程序员
加载中

评论(10)

卢勇福
卢勇福

引用来自“feishifeifei”的评论

这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇

引用来自“卢勇福”的评论

可以到https://github.com/mtjs/mt 看看,上面有算法原理。java只是一个实现,也可以走nodejs或者直接离线计算

引用来自“feishifeifei”的评论

嗯嗯 你给的那个网址我也看过,怎么单纯的使用这个框架呢,像JQ只需要在HTML文件中引入一个JQ文件,我只做过前端的页面编写,那让看的那个网址中的例子还是不太明白,该怎么部署这个框架哇
嗯,这个是比较难懂一些,你可以把java看作是静态资源服务器:)
feishifeifei
feishifeifei

引用来自“feishifeifei”的评论

这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇

引用来自“卢勇福”的评论

可以到https://github.com/mtjs/mt 看看,上面有算法原理。java只是一个实现,也可以走nodejs或者直接离线计算
嗯嗯 你给的那个网址我也看过,怎么单纯的使用这个框架呢,像JQ只需要在HTML文件中引入一个JQ文件,我只做过前端的页面编写,那让看的那个网址中的例子还是不太明白,该怎么部署这个框架哇
feishifeifei
feishifeifei
这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇
卢勇福
卢勇福

引用来自“feishifeifei”的评论

这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇
可以到https://github.com/mtjs/mt 看看,上面有算法原理。java只是一个实现,也可以走nodejs或者直接离线计算
feishifeifei
feishifeifei
这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇
feishifeifei
feishifeifei
这个怎么用啊 我是学web前端的,读了两遍还是没看懂,用这个得会Java吗 这是后台用的框架,还是前端用的框架哇
silence_狂想
silence_狂想
强大,研究研究
lixiaokai2008
lixiaokai2008
好东东
卢勇福
卢勇福

引用来自“孤独的3”的评论

上次没仔细看,这次果断收藏,好好去研究下!

0,欢迎欢迎,喜欢的话到github给个star
如梦技术
如梦技术
上次没仔细看,这次果断收藏,好好去研究下!
手机腾讯网前端框架 MT 2.2.2 版本发布

手机腾讯网前端框架MT 2.2.2 版本发布 主要更新: 使用偏移算法压缩编辑距离算法计算生成的增量文件,减少增量文件的体积大小。 示例如下: 首先下载mt(假设您已经有nodejs环境)项目,cd到...

卢勇福
2014/11/26
6.2K
17
OSChina 技术周刊第九期 —— 每周技术精选,值得一看!

每周技术抢先看,总有你想要的! 移动开发 【翻译】介绍 Visual Studio 的 Android 模拟器 【博客】手机腾讯网mt框架之mtwebapp示例解析。 【博客】《Android深入透析》之常用设计模式经验谈...

OSC编辑部
2014/11/16
3.8K
4
手机腾讯网mt2.0增量更新算法优化小记

手机腾讯网[mt2.0][1]目前已经应用在线上案例,在使用的过程中,为了提高增量更新的效率,我们使用编辑距离算法来替代原来的chunk算法,在这个过程中碰到了一个性能问题,我们这里写一下优化方...

卢勇福
2014/08/13
0
9
手机腾讯网前端框架 MT 2.0.1 发布

手机腾讯网前端框架 MT 2.1.0 发布 ============= 主要更新 ------------------------ 1. 优化编辑距离算法性能,混合使用chunk,lcs两种算法提升性能,并保持增量更新字符级别的精度 2. 更新...

卢勇福
2014/07/28
6K
12
MT —— 来自腾讯的移动端 JS 模块管理框架

MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架。

oschina
2014/04/23
42
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx 负载均衡

一.配置方式 1.轮询(默认) 优点:实现简单; 缺点:不考虑每台服务器处理能力 2.权重 weight默认是1。如果有多个配置权重的节点,比较相对值。 15:10,只代表访问8080端口的概率是访问908...

imbiao
49分钟前
1
0
jQuery学习笔记180923

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选...

颖伙虫
今天
2
0
[python] colorama 模块 - 改变控制台输出文本的颜色

除了使用 PyQt 这样的图形化开发框架外,基本上 python 程序都是跑在控制台中的。很多时候,单纯使用黑白的文字不能很好地突出我们要显示的信息。有时候我们需要将错误的提示使用红色标注,而...

cometeme
今天
3
0
Makefile 学习 2 - 基于若干 Blog 的汇总

基于若干 Blog 汇总的 makefile 教程 陈皓 https://blog.csdn.net/haoel/article/details/2886 Makefile 进阶 1. Makefile 中的内容 显式规则。显式规则说明了,如何生成一个或多的的目标文件...

公孙衍
今天
2
0
NIO与BIO的区别、NIO的运行原理和并发使用场景

NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服务器,成为解决高并发与大量连接、I/O处理问题的...

Java干货分享
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部