Dojo – Sanmao的幸福(?)生活

使用 Dojo 的打包工具

Sanmao — Wed, 15 Apr 2009 06:58:51 +0000

Dojo 一般的发布包是把各个组件单独存放在各自的文件中的，比如按钮控件对应 /dijit/form/Button.js，这样做对于代码的维护和开发是比较有利的。但如果放在生产环境，每个使用 Dojo 的页面将产生数十个单独的 HTTP 请求，则会影响到应用的性能。针对这个问题，Dojo 提供了一个自定义打包工具，可以将自己常用的组件合并到一个文件中，还能压缩 js、css 文件的大小，以提高性能。

使用此工具需要准备：

Java 运行环境
Dojo 的源代码包（以 -src 结尾）

接下来是创建 Profile。在 util/buildscripts/profiles 目录下，可以看到一些样例 profile，我们可以参考已有的创建一个：

dependencies ={
    layers:  [
        { //第一部分
        name: "mydojo.js",

dependencies: [ //第二部分
            "dijit.Button",
            "dojox.wire.Wire",
            "dojox.wire.XmlWire",
            "explosive.space.Modulator"
        ]
        }
    ],
    prefixes: [ //第三部分

      [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ],
        [ "explosive", "../../explosive" ]
    ]
};

下面说明一下各个主要部分的作用：

指定打包最后生成的文件名
列举都有哪些组件将被打包到此文件
各源文件所在的路径，比如 dijit 开头的包，都放在 ../dijit 目录下

然后，运行打包脚本，通过 profile 参数指定配置文件：

$ cd util/buildscripts
$ build.sh profile=foo action=release

最后，将打好包的文件替代原始的 Dojo 文件，加入到页面引用中就行了。

参考资料：The Package System and Custom Builds

扩展标准的 Dijit 控件

Sanmao — Tue, 14 Apr 2009 03:24:46 +0000

标准的 Dojo 包中提供了很多 Dijit 控件，提供了各种丰富的功能。但是用户需求是多种多样的，总有些标准控件没有实现的部分。还好 Dojo 提供了多种扩展机制，以适应不同的场景。

接下来以为 dijit.Dialog 扩展一个简单的 setTitle 方法为例，介绍一下三种不同的方式。

1、使用 dojo.extend 直接修改 Dialog 的原型

dojo.require("dijit.Dialog");
dojo.extend(dijit.Dialog,{
     setTitle: function(/*string*/title){
         this.titleNode.innerHTML = title || "";
     }
});

2、使用 dojo.mixin 将 setTitle 添加到某个指定的 Dialog 实例

dojo.require("dijit.Dialog");
dojo.addOnLoad(function(){
     var dialog = new dijit.Dialog({ title:"test" });
     dialog.startup();
     dojo.mixin(dialog,{
          setTitle:function(title){
               this.titleNode.innerHTML = title || "";
          }
     });
});

3、使用 dojo.declare 定义一个继承自 Dialog 的子类

dojo.provide("my.Dialog");
dojo.require("dijit.Dialog");
dojo.declare("my.Dialog",dijit.Dialog,{
     setTitle:function(title){
          this.titleNode.innerHTML = title || "";
     }
});

在我的项目中也采用了这种方法，原因如下：一是它保留了原有 Dialog，没有对其进行修改；二是可以通过 inherited 实现往现有的方法中增加代码。例如为 show 方法增加一个判断条件：

dojo.require("dijit.Dialog");
dojo.declare("my.Dialog",dijit.Dialog,{
     canBeShown: true,
     // extend the default show() method
     show:function(){
            if(this.canBeShown){
                    this.inherited(arguments);
            }
     }
});

参考资料：Mucking Dijit