代码改变世界

从Dojo1.6到Dojo1.8（三）—— Parser，Dijit，DojoX

2012-12-25 15:44  Owen Chen  阅读(2086)  评论(0)  编辑  收藏  举报

前面两篇文章介绍了Dojo1.8的AMD以及Dojo core当中相关模块的变化。接下来我们介绍一下Dijit，Dojox这两个控件组件模块的变化。

Parser

在具体讲Dijit之前，我们先了解一下dojo/Parser模块，这个模块由原先dojo.parser转变而来。dojo对于控件的使用提供了编程式（programmatic）和声明式（declarative markup）两种方式。dojo/parser是用来翻译声明式的控件定义，并将它们渲染成控件的实例对象和控件相应的dom节点。

对于dojo/parser的调用方式如下：

require(["dojo/parser", "dojo/ready"], function(parser, ready){
  ready(function(){
    parser.parse();
  });
});

尽管在dojoConfig中依然可以写parseOnLoad:true的配置，但是还是需要手动去require parser模块。所以代码段中的方式是推荐的方式。

在dojo/parser内部最大的变化是增强了对于符合HTML5规范的属性的支持。具体的举例如dojoType被改成data-dojo-type，对于控件属性的定义，也被统一放到data-dojo-props属性中。这种方式符合HTML5的属性定义规范。举例老的写法：

<button dojoType="dijit.form.Button" tabIndex=2
    iconClass="checkmark">OK</button>

新的写法将是：

<button data-dojo-type="dijit/form/Button" tabIndex=2
    data-dojo-props="iconClass: 'checkmark'">OK</button>

上面代码中的dijit/form/Button，替换了之前的dijit.form.Button，使用的是模块ID（MID），这也是我们之前在AMD的章节中讨论过的新写法。

这里需要注意的是，在使用某个MID之前，需要在require([...])调用中加载相应的模块，一般在<head>节点中，这样可以保证<body>中需要使用的控件都已经加载。

dijit widget

在1.8中，dijit包中的控件也遵循了新的模块方式的写法，即原先所有的全局的diji.*都被放到了各自相应的模块当中。如dijit.form.Button，现在为dijit/form/Button模块。

其实在dijit的这些变化当中，最先引起我注意的是dijit.byId()这个函数的变化。如今的dijit.byId()被移到了dijit/registry模块当中，相应的调用改成了registry.byId()。相应的dijit.byNode()也成了registry.byNode()。

下面我们具体介绍一下在dijit内部的一些机制和函数发生的变化，这些使我们在使用、扩展尤其是写自己的控件的时候需要注意的。

dojo/Stateful和dojo/Evented

在这里首先要引入在扩展或创建dijit时需要理解的两个比较重要的模块：dojo/Stateful和dojo/Evented。

dojo.Stateful提供了访问控件属性的统一接口：set()和get()，同时还提供了监测(watch)控件属性的能力。例如，你可以使用如下的代码：

require(["dijit/form/Button", "dojo/domReady!"], function(Button){
  var button = new Button({
    label: "A label"
  }, "someNode");
 
  // Sets up a watch on button.label
  var handle = button.watch("label", function(attr, oldValue, newValue){
    console.log("button." + attr + " changed from '" + oldValue + "' to '" + newValue + "'");
  });
 
  // Gets the current label
  var label = button.get("label");
  console.log("button's current label: " + label);
 
  // This changes the value and should call the watch
  button.set("label", "A different label");
 
  // This will stop watching button.label
  handle.unwatch();
 
  button.set("label", "Even more different");
});

dojo/Evented的on()和emit()方法提供了事件监听和触发的功能。你可以有一下的写法：

define(["dojo/Evented", "dojo/_base/declare"], function(Evented, declare){
  var MyComponent = declare([Evented], {
    startup: function(){
      // once we are done with startup, fire the "ready" event
      this.emit("ready", {});
    }
  });

  component = new MyComponent();
  component.on("ready", function(){
    // this will be called when the "ready" event is emitted
    // ...
  });
  component.startup();
});

on()方法被dijit引入用来做事件的绑定，后面会具体谈。

set(),get()

dojo1.6之前的版本，对于控件属性的获取使用的是getValue()，setValue()，或者attr()方法。而现在使用的是统一的get()和set()方法。如下：

//老的写法
myEditor.getValue()
myTextBox.attr("value")
myForm.setValue(...);

//新的写法
myEditor.get("value")
myTextBox.get("value")
myForm.set("value", ...);

watch(), on()

1.6及之前版本我们只能通过dojo.connect/this.connect来监测某些事件的发生，而1.8可以以更加优雅的方式来监测某些属性的变化或者方法的调用。使用的方法是on()和watch().

//老的写法：
dojo.connect(myForm, "onValidStateChange", function(){ ... });
dojo.connect(myButton, "onClick", clickCallback);

//新的写法
myForm.watch("valid", function(name, oldVal, newVal){
  console.log(myForm.id + ": " + name + " changed from " +
  oldVal + " to " + newVal);
});
myButton.on("click", clickCallback);

基于模版的控件（Templated Widgets）

在1.6版本中的dijit._Templated被划分到了dijit/_TemplatedMixin和dijit/_WidgetsInTemplatedMixin两个模块。此外，dojoAttachPoint和dojoAttachEvent两个属性和事件的绑定也被改成了HTML5的形式：data-dojo-attach-point和data-dojo-attach-event。举例来说：

dojo.require("dojo.declare");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], {
  templateString: "<button><span dojoAttachPoint="label"></span></button>"
});

新的写法：

require(["dojo/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin"],
function(declare, _WidgetBase, _TemplatedMixin){
  declare("SimpleTemplate", [_WidgetBase, _TemplatedMixin], {
    templateString: "<button><span data-dojo-attach-point="label"></span></button>"
  });
});

如果widget的template中包含其他的widget，需要使用_WidgetInTemplateMixin。

对于template文件的引用也发生了变化，不在支持templatePath，dojo.cache()也不再使用。

老的写法中对template的引用，会使用下面的写法：

templatePath: dojo.moduleUrl("templates", "myTemplate.html")

而在新的控件定义中：

define([..., "dojo/text!./templates/myTemplate.html",
function(..., myTemplate){
  ...
  templateString: myTemplate

另一个改变是控件中的waiRole和waiState属性不再支持，因为在现在的方式中可以更加直接的使用role和state属性。（查了一下，dojo的wai是跟accessbility resource相关的接口，大家可以Dijit Accessibility Resources这篇文章中去参考）。

this.connect()，this.subscribe()，this._supportingWidgets

这几个方法用来绑定控件的DOM元素事件或者某个内部方法被调用，_supportingWidgets用来注册创建或者改变过的内部控件。这些本来都可以由dojo的基本事件来完成，如dojo.connect(),dojo.subscribe()，这里以this的方式来调用，主要是将这些事件绑定记录在控件内部，从而在控件被销毁的时候，释放和销毁这些事件的绑定，以避免内存泄漏的发生。

在1.8中，这几个方法不再被使用，取而代之的是this.own()函数来记录所有的这些内部的事件和控件。而事件绑定的函数则使用dojo标准模块中的接口如dojo/on，dojo/aspect，dojo/tpoic等。this.own()可以被多次调用，每次可以包含多个事件绑定或者控件的创建。这些被this.own()注册的事件绑定和控件会在控件被销毁的时候一起被释放和销毁。下面是一个可能的使用场景：

this.own(
  // setup an event handler (automatically remove() when I'm destroyed)
  on(this.domNode, "click", function(){ ... }),

  // watch external object (automatically unwatch() when I'm destroyed)
  aStatefulObject.watch("x", function(name, oVal, nVal){ ... }),

  // create a supporting (internal) widget, to be destroyed when I'm destroyed
  new MySupportingWidget(...)
);

DojoX

1.8中DojoX还是作为dojo包的一部分发布出来，但是到2.0的时候，DojoX的模块将被冲标准dojo包中移除。原先DojoX中的功能，有一部分将被移到Dojo和Dijit包中，还有一些将被放到另外的包当中。用户可以通过一些包管理工具从repository中获取。

关于让我欢喜让我忧的Dojo Grid，将由新一代的GridX替代。GridX的架构完全不同于DataGrid和EnhancedGrid，它采用模块化的方式组织起来，提供了更加简洁和直接的接口，更加灵活和精简。尽管我没有用过GridX，但希望它能够在功能和性能上都有更好的表现。

说实话，看到DojoX的这个变化我也有点吃惊，不过鉴于DojoX中的控件一直不是很稳定，而模块化轻量化也是现在前台框架发展的趋势，所以Dojo的这一动作也在情理之中。只是现在正在使用DojoX的朋友门要尽早做打算了，如果要升级到2.0的话还是会有很多的工作要做。正在准备使用1.8的朋友也要有一定的超前仪式，尽量避免对DojoX的过度依赖。使用AMD加载而不再使用dojox全局变量是必须要遵循的原则。

 

总结

 好了，到这里我的这篇《从Dojo1.6到Dojo1.8》的系列文章（或翻译）终于介绍完了，希望能对关注Dojo的同学有所帮助，也希望能看到大家的评论和意见。

让我们一起期待Dojo2.0的发布吧，相信那会是Dojo新的春天！