文档章节

手机腾讯网mt框架2.0发布

卢勇福
 卢勇福
发布于 2014/05/30 23:17
字数 1759
阅读 569
收藏 18

MT2.0新增特性
  • 本地存储异常回调
  • 统计回调
  • combo支持
  • 新增LCS增量算法,将更新粒度精确到字符




什么是MT

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

github:https://github.com/mtjs/mt

为了方便大家我们还在http://git.oschina.net上放了一个镜像:

http://git.oschina.net/luyongfugx/mt

为什么使用MT

  • 无更新不下载
  • 简单友好的模块定义规范
  • 简单易用的打包管理工具
  • 强大的js增量更新代理服务


本地存储异常,统计回调

设置回调

通过设施g_config的storeInc对象的statFunc,storeExFunc两个函数,可以设置统计和本地存储异常回调 , statFunc在请求每个js的时候触发,便于统计每个js的请求情况,storeExFunc在写本地存储异常回调, 将脚本内容写入本地存储出现异常的时候调用,用来提供给业务清理本地存储。

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, 'debug': false
                },

combo支持

冷combo

冷combo就是在打包混淆的时候把多个不同的模块打包进同一个js,前台下载的时候直接下载这个js 这个MT1.0已经支持,打包配置如下:

{ './release/{pv}/base-{fv}.js': {
                                files: ['./js/init.js','./js/util.js']
                         }, './release/{pv}/page/p1-{fv}.js': {
                            files: ['./js/page/p1.js']
                         }, './release/{pv}/page/p2-{fv}.js': {
                            files: ['./js/page/p2.js']
                         }, './release/{pv}/page/p3-{fv}.js': {
                            files: ['./js/page/p3.js']
                         }
                     }

可以看到我们的init,util模块被打到base.js里,达到冷combo的目的

热combo,半热combo

半热combo是相对冷combo来说的,除了走打包实现冷combo以外,我们还支持通过前台配置来实现半热combo或热combo

combo:{ //是否启用combo cb:true, //哪些模块的js走半热combo一块下载 //,这里数组的每个项是要一起下载的模块 conf:['init,util','p1,p2,p3']

                            }

上面的代码,我们设置了combo的cb为true,说明走combo. conf的配置则设置了哪些模块是要走combo一起下载的, 即使打包脚本没有把他们打在一起。 为了看效果,我们先把cb设为false,conf设置为空数组,表示不走combo:

combo:{ //是否启用combo cb:flase, //哪些模块的js走半热combo一块下载 //,这里数组的每个项是要一起下载的模块 conf:[]

                                   }

我们看下网络请求:

可以看到base.js,p1.js,p2.js,p3.js是分开下载的,说明没有走combo

然后设置了combo的cb为true,说明走combo. 我们看下网络请求:

可以看到base.js,p1.js是分开下载的,而p2.js,p3.js是一起下载的,这是因为mt2.0自己分析了依赖,把某个模块共同依赖一起下载了,这个例子里面p1依赖了p2,p3两个模块 所以p2,p3被一起下载了,这就是热combo!

这时候我们想,我想让p1,p2,p3一次就下载了,怎么弄?很简单,我们只要设置combo.conf为如下

combo:{ //是否启用combo cb:true, //哪些模块的js走半热combo一块下载 //,这里数组的每个项是要一起下载的模块 conf:['init,util','p1,p2,p3']

                                    }

我们看下网络请求:

ok,p1,p2,p3一次就下载了!!,这就是半热combo,需要配置一下conf.

新增基于lcs算法的增量更新

MT1.0的增量更新是基于chunk算法来实现的,精确度是到块级别的。后来很多朋友给我意见,说其实可以做得更加精确一些,精确到字符级别。 于是我用lcs算法实现了精确到字符级别的设计,最后这个demo也可以看作是整个MT2.0的使用方法

首先到我们的github:https://github.com/mtjs/mt下载代码,然后看mt2.0文件夹下的demo目录,里面有个test.html,可以看到总配置代码

var g_config =  {
                            jsmap:{
                                'init': 'base.js',
                                'util': 'base.js',
                                'p1': 'page/p1.js',
                                'p2': 'page/p2.js',
                                'p3': 'page/p3.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,
                                'debug': false
                            },
                            //是否走combo,同时支持conf指定哪几个js是合并下载的

                            combo:{cb:true,conf:["init,util","p1,p2,p3"]},
                            testEnv: false,
                            staticPath: '/release',
                            serverDomain: 'http://localhost:6600',
                            buildType: 'project',
                            ver: '2014053000002'

                        };

在2014053000002版本,我们的p2代码如下:

define('p2', [], function () {
                        console.log('p2 ok!'); document.write('p2 ok!<br>');
                        });

                        }

本地打包

我们运行demo目录下的build.sh ,其实是执行命令

node ../js/mtbuild.js test.html build.conf  lcs

第三个参数说明走lcs增量更新算法,你也可以设置成chunk走老算法

启动增量服务

到js目录下执行命令

node storeincServer.js lcs ../demo

第2个参数说明走lcs增量更新算法,你也可以设置成chunk走老算法,第三个参数是根目录,这里设置成../demo

效果演示

打开chrome(必须支持localstorage),输入地址:http://localhost:6600/test.html,可以看到请求的是全量的js

本地存储里的内容是2014053000002版本的:

接着我们修改p2.js代码,加上"lcs"这3个字 :

define('p2', [], function () {
                                  console.log('p2 ok!'); document.write('p2 ok lcs!<br>');
                                  });

然后重新运行命令

node ../js/mtbuild.js test.html build.conf  lcs

这时候生成2014053000003版本代码,打开chrome(必须支持localstorage), 输入地址:http://localhost:6600/test.html,这时候可以看到请求的内容是增量的,并且精确到了字符级别:

我们来看下同样是这个修改,如果我们走chunk算法,会是什么样子。 我们需要重新走一遍上边的流程,但是把build.sh命令的lcs参数改成chunk,启动storeincServer时的lcs也改成chunk, 这里就不罗嗦步骤了,我们直接看看走chunk是的网络请求:

发现相对lcs算法,chunk的精确度是比较差的,所以推荐使用lcs算法

mt1.0介绍文档

mt1.0的同学请看mt1.0


© 著作权归作者所有

共有 人打赏支持
卢勇福

卢勇福

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

评论(4)

卢勇福
卢勇福

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

引用来自“小编辑”的评论

已经在首页发软件更新新闻了:) 下回可直接通过首页投递新闻:)

谢谢,投递那一块有bug,软件里面找不到mt...

引用来自“小编辑”的评论

嗯嗯,找不到可以不写,我们在审核的时候帮你处理:)
ok,收到:)
小编辑
小编辑

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

引用来自“小编辑”的评论

已经在首页发软件更新新闻了:) 下回可直接通过首页投递新闻:)

谢谢,投递那一块有bug,软件里面找不到mt...
嗯嗯,找不到可以不写,我们在审核的时候帮你处理:)
卢勇福
卢勇福

引用来自“小编辑”的评论

已经在首页发软件更新新闻了:) 下回可直接通过首页投递新闻:)

谢谢,投递那一块有bug,软件里面找不到mt...
小编辑
小编辑
已经在首页发软件更新新闻了:) 下回可直接通过首页投递新闻:)
手机腾讯网前端框架 MT 2.0.1 发布

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

卢勇福
2014/07/28
6K
12
手机腾讯网mt框架之mtwebapp示例解析。

手机腾讯网mt2.0框架发布有一段时间,但是经常有朋友问怎么用,其实项目里面是有一个基于jqmobi和ratchet的webapp示例的,这里我们就来分析一下。代码目录在:https://github.com/mtjs/mt/tr...

卢勇福
2014/11/12
0
10
手机腾讯网前端框架 MT 2.2.2 版本发布

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

卢勇福
2014/11/26
6.2K
17
MT —— 来自腾讯的移动端 JS 模块管理框架

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

oschina
2014/04/23
42
0
实用高效,27款腾讯热门开源项目推荐

腾讯作为互联网行业的一大巨头,一直都不吝啬将好的技术开放,与广大开发者共享,未来也将推出VR开放平台和AI技术。腾讯在全球合作伙伴大会披露了未来五年的发展思路,在技术共享方面,腾讯希...

达尔文
2016/10/19
13.9K
29

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
4分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
38分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部