腾讯移动前端框架 mt 2.0 发布

标签: 软件更新新闻 | 发表时间:2014-06-11 14:29 | 作者:
出处:http://www.oschina.net/?from=rss

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

Git: http://git.oschina.net/luyongfugx/mt
mt介绍文档: http://mt.tencent.com/mt1index.html

为什么使用MT

  • 无更新不下载

  • 简单友好的模块定义规范

  • 简单易用的打包管理工具

  • 强大的js增量更新代理服务

MT2.0新增特性

  • 本地存储异常回调

  • 统计回调

  • combo支持

  • 新增LCS增量算法

1.  本地存储异常,统计回调

设置回调

通过设施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  
},

2.  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.

3.  新增基于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算法

相关 [腾讯 移动 前端] 推荐:

腾讯移动前端框架 mt 2.0 发布

- - 开源中国社区最新新闻
MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架. mt介绍文档: http://mt.tencent.com/mt1index.html. 1.  本地存储异常,统计回调. 通过设施g_config的storeInc对象的statFunc,storeExFunc两个函数,可以设置统计和本地存储异常回调 , statFunc在请求每个js的时候触发,便于统计每个js的请求情况,storeExFunc在写本地存储异常回调, 将脚本内容写入本地存储出现异常的时候调用,用来提供给业务清理本地存储.

支付宝、腾讯前端开发工程师谈实战HTML5

- - 脚本爱好者
如今大热的 HTML5 到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自支付宝和腾讯的前端开发工程师们有他们自己的看法.   上周,在一场名为“技术风云会”的定期讨论活动中,HTML5小组杭州联盟的同学、阿里巴巴集团 HTML5 爱好者,以及支付宝浙大校友会的会员集中讨论了 HTML5 对前端开发带来的直接改变.

腾讯网无障碍前端架构说明

- - 蓝飞技术部落格
每个页面的html标签要指定lang属性,. 采用定位的时候,将css去除,查看内容的阅读顺序是否符合有意义. 页面中必须包含一个title元素,并且不应为空. title中的内容应该少于60个字. title应该包含网站名字和页面的主题.

中移动、腾讯等自建操作系统必败

- 洞箫 - cnBeta.COM
后PC时代的标志之一是移动互联网终端,特别是智能手机的数量将远远超越PC的数量. 这就意味着谁掌握了智能手机操作系统,谁就控制了市场规模十倍于PC互联网的移动互联网的入口. 于是,王建宙、常小兵、柳传志、马云、李彦宏、马化腾、李开复、雷军,这八位堪称在中国IT界最具权势的男人陆续进场宣战.

移动设备手势设计初探 – 腾讯CDC

- 奥斯汀Outman - cdc.tencent.com
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

腾讯移动安全实验室首份行业报告

- Elic - cnBeta.COM
随着移动互联网的快速发展,手机吸费病毒作为一种新的手机病毒形式开始进入人们的视线. “吸费海盗王”、“美女勾魂吸费大盗”等吸费病毒近期陆续被腾讯移动安全实验室等手机安全机构公之于众,被查获的病毒不仅覆盖了Android、Symbian V3 V5等智能机操作系统、也覆盖了Kjava等功能手机操作系统.

腾讯开源:微信和移动开发的 10 大项目

- -
腾讯开源了许多非常有价值的项目,下面我们一起来看看腾讯10大开源项目有哪些. 1、Android 热修复框架 Tinker. Tinker 是微信官方的 Android 热补丁解决方案,它支持动态下发代码、So 库以及资源,让应用能够在不需要重新安装的情况下实现更新. 当然,你也可以使用 Tinker 来更新你的插件.

腾讯蓝鲸基座实现原理(基于amd,iframe的微前端方案)

- - 掘金 前端
过去一段时间中,我曾经研究过一段时间的微前端方案,但我更像是直接站在巨人的肩膀上去看世界,上来就是从无界乾坤这些比较火热的方案入手,因此我也不禁好奇以前实现微前端都是怎么做的呢. 正好我接触过腾讯的蓝鲸项目,其使用的便是以前的微前端实现方案,以此为入口去研究下 以前是如何实现微前端及和现在的方案有什么差别.

周鸿祎:只有腾讯拿到移动互联网时代的门票!

- - 博客园_新闻
奇虎 360(QIHU.NYSE)董事长周鸿祎穿了一件黑色的 polo 衫,闲散地坐在自己的办公室里谈论着他的奇虎和行业里的风风雨雨. 这里没有桌子,除了两个1.8米高的巨型音响,就是一屋子 CD 和唱片,不过屋子的主人已经有半年没有时间打开这套价值不菲的音响,这半年来他忙着搞 360 特供机,有空还要挑战下雷军.

在移动互联网上,腾讯和百度走上了同一条路

- - PingWest
腾讯和百度终于走上了同一条路. 在传统互联网时代,腾讯的法宝是即时通讯产品QQ和其衍生出的庞大社交体系,在此基础上,游戏和虚拟业务的出售及分发成为其最大的收入来源;百度则坐拥搜索70%以上份额带来的巨大流量,广告和竞价排名成为其用之不尽的宝藏. 虽然二者也都努力入侵过彼此的领域,也在其他产品线上展开过较量,但都未改变获得如他们主营业务那样的成功.