博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手机腾讯网mt框架之mtwebapp示例解析。
阅读量:5871 次
发布时间:2019-06-19

本文共 2354 字,大约阅读时间需要 7 分钟。

  hot3.png

手机腾讯网mt2.0框架发布有一段时间,但是经常有朋友问怎么用,其实项目里面是有一个基于jqmobi和ratchet的webapp示例的,这里我们就来分析一下。 代码目录在: 下大家可以看下。 首先我们看下我们这个例子都用了哪些东西 ###1. MT是手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架.这个不用说了,就是我们今天要讲的东西,大家觉得不错请在github上给个star,github地址: ###2. 这个当年是跟zepto齐名的基础库后来被intel收购了。。。,大家感兴趣的话可以把这里的jqmobi替换成zepto,替换步骤这里就不说了 ###3. 专注移动的css框架,号称mobile下得bootstrap,试用了一下有不少问题,但是用来做个例子是可以的:) ###4.pm.js,mtpl.js 前者是手机腾讯网webapp哈希路由管理器(在手机腾讯网我们叫虚拟页面管理器,这是它叫pm.js的由来),后者是一个手机腾讯网的一个微型模板引擎,特点就是小而快,简单实用。

##好了我们现在仔细看看一个示例 我们把 直接放到tomcat的webapps目录下(java同学都知道,这里就不解释了),整个示例是一个包含2个虚拟页面(暂且这么叫吧)的单页webapp。 然后,我们修改mtwebapp/WEB-INF/web.xml的servlet配置:

StoreIncServlet
StoreIncServlet
com.storeinc.StoreIncServlet
jsPath
/Users/waynelu/nginxhtmls/jetty/webapps/mtwebapp/
chunkSize
12
diffAlg
lcs
StoreIncServlet
/storeinc/*

把jsPath的值改成你自己的路径, ###jsPath js存放路径 ###diffAlg 增量更新算法选择,分别是lcs:编辑距离计算 chunk块匹配 ###chunkSize 算法是chunk时的块长度

然后访问 可以看到一个Movie finder程序。

在此输入图片描述在此输入图片描述

程序就是这么个程序,那么我们来看看代码: 先看程序结构: 在此输入图片描述

###js/common 包括了jqmobi,mt,pm,mtpl等基础库代码, ###js/pages 包含index.js, theater.js分别是两个页面的业务代码 ###js/init.js 则是整个webapp的入口程序

我们看一下index.jsp:

###jsmap 在服务器混淆的过程中哪个js模块最终打到哪个js里

storeInc

关于增量更新的一些配置,比如是否启用增量更新,统计回调,错误回调等

###serverDomain+staticPath 这个是js最终的请求地址

###ver js版本号,为里测试demo里放了index.jsp index1.jsp两个文件,分别对应不同的版本号

然后我们看看打包配置 build.conf文件:

{ './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 # MT是手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架 大家觉得不错请加star!

另外我的微博: 欢迎大家跟我交流

转载于:https://my.oschina.net/luyongfugx/blog/343400

你可能感兴趣的文章
CSS 3 选择器
查看>>
社交网络浏览器RockMelt发布Beta 2版
查看>>
网络世界八大潜规则 你知道几个?,互联网营销
查看>>
一起谈.NET技术,Hello,Expression Blend 4 (含Demo教程和源码)
查看>>
艾伟也谈项目管理,需求管理成熟度的五个级别
查看>>
介绍 github
查看>>
【C】FindString之华为软件训练营考试_动态创建一个两维数组
查看>>
神经网络入门——13实现梯度下降
查看>>
QT_OPENGL-------- 4.可编程管线绘制三角形
查看>>
POJ - 3186 DP
查看>>
【转】inline-blcok 前世今生
查看>>
Python 简单的天气预报
查看>>
LocalReport Print with C# C#打印RDLC
查看>>
第二篇:JMeter+Ant(报告优化)
查看>>
java 自动补全
查看>>
linux(ubuntu)和windows下面快速搭建android开发环境
查看>>
团队作业五
查看>>
黄聪:数字签名是什么?
查看>>
Jmeter进行简单mysql数据库测试
查看>>
C# 内存回收
查看>>