Javascript Mobile Framework 特性第一个用JM写的程序Animation 传入参数说明Animation 动画函数说明base 公开对外基础函数dom 函数列表event 方法事件列表event 自定义事件http 方法列表 介绍
JM(Javascript Mobile Framework) 是新一代 轻量级高性能
移动web框架,由腾讯前端团队AlloyTeam经项目实践积累沉淀而成。为拥抱移动互联网全新设计,专注为移动web项目,整个框架压缩后只有
36K 。
新的移动平台,给web带来更多的机会,同时也带来更多的挑战。原PC端的各种浏览器兼容,已经升级为 多平台多终端多版本多浏览器
的复杂问题。为了解决这个问题,各种移动框架应运而生,但是为了解决问题而使整个库的体积庞大,最终在 兼容和性能
的权衡上没有取得平衡。JM在设计上更看重性能,所以代码量上力求精简,同时能够处理大部分的移动web兼容问题。或许你发现JM并没有过多地为帮你做什么事情,但我们却为你避开了很多移动上的坑。
特性
-
体积小
-
源用JX的编码方式
-
模块按需加载,可定制
-
可与JMUI结合使用,提供一整套移动方案
第一个用JM写的程序
下面我们尝试使用JM来写一个HelloWorld程序,通过这个小Demo,你可以对JM有个概括的了解。
主要html
<button id="myButton" class="btn btn-primary btn-block" > <span class="btn_text">Hello World</span> </button> <div class="word"> <div id="word1">Hello World !</div> <h2 id="word2" >by Tencent AlloyTeam</h2> </div>
主要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等移动专属事件方法,详细情况可以参考event模块。
事件处理的代码里面是JM.Animation内容。有两个段动画代码,我们看第一段就可以了。传给Animation的是一些基本参数,其中use3d来开启这段动画是否使用GPU的3D动画加速(
注意这不是银弹,不是所有动画都必须加上
),setStyle方法顾名思义设置要修改的样式,transit方法就是把我们setStyle修改的样式使用css3的transiton的动画形式展示,transit方法只接受一个FinshFunc参数,动画执行后就会执行FinshFunc。通过在FinshFunc函数里在写动画函数,就形成动画回调了。在最后的transit方法回调中,我们把dom的style属性取消掉,这样进行动画就会回归源点。
Animation
动画模块,JM的动画实现全部由CSS3实现,有以下几个特征
-
动画底层由CSS3实现
-
动画参数采用链式调用动画,非传统的class操作css3动画。
-
可自由开启GPU的3D动画加速
依赖 dom,event,type 三个模块。
核心代码
runBtn.onclick = function(){ $D.setStyle(runBtn,"display","none"); rect.style.csstext = ""; //设置动画基本参数,并且每个动画间隔为1秒 J.Animation({ selector:"#demo1_rect", //要操作的dom的selector duration:1000, use3d:true }).setStyle({ //向右运动了60%,并且color变成蓝色 "left":"60%", "background":"blue" }).transit(function(){ this.scale(.5).setStyle({ 'background':"red" }).transit(function(){ this.rotate(180).setStyle({ opacity:0 }).transit(function(){ this.toOrigin().setStyle({ "opacity":1, "background":"green" }).transit(function(){ $D.setStyle(runBtn,"display","block"); }); }); }); });}
J.Animation是这个模块的命名模块,传入一个options的obj来设置动画的基本参数。然后在函数尾部使用setStyle进行回调,setStyle是用于设置动画改变的状态。再在函数尾部调用transit方法表示以CSS3的transition方式进行启动动画。我们依旧在transit里面传入匿名函数,表示一段动画结束后,进行回调函数callback,这样我们就不断进行链式调用和callback回调来完成一段动画。
Animation 传入参数说明
-
selector 动画操作的dom的selector(id)
-
duration 一段动画执行时间
-
use3d 是否启用硬件加速
-
runType 动画类型(ease-in, ease-in-out)
-
delay 动画延迟时间
Animation 动画函数说明
-
scale:function(scale){}
-
scaleX:function(scaleX){}
-
scaleY:function(scaleY){}
-
rotate:function(rotate){}
-
rotateX:function(rotateX){}
-
rotateY:function(rotateY){}
-
rotateZ:function(rotateZ){}
-
translate:function(translateX,translateY,translateZ){}
-
translateX:function(translateX){}
-
translateY:function(translateY){}
-
skew:function(x,y){}
-
skewX:function(x){}
-
skewY:function(y){}
-
setStyle:function(styleName,styleValue){}
-
toOrigin:function(){} 动画参数清空
-
transit:function(onFinished){} 启动动画 onFinished为动画回调函数
大体上动画函数都很好理解,不做过多解析,我们使用链式js的方式来编辑CSS3动画,CSS3的动画参数都可以自个设置,并且动画结束后可自行销毁,不会冗余页面代码样式。
audio(按需加载)
在web上播放声音一直体验都不是很好,包括下载声源需要加载时间,而且各种的声音播放方式兼容性差等等。JM的额外模块audio是就是处理web上声音的模块。因为不是所有的web页面都需要声音,所以我们建议需要播放声音的时候才加载这个模块。在HTML5诞
生到来,让web在多媒体领域上不区于flash,原生的控件,让我们的页面播放页面更加简单。但是并不是真正的简单,问题依旧是浏览器间的问题,或者是
各种终端版本的问题,兼容性依旧是个核心问题。我们audio模块就是为了解决播放声音的兼容性及操作的一致性而生,让我们的声音在web上,在
真正意义上的简单起来 。
依赖 dom,event,browser 三个模块。
base 核心模块
JM的一些核心方法,为所有模块所共用。例如JM的命名方式namespace,类封装Class,继承extend,操作Listfilter``map``some等一系列继承函数。
示例代码
JM.$package("MUI",function(J){ // JM的命名空间});//JM的类继承方式var AnimateTab = J.Class({extend:MUI.Tab},{ init:function(options){ //do something }, _handleEvent:function(e){ //do something }, bindHandlers:function(){ //do something }});
base 公开对外基础函数
-
$namespace: function(name) {}为$package函数内部使用
-
$package:function(ns,func) {}命名空间
-
extend:function(destination,source) {} 继承
-
bind:function(func, context, var_args) {}
-
Class:function(){} 定义类函数
-
toArray: function(pseudoArrayObj){}
-
indexOf:function(arr,elem){}
-
every:function(arr,callback){}
-
some:function(arr,callback){}
-
each:function(arr,callback){}
-
map:function(arr,callback){}
-
filter:function(arr,callback){} 过滤List
-
isEmptyObject:function(obj){}
-
random : function(min, max){}
browser 浏览器检测模块
本可简单简单地划分到utils模块,但是在移动web上我们检测的不单单是浏览器及其版本后,后继拓展还有,终端平台及其版本,所以我们单独地划分出一个模块出来(其实最终还是会合到一个js里面)。
//对应的值是版本号,如果不是这个浏览器则版本号为0 if(J.browser.plugins.flash>=9){ } if(J.browser.ie){ } if(J.browser.chrome >= 30){ } if(J.adobeAir){ }
cookie
非常简单的cookie种植和移除,直接粘贴源码吧
J.$package(function(J){ var domainPrefix = window.location.host; var cookie = { set : function(name, value, domain, path, hour) { if (hour) { var today = new Date(); var expire = new Date(); expire.setTime(today.getTime() + 3600000 * hour); } window.document.cookie = name + "=" + value + "; " + (hour ? ("expires=" + expire.toGMTString() + "; ") : "") + (path ? ("path=" + path + "; ") : "path=/; ") + (domain ? ("domain=" + domain + ";") : ("domain=" + domainPrefix + ";")); return true; }, get : function(name) { var r = new RegExp("(?:^|;+|\\s+)" + name + "=([^;]*)"); var m = window.document.cookie.match(r); return (!m ? "" : m[1]); }, remove : function(name, domain, path) { window.document.cookie = name + "=; expires=Mon, 26 Jul 1997 05:00:00 GMT; " + (path ? ("path=" + path + "; ") : "path=/; ") + (domain ? ("domain=" + domain + ";") : ("domain=" + domainPrefix + ";")); } }; J.cookie = cookie;});
dom
HTML的dom操作模块。包括选择器,选取样式,修改样式切换Class等方法。虽然跟著名的jquery对比会逊色一筹,但是
基本的功能都能满足,最重要的是jquery有100多K,我们才30多K,我们把最实际常用的Dom操作抽离处理,减少库的代码量,在移动Web上带来
更少的流量。
示例代码
var $D = J.dom;var runBtn = $D.id('runBtn'), runObj = $D.$('#demo_block .rect'), stopBtn = $D.className('demaxiya');runBtn.onclick = function(){ $D.toggleClass(runBtn,'active');}if($D.getStyle(runBtn,'background') == '#000'){ $D.remove(stopBtn);}
除了比较常用的J.dom.$()的选择器方式,我们还提供了J.dom.id()和J.dom.tagName()等
的选择器方式,我们建议,可以的话尽量是用id选择器,因为这是效率最高的。我们没有像Jquery那样吧选择到的Dom元素包装成一个Jquery对
象,我们选择到的是原生的Dom元素,方式也是传入Dom和参数。It’s simple,but it do well。
dom 函数列表
-
$:function(selector,context){} 会优先选用原生的
-
id:function(id){}
-
tagName:function(tagName,context){}
-
className:function(className,context){}
-
remove:function(node){}
-
setSelectorEngine:function(func){}
-
toCssstyle:function(domStyle){}
-
setStyle:function(elem ,styleName,styleValue){}
-
getStyle: function(el, styleName){}
-
getvendorPropertyName : function(prop) {}
-
isSupprot3d : function(){}
-
filterSelector:function(arr,selector){}
-
addClass function(elem,className){}
-
removeClass function(elem,className){}
-
hasClass function(elem,className){}
-
toggleClass:function(ele,className){}
-
insertAfter: function(parentElement, newElement, refernceElement){} 类似源生方法 insertBefore
event
除了平常的支持IE等浏览器兼容外,最重要的是支持移动端的touch,swip等手势事件及transform等移动专有事件.PC端和移动端最大一个
不同除了屏幕分辨率外,还有一个非常重要的就是事件不同。我们不但支持了这些事件,还自定义了手势事和提供了很多辅助方法,帮助开发者的实际开发应用,例
如:getTouchPos``getdist等。在移动web上坑最多的就是event处理的这一块,至少JM会让你少走很多弯路。
示例代码
var $E = J.event;//动画事件结束后$E.on(this.contentWrap,"webkittransitionend",function(e){ // 自身销毁changed事件 $E.fire(self ,"changed" ,{ type:"changed", currentIndex:self.currentIndex });}); var startEvt = isTouchDevice ? "touchstart" : "mousedown"; var moveEvt = isTouchDevice ? "touchmove" : "mousemove"; var endEvt = isTouchDevice ? "touchend" : "mouseup"; //touch事件的绑定$E.on(document.body ,moveEvt ,_handleEvent); $E.on(document.body ,endEvt ,_handleEvent);
注意,这里关于touch或swip事件的例子可以查看JMUI的控件,这样会更加清楚.
event 方法事件列表
-
isDomEvent function(obj,evtType){} 如果是DOM事件,返回正确的事件名;否则返回布尔值 false
-
bindDomEvent function(obj, evtType, handler){} 封装绑定DOM事件的方法,以兼容低版本IE
-
unbindDomEvent function(obj, evtType, handler){} 解除绑定DOM事件的方法
-
on:function(obj, evtType, handler){}
-
once:function(obj,evtType,handler){}
-
off:function(obj,evtType,handler){}
-
fire:function(obj,evtType){}
-
getActionTarget : function(event, level, property, parent){}
获取点击的事件源, 该事件源是有 cmd 属性的 默认从 event.target 往上找三层,找不到就返回null @param {Event}
event
@param {Int}level 指定寻找的层次
@param {String} property 查找具有特定属性的target,默认为cmd
@param {HTMLElement} parent 指定查找结束点, 默认为document.body
@return {HTMLElement} | null
- bindCommands : function(targetElement, eventName, commends, commendName){}
@example
bindCommands(cmds);
bindCommands(el, cmds);
bindCommands(el, ‘click’, cmds);
-
getTouchPos = function(e){} 辅助函数
-
getdist = function(p1 , p2){} 计算两点之间距离
-
getAngle = function(p1 , p2){} 计算两点之间所成角度
event 自定义事件
-
_fire
-
_off
-
tap 按下松开之间的移动距离小于20,认为发生了tap
-
hold 按下松开之间的移动距离小于20,认为点击生效swipe按下之后移动30px之后就认为swipe开始,swipe最大经历时间500
-
transform
-
scrollstart
-
scrollend
-
scrolltobottom
-
ortchange 兼容性更好的orientationchange事件,这里使用resize实现。不覆盖原生orientation change 和 resize事件
format
不多说,直接上源码
var date = function(date, formatString){ /* * eg:formatString="YYYY-MM-DD hhJavascript Mobile Framework 特性第一个用JM写的程序Animation 传入参数说明Animation 动画函数说明base 公开对外基础函数dom 函数列表event 方法事件列表event 自定义事件http 方法列表 官网
http://alloyteam.github.io/Spirit/modules/JM/index.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。