标准的 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