在原生的js中是不可以创建类的,没有class这个关键字,但是在dojo中,dojo自定义了一个模块叫做dojo/_base/declare
,用这个模块我们可以创建自己的类,实现面向对象编程。
单继承例子:
define(["dojo/_base/declare"],function(declare){ return declare("namespace.Person",null,{ name:null, age:null, constructor: function(args){ declare.safeMixin(this,args); }, toString:function(){ return this.name+":"+this.age } }) }) //调用自定义的类: require(["js/person"], function(Person) { var p=new Person({ name:"wpx", age:20 }); alert(p.toString()) });
多继承例子:
define(["dojo/_base/declare"], function(declare){ var VanillaSoftServe = declare(null, { constructor: function(){ console.log("adding soft serve"); } }); var OreoMixin = declare(null, { constructor: function(){ console.log("mixing in oreos"); }, kind: "plain" }); var CookieDoughMixin = declare(null, { constructor: function(){ console.log("mixing in cookie dough"); }, chunkSize: "medium" }); //继承VanillaSoftServe, OreoMixin, CookieDoughMixin三个类 return declare([VanillaSoftServe, OreoMixin, CookieDoughMixin],{ constructor: function(){ console.log("A blizzard with " + this.kind + " oreos and " + this.chunkSize + "-sized chunks of cookie dough." ); } }); });
通过“return declare([VanillaSoftServe, OreoMixin, CookieDoughMixin]......;”来返回我们所定义的类(widget),然后在其它的地方通过“require”或者“define”来指明变量引用该类(widget)。数组里面的对象“[VanillaSoftServe, OreoMixin, CookieDoughMixin]”是该自定义类的基类。需要强调一点,这里的declare省略了第一个变量:类的名称,即:“declare("pkg.MyClassName", [VanillaSoftServe, OreoMixin, CookieDoughMixin]......;”,如果设定这第一个变量,它会将这个字符串存储到该类的“declaredClass”变量中,同时会将"pkg.MyClassName"作为一个全局的变量用于今后方便构建该类的对象。
这段代码返回的信息为:
adding soft serve
mixing in oreos
mixing in cookie dough
A blizzard with plain oreos and medium-sized chunks of cookie dough.
以下是几种常用的写法:
1.声明一个类并将该类返回:
1 define(["dojo/_base/declare", "extension/bussiness/ModuleBussiness"] 2 , function (declare, ModuleBussiness) { 3 var instance = declare(null, { 4 //构造函数 5 constructor: function (data) { 6 this.data = data; 7 }, 8 action: function () { 9 ModuleBussiness.LayerToc(); 10 } 11 }); 12 return instance; 13 });
设置该模块的名称为ModuleLayerTocCommand,则调用方式为:
require(['ModuleLayerTocCommand'], function (command) { var command = new command(params); command.action(); });
2.直接返回自定义类:调用方法同样是实例化后直接调用方法。
define(["dojo/_base/declare", "dojo/topic", "walk/bussiness/DrawToolBussiness", "com/events/EventManager"] , function (declare, Topic, DrawToolBussiness, EventManager) { return declare(null, { //构造函数 constructor: function (geoType, distance, redraw) { this.geoType = geoType; this.distance = distance; this.redraw = redraw; }, action: function (callbackSuc) { EventManager.removeEvent(); EventManager.deactivateMapTool(); var params = { geoType: this.geoType, distance: this.distance, redraw: this.redraw }; DrawToolBussiness.DrawBuffer(params, callbackSuc); }, actionBuff: function (parm) { EventManager.removeEvent(); EventManager.deactivateMapTool(); DrawToolBussiness.DrawBuffer(parm.params, parm.callbackSuc); } }); });
3.使用单例模式:
define(['dojo/_base/declare', 'dojo/topic', 'dojo/dom-construct', 'dojo/dom-style', 'dojo/dom', 'dojo/on', 'dojo/domReady!'], function (declare, topic, DomConstruct, DomStyle, dom, on) { var instance = declare(null, { constructor: function (kwArgs) { if (instance.Instance) { throw new Error('only one instance can be created'); } }, showProcess: function (container, title) { title = title || "正在加载..."; var div = "<div id='ProcessBarDivCover' style='100%;height:100%;position:absolute;left:0px;top:0px;z-index:999991;background:#000;-ms-filter:alpha(opacity=15);filter:alpha(opacity=15); opacity:0.15;text-align:center;'></div>" var processBardiv = '<div id="ProcessBarDiv" style="background:url(themes/default/images/loading_background.png); 90px; height:85px; left:50%;top:50%;position:absolute;z-index:999992;margin:-43px 0 0 -45px">' + '<img src="themes/default/images/loading.gif" alt="" style=" display:block; 40px; margin:12px auto 0 auto" />' + '<div style=" color:#fff; font-size:12px; text-align:center; margin-top:8px">' + title + '</div> ' + '</div>'; //控制父级定位 if (container) { var position = DomStyle.get(container, "position"); if (position == undefined || position == "" || position == "static") { DomStyle.set(container, "position", "relative"); } DomConstruct.place(div, container, "last"); DomConstruct.place(processBardiv, container, "last"); } else { $(document.body).append(div); $(document.body).append(processBardiv); } var $this = this; on(dom.byId("ProcessBarDivCover"), "dblclick", function () { var tip = confirm("是否取消当前操作?"); if (tip) { $this.closeProcess(); $this.Cancel(); } }); }, closeProcess: function () { DomConstruct.destroy("ProcessBarDiv"); DomConstruct.destroy("ProcessBarDivCover"); }, Cancel: function () {///取消时候调用事件 } }); //单例 if (instance.Instance == undefined || instance.Instance == null) { instance.Instance = new instance(); } return instance; });