移动端的js模块管理框架 MT

MIT
Java JavaScript
跨平台
腾讯
2014-04-23
卢勇福

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

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

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

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

为什么使用MT

  • 无更新不下载

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

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

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

快速上手(可查看demo目录下代码)

安装mtbuild

github, npm

$ npm install mtbuild -g

项目结构

MT项目架构一般如下图所示,release文件夹存放本地打包生成的内容,build.conf为打包配置文件。

编写模块

AMD...

define('p1', ['p2', 'p3'], function (p2, p3) { var o = {
        k: 'v' }; return o;
});

编写配置

页面配置:参考实例,在test.html中会存在一段单独的script标签,示意加载及打包配置。

<script type="text/javascript" id="file_config"> var g_config = { // 约定变量名为 g_config,  script 标签 id 为 file_config jsmap:{ 'init': 'base.js', 'util': 'base.js', // 合并后指向同一个文件 'p1': 'page/p1.js', 'p2': 'page/p2.js', 'p3': 'page/p3.js' },
        storeInc:{ 'store': true, // 使用本地存储 'inc': true, // 使用增量更新 'proxy':true, 'debug': false // 调试模式 },
        testEnv: false, // 标识是否为测试环境 staticPath: '/release', // 此项目静态文件路径 和 下面域名拼接
        serverDomain: 'http://localhost:6600', // 静态文件服务器域名 buildType: 'project', // 标识版本管理类型 ver: '2014012000050' // 项目版本号 }; </script>

打包配置:参考实例,创建一个build.conf的配置文件

{ './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']
    }
}

本地打包

打开命令行工具,切换到项目目录下,执行命令:(第一个参数为页面配置文件路径,第二个为打包配置文件路径)

$mtbuild test.html build.conf

看到下图提示证明打包成功:(启动增量服务可忽略incResult的结果)

启动增量服务

可以使用demo目录里的一个用nodejs 写的storeincServer

node storeincServer

效果演示

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

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

修改demo里的几个js内容,然后重新打包:

$mtbuild test.html build.conf

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

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

查看网络请求,发现请求的内容是你本次修改的一些内容:

说明增量更新已经起了作用,就是这么简单。具体原理可以看后面列车的增量更新算法设计。

还可以这么搞!

mtbuild离线生成增量更新文件

demo里的示例增量文件计算是靠storeincserver来做的,如果你没法控制静态资源服务器, 其实你可以用mtbuild来生成静态增量更新文件,但是前台的loader程序会根据用户上次版本和本次版本相差为1的情况下才走增量更新,并且你需要配置proxy为false

storeInc:{ 'store': true, // 使用本地存储 'inc': true, // 使用增量更新 'proxy':false,//是否使用代理 'debug': false // 调试模式 },

各种语言的增量更新计算服务

除了nodejs版本的storeincserver,我们还提供了java,php版本的增量更新计算服务,使用方法见文档列表

seajs,requirejs两大增量更新插件

如果你之前用了seajs或者用requirejs,现在不想改成mt,我们也提供了这两个模块管理器的增量更新插件,代码在js里的seajs和requirejs目录里面,使用方法参看后面的文档列表

只使用core.js,不用增量更新

如果你觉得增量更新意义不大,但是觉得我们的mt模块管理器还不错想用,那么你可以直接使用core.js,不引入storeincload.js即可!

在自己的项目里面使用增量更新

如果你觉得我们这里的增量更新不错,但是不想使用mt,也不想使用seajs,requirejs这些东西,只是想在自己的项目里面加入增量更新功能,那么请直接使用js/makemerge文件夹里的makein.js,merge.js。 其中makeinc.js是用来计算两个文件的增量的,merge.js则是用来根据增量文件和原文件合并成新版文件的

的码云指数为
超过 的项目
加载中

评论(4)

Andrew1985
Andrew1985
这是啥 我看不懂 为啥还要命令行 MT
秀小川
秀小川
我叫MT,铜墙铁壁的身躯. MT
木川瓦兹
木川瓦兹
这是个啥东西 MT
滔哥
滔哥
为嘛现在的JS框架都要这样编译,,,, MT

手机腾讯网前端框架 MT 2.2.2 版本发布

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

2014/11/26 15:01

手机腾讯网前端框架 MT 2.0.1 发布

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

2014/07/28 11:57

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

MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架。 Git:http://git.oschina.net/luyongfugx/mt mt介绍文档:http://mt.tencent.com/mt1index.html 为什么使用MT 无更新不...

2014/06/11 14:29

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

mtk6595资料帖和问题帖集合

MTK6595资料帖 MTK6595 MTK6595 system introduction MTK6595电路参考设计 Mtk6595 特性 MT6595福利资料 MT6595 Datasheet Brief_真正无密码版 MT6595入门文档 MT6595 资料汇总 MT6595 brief...

2016/07/20 16:59
6
0
MTK6582问题资料集锦

资料贴: MT6582 移植USB转DM9620 MT6582 PCB+原理图+数据手册等全套资料MT6582 ov摄像头开闪关灯拍照预览有明显彩色竖条纹 基于mt6582平台的SPI驱动和调试demo MTK MT6582 + 4G (MT6290) 方...

2016/07/28 16:52
14
0
4_TabContainer

1.配置路由 2. 使用 <template> <div id="tab"> <div class="nav"> <mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button> <mt-button size="small...

2018/03/03 10:07
43
0
HTML字体集合

HTML 字体样式集合 2010-08-14 15:52:02| 分类: Basic|字号 订阅 字体大小为 24PT FONT-SIZE: 24pt @Arial Unicode MS @Dotum @DotumChe @Fixedsys @Gulim @GulimChe @MS Gothic @MS Mincho...

2013/10/15 17:30
330
0
MTK6752资料和问题集合帖

今天抽时间再次整理了下MTK版块内的一些芯片型号相同的帖子,为了方便大家查找资料,将会把论坛内这类的帖子归纳到一起: MTK6752资料帖集合 MT6752 完整DATASHEET MT6752参考原理图和PCB M...

2016/07/21 17:04
18
0
如何使用PHP中ci框架实现验证码?

使用PHP语言实现验证码的生产我们之前也为大家展示了许多的案例,那么今天我们就为大家来展示更多的关于PHP相关代码生产验证码的代码。 PHP语言ci框架生产验证码其实原理比较简单,通过调用以...

2013/04/29 18:12
28
0
php验证码类

php原生代码,验证码类

2014/08/06 15:49
16
0
phpMyAdmin添加触发器

触发器可以保证代码的完整性,可以使代码更加简单,简洁,高效。 这是删除的触发器,在删除对应的数据之前,先把其他表有关的数据删除已确保所有表的数据完整性 begin delete from sw_mtagr...

2016/08/05 08:56
115
0
一个漂亮的php验证码类(分享)

//验证码类 class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 priv...

2016/09/29 09:43
18
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部