JM Javascript Mobile Framework
新一代轻量级高性能移动web框架，由腾讯前端团队AlloyTeam经项目实践积累沉淀而成。为拥抱移动互联网全新设计，专注为移动web项目，整个框架压缩后只有36K
新的移动平台，给web带来更多的机会，同时也带来更多的挑战。原PC端的各种浏览器兼容，已经升级为多平台多终端多版本多浏览器的复杂问题。为了解决这个问题，各种移动框架应运而生，但是为了解决问题而使整个库的体积庞大，最终在兼容和性能的权衡上没有取得平衡。JM在设计上更看重性能，所以代码量上力求精简，同时能够处理大部分的移动web兼容问题。或许你发现JM并没有过多地为帮你做什么事情，但我们却为你避开了很多移动上的坑。
特性第一个用JM写的程序
下面我们尝试使用JM来写一个HelloWorld程序，通过这个小Demo，你可以对JM有个概括的了解。
点击我查看Demo
主要html
Hello World !
by Tencent AlloyTeam
主要js
var $E = JM.event;
var $D = JM.dom;
var btn = $D.id('myButton');
var word1 = $D.id('word1');
var word2 = $D.id('word2');
$E.on(btn,'click',function(){
//设置动画基本参数，并且每个动画间隔为1.5秒
J.Animation({
selector:'#word1',
duration:1500,
use3d:true
}).setStyle({ //向右运动了40%，并且color变成蓝色
'top':'60px',
'opacity':'1'
}).transit(function(){
this.setDuration(600);
this.scale(2).setStyle({
'top': '40px',
'opacity':'0'
}).transit(function(){
word1.style.cssText = ""; //清空dom的style，让动画回归起初状态
});
});
J.Animation({
selector:'#word2',
duration: 1500,
use3d : true
}).setStyle({
'top':'140px',
'opacity':'1'
}).transit(function(){
this.setDuration(800);
this.scale(2).setStyle({
'top': '150px',
'opacity':'0'
}).transit(function(){
word2.style.cssText = "";
});
});
});代码解析示例程序的button样式额外地使用了JMUI的button样式，不使用也没有影响，样式可以你写你喜欢的。我们来看看js代码部分，$D和$E是引用jm的模块名，这样再代码使用中更加简洁而已，你完全也可以var btn = JM.dom.id('#word1');。代码中展示了JM三个模块的使用：Dom节点选择器，事实处理机制，动画模块。
JM除了提供常规的选择器外JM.dom.$(selectorText)，还提供专门的选择id选择器JM.dom.$(id)，我们也建议尽量使用id选择器，因为在效率上id选择器是最快的。在事件处理上JM.event.on(obj, evtType, handler),obj为绑定的dom节点，evtType为事件类型，hadler的事件处理函数，obj和handler都可以输入数组，我们支持多对象多事件同时处理处理。还有些常规的off，one，fire等方法外，还对swip，hold，toch等移动专属事件方法，详细情况可以参考。
事件处理的代码里面是JM.Animation内容。有两个段动画代码，我们看第一段就可以了。传给Animation的是一些基本参数，其中use3d来开启这段动画是否使用GPU的3D动画加速(注意这不是银弹，不是所有动画都必须加上)，setStyle方法顾名思义设置要修改的样式，transit方法就是把我们setStyle修改的样式使用css3的transiton的动画形式展示，transit方法只接受一个FinshFunc参数，动画执行后就会执行FinshFunc。通过在FinshFunc函数里在写动画函数，就形成动画回调了。在最后的transit方法回调中，我们把dom的style属性取消掉，这样进行动画就会回归源点。
