当前位置:  软件>java软件

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

    来源:    发布时间:2015-02-24

    本文导语:  MT是手机腾讯网前端团队开发维护的一个专注于移动端的js模块管理框架。 github:https://github.com/mtjs/mt 为了方便大家我们还在http://git.oschina.net上放了一个镜像: http://git.oschina.net/luyongfugx/mt 为什么使用MT 无更新不下载 简单...

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标签,示意加载及打包配置。

 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' // 项目版本号 }; 

打包配置:参考实例,创建一个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则是用来根据增量文件和原文件合并成新版文件的


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 专注于移动端的滑动解决方案 iSlider
  • 想将系统装入移动硬盘但是安装过程中找不到移动硬盘
  • 求一批量移动文件的liunx指令,按时间倒序移动10W条
  • 如何移动整体移动大块内存,用哪个函数???
  • vim中一行内容太多折行,用移动命令却无法移动到中间一行
  • Jquery创建层显示标题和内容且随鼠标移动而移动
  • LINUX 如何移动光标
  • 高手看过来:请教如何在移动硬盘上安装Linux?
  • 移动硬盘使用问题求解?百分相赠!!
  • 移动端滑动JS库 swipejs
  • 如何将Ubuntu安装到可移动硬盘上
  • linux系统如何向移动硬盘中导数据
  • gtk窗口移动后屏幕锁定且无响应
  • solaris下如何格式化移动硬盘
  • 移动购物车应用 MobileCartly
  • 如何用mv移动多个文件
  • linux与移动硬盘?
  • centos 无法挂载 移动硬盘
  • 已经安装到移动硬盘上的ubuntu怎样在其它电脑上使用
  • 电子商务移动客户端 ECMobile
  • 移动硬盘安装Linux能即查即用吗?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3