最近在做一个公司的项目,我们公司的角色是前端制作(HTML+CSS+JS),开发方为IBM,所以前端的Javascript被指定了使用dojo。本来是没有我什么事情,可是偏偏眼睛里不容沙子,非得要求重构,于是开始漫漫的HTML重构和使用dojo的过程。初初上手dojo,真的觉得十分苦恼,因为介绍它的文档实在少之又少,尤其是1.7版本。偏偏1.7版本又是dojo一个较为重要的升级版本——引入了AMD的机制,所以想要把代码写得更加dojo些,还着实花了我不少的精力去看这个新版本的源代码,包括dijit和dojox部分。
基于dojo 1.7的js目录规划
为什么要说这点呢,因为实现了AMD机制的,如require.js的,对目录的规划尤为重要,因为涉及到require加载的模式,而dojo 1.7尤甚。
基本上,dojo1.7已经默认会认为你的目录是基于如下的规划的:
/webroot/js/dojo/
/webroot/js/dijit/
/webroot/js/dojox/
则,当一个/webroot/index.html的页面,尝试按照上述目录加载的时候:
<script type="text/javascript" src="js/dojo/dojo.js"></script>
它会默认认为,js的目录,为所有modules的基础目录,即当你希望添加一个叫做app的新module时:
define('app', ['dojo/_base/kernel'], function(dojo) { return { anyMethod: function() { // ... } } }); require(['app'], function(app) { app.anyMethod(); });
而该文件则放在/webroot/js/app.js目录下即可。
当然,dojo本身提供多种声明dojoConfig的模式,但是根据我的尝试,会认为上述的实践模式会令项目较为简单且易于他人理解。dojo提供了baseUrl用于声明require的基础路径入口,我尝试了,由于dojo本身的目录层级问题,会存在一些小问题,类如:
baseUrl: 'js/modules' // 尝试告诉dojo,所有项目自定义的modules的目录
而由于dojo的目录层级关系(js/dojo,为该目录的上一级),他会同样认为你声明的这个目录也是在js/module的上一级,即还是指向了js这个目录。当然,我也可以将baseUrl改为js/modules/any,来强迫使他指向js/modules,但这实在不雅。
当然,实在不行,你还是可以通过声明paths、packages等模式来强迫指定某个基础的paht、package的入口,但是总归来说,还是让理解项目结构、代码等造成更大的困扰性,都就此作罢。既然dojo本就如此,就按照回他本身默认的机制、设定去规划目录,将会是走最少弯路的实践模式。
dojoConfig声明模式和重要参数说明
dojoConfig声明模式支持3种:
<script type="text/javascript">
var dojoConfig = {
async: false
// more ...
}
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript" src="js/dojo/dojo.js" data-dojo-config="async: false, parseOnLoad: false, isDebug: true"></script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
require({
async: false,
parseOnLoad: false
});
</script>
实践证明,第二种模式会是比较易于理解,且又不会在页面写太多代码的模式。
而dojoConfig中,比较重要的参数即为async和parseOnLoad(就我目前的使用程度来说),简单介绍如下:
async: true | false | legacyAsync
async表示的是dojo core(其实就是dojo/dojo.js所定义的模块、方法)是否使用异步的模式加载,而其中,我至今未试验出legacyAsync的模式为何,而true | false主要差异为:
async: true,启用异步模式,则不存在全局对象dojo,而且你即使:
require(['dojo/_base/kernel'], function(dojo) { console.log(dojo); });
你会发现dojo的实例里面,只包含了最精简的一些方法和api,你需要逐个逐个你需要使用的module去将其加载进去。
而使用了false,则dojo/dojo.js中声明定义了的API,他都会以全局的dojo实例装载之。
使用true和false,分别有其用途,尤其在使用了true,我认为,是可以同时使用多个不同版本的dojo实例分别使用的(只是显得有些叶公好龙、画蛇添足)。
而parseOnLoad,则是指dojo在页面自动加载时,会使用dojo/parser库自动解析页面指定了data-dojo-*的DOM标签,比如<select data-dojo-type="dijit.form.ComboBox">,自动转化为dijit.form.ComboBox的widget。不过话说,如果你启用了parseOnLoad: true,碰到页面有这种data-dojo-type,而你又没有事先require了相关的类库,他是会抛出一个js error的。而且说句实话,光是一个dijit.form.ComboBox,他就会require一大堆js文件,真是为这个页面感到费劲啊。
DOM基础使用习惯
据我所知,dojo曾在某一段时间内和MooTools合作过,dijit就是他们合作后的产物之一,而包括像David Walsh等,这些MooTools开发团队成员,也在自己的博客大力鼓吹Dojo(至今),为其拉广告、做宣传,所以可以想见dojo受MooTools的影响之深。
而事实上,dojo的DOM方法中,存在和MooTools极其接近的定义结构,他同时支持两种DOM查询模式:
1、传统的byId的模式,dojo采用的是dojo.byId('elId'),而MooTools则是document.id('elId')。
2、xpath的查询模式,dojo为dojo.query('#id'),而MooTools则是,document.getElements('#id')。
为何说dojo更加类MooTools而不是说类jQuery呢(同样支持xpath的query),基于以下几点:
1、jQuery的概念里面,是不存在支持byId的查询模式的。
2、 jQuery的操作模式里面,是不支持批量操作的,即,jQuery('.submit-btn').css(),表示的是对该query的第一个element进行操作 , 而MooTools和dojo的操作是批量的操作,即:document.getElements('.submit-btn').addClass('focus'),或者dojo的dojo.query('.submit-btn').style({ color: 'red' })
3、而且从定义对象结构上来说,dojo更像MooTools,即:
dojo:
dojo.byId() -> HTML Element实例
dojo.query() -> dojo.NodeList类实例
MooTools:
document.id() -> Element类
document.getElements() -> Elements类实例
4、链式操作更类似MooTools,即:
dojo:
dojo.query('.any-class').query('anySubElement').doSomeThing();
MooTools:
document.getElements('.any-class').getElements('anySubElement').doSomeThing();
所以在使用dojo的DOM方法的时候,最好养成一个统一的使用习惯,不然一会儿dojo.byId,一会儿dojo.query,非让日后跟进代码的人看得头冒青烟不可。
在这里,我推荐使用dojo.NodeList的模式作为基础操作,原因基于如下:
1、dojo.NodeList更易于使用链式操作模式,即:dojo.query('.any-class').attr({ }),但是千万注意,这里会对所有query到得element做同样的attr操作。
2、dojo为了控制性能和不污染原生DOM对象,不采用原型链的方式去扩展DOM Element,于是操作一个原生的DOM Element在dojo里的做法显有些蹩脚,如:dojo.attr(DOMElement, {}),dojo.style(DOMElement, {}),使用起来真的不太舒服。
于是有人会问,假定我已经获得了某个DOMElement,那如何能快速的进行操作呢?以下举个例子:
// $ 伪装成大家习惯的jQuery操作符 require(['dojo/_base/kernel', 'dojo/dom', 'dojo/query'], function(dojo, dom, $) { var el = dom.byId('el_id'); // 正统的操作模式应该是: dojo.style(el, { display: 'none' }); // 不过事实上,你可以这样写,会让你的代码写得舒服,别人读起来也更加舒服 $(el).style({ display: 'none' }); // 这个例子是可以延伸发展下去的: $($('body')[0]).style({ display: 'none' }); // 这是类jQuery的查询模式 $($('#any_id')[0]).style({ height: 100 + 'px' }); });
如果$('#any_id')[0],不存在,则$($('#any_id')[0]),的NodeList内容是空的,则其后的style操作也不会继续进行,这可以缓解很多时候,为了判断某个element是否存在,而写了大堆if ... else的判断结构。
dojo的DOMEvent
dojo的DOM事件,潜伏得比较深,不过为了深入简出,这里只谈两个问题:
1、怎么快速绑定事件?
2、怎么stop一个事件。
基于上述的NodeList的操作习惯,有以下的代码:
require(['dojo/_base/kernel', 'dojo/query'], function(dojo, dom, $) { $('body').connect('mousemove', function(event) { }); $('tag').on('click', function(event) { }); });
connect是 dojo一个比较特殊的方法,他用于实现了对任意对象,实现事件注入(类似Qt框架的信号槽的机制),很多对象,类如 dojo.Animate的事件绑定,也是经过此方法绑定。
stopEvent的方式:
require(['dojo/_base/kernel', 'dojo/query', 'dojo/_base/event'], function(dojo, $) { $('body').connect('mousemove', function(event) { dojo.stopEvent(event); // 是不是有点好像以前写JS原生的stop event呢? }); });
和jQuery不同,jQuery的事件只要return false即可, dojo需要额外引入 dojo/_base/event,并执行 dojo.stopEvent(event),这让我想很早以前兼容IE和Firefox时候的写法,event = event || window.event。
Animate的使用
dojo的Animate,顶多只实现到了mootools的tween的级,还没到Fx.Morph。他实现代码上,当你使用dojo.animateProperty创建一个新的animate实例时,他会不断的创建新的animate实例,如果大量的这样写,你会发现你写的JS效果,大量存在:非同步,抖动厉害的情况出现。不过这个问题,也非一时半刻能说得明白的问题,对于简单的特效,还是可以使用dojo.animateProperty的,但是对于稍微复杂一些的效果的时候,则需要注意用法,这里简单说明一下:
如上图显示,眼下要做一个Slider,里面除了有两个toPrev、toNext两个操作按钮外,中间有一个存放图片的容器,这个容器用于展现该容器内的图片的滚动。
假定我们限定了SliderWrap的宽度,比如370px,使其永远只会显示两张图片,要显示更多的图片,我们将对SliderWrap使用margin-left,使其margin-left为-xxxpx来实现其slider的滚动。
一个基本的做法就是:
$('#toPrev').connect('click', function() { dojo.animateProperty({ node: $('#SliderWrap')[0], properties: { marginLeft: anyPx } }).play(; }); $('#toNext').connect('click', function() { dojo.animateProperty({ node: $('#SliderWrap')[0], properties: { marginLeft: anyPx } }).play(); });
但是,一个预料之外的事情的发生了,用户狂点toNext的按钮,这时候,你的slider滚动的就没有那么流畅了,而是会出现卡顿、不流畅、不自然等情况发生(因为多次click的事件被执行了)。使用click作为触发的event还是比较好处理的,因为他必须满足click的条件——mousedown & mouseup,如果你将触发的事件设置为mouseenter(mouseover),恐怕情况会急剧的恶化下去。
如果用MooTools来实现同样的效果,会考虑改为如下:
var fx = new Fx.Morph($('SliderWrap')); $('toPrev').addEvent('click', function() { fx.pause().start({ 'margin-left': anyPx }); }); $('toNext').addEvent('click', function() { fx.pause().start({ 'margin-left': anyPx }); });
差异主要在于pause(),假定用户以很高频率点击toNext,那么不管之前fx播放到什么情况,都先暂停执行,而后将fx播放至用户当前的请求操作下。
而同样的,在dojo,则需要这样做:
var anim = dojo.animateProperty({ node: $('#SliderWrap')[0] }); $('#toPrev').connect('click', function() { anim.properties = { marginLeft: anyPx }; anim.stop().play(); }); $('#toNext').connect('click', function() { anim.properties = { marginLeft: anyPx }; anim.stop().play(); });
附录1:常用方法整合
至此,dojo使用上的一些小问题,已经基本解决,不过为了辅助dojo的编程,我还是写了几个小方法,为了改善dojo的编程代码过于冗余,过于繁重的情况,附录如下:
(function(app) { /** * 获取item的类型,即typeof item === ? * * 取自MooTools 1.4 */ var typeOf = this.typeOf = function(item) { if (item == null) return 'null'; if (item.nodeName){ if (item.nodeType == 1) return 'element'; if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? 'textnode' : 'whitespace'; } else if (typeof item.length == 'number'){ if (item.callee) return 'arguments'; } return typeof item; }; /** * 判断某个item是否为某个对象的实例 * * 取自MooTools 1.4 */ var instanceOf = this.instanceOf = function(item, object) { if (item == null) return false; var constructor = item.$constructor || item.constructor; while (constructor){ if (constructor === object) return true; constructor = constructor.parent; } /*<ltIE8>*/ if (!item.hasOwnProperty) return false; /*</ltIE8>*/ return item instanceof object; }; define('app', ['dojo/_base/kernel', 'dojo/_base/lang', 'dojo/dom', 'dojo/query', 'dojo/_base/NodeList', 'dojo/_base/event'], function(dojo, lang) { /** * 传入DOM Element | dojo.NodeList | string,取出指定index的DOM Element * 为了在某些场景需要明确的操作某个DOM Element使用 * * @param DOMElement|dojo.NodeList|string el * @param int index * @return DOMElement|false */ var element = app.element = function(el, index) { if (!index) index = 0; if (typeOf(el) == 'string') { var elById = dojo.byId(el); if (el.match(/\#|\.|\s/, el) || !elById) el = dojo.query(el); else el = elById; } if (typeOf(el) == 'object' && instanceOf(el, dojo.NodeList)) el = el[index]; return typeOf(el) == 'element' ? el : false; }; /** * 执行animate,并返回该animate对象 * * @param DOMElement|dojo.NodeList|string el * @param object styles 需要animate执行的样式 * @param object args 其他animate参数 * @return dojo.Animate */ var animate = app.animate = function(el, styles, args) { if (element(el) !== false) { if (typeOf(args) === 'function') { args = { onEnd: args }; } else { args = args || {}; } args.node = element(el); args.properties = styles; return dojo.animateProperty(args).play(); } return false; }; /** * 生成animate对象,但不play * * @param DOMElement|dojo.NodeList|string el * @param object styles 需要animate执行的样式 * @param object args 其他animate参数 * @return dojo.Animate */ var animateObject = app.animateObject = function(el, styles, args) { if (element(el) !== false) { if (typeOf(args) === 'function') { args = { onEnd: args }; } else { args = args || {}; } args.node = element(el); args.properties = styles; return dojo.animateProperty(args); } return false; }; /** * 当某个DOMEvent发生时,判断当前DOMEvent是否经过某个DOMElement * * @param DOMElement|dojo.NodeList|string el * @param DOMEvent event * @return bool */ var hovered = app.hovered = function(el, event) { if (element(el) === false) return false; var coords = dojo.coords(element(el)); var x = event.pageX, y = event.pageY; return (x >= coords.x && x <= coords.x + coords.w && y >= coords.y && y <= coords.y + coords.h) }; return app; }); }).call(this, this.app || {});
整体而言, dojo还是一个很不错的框架,只是文档少得有些可怜,而且大多比较老,想用好 dojo还是得费一番心思才行。