使用mixins对Widget进行编程实例化

Question

我们已经开始创建一些mixin，扩展了dijits和我们自己的小部件（基于_WidgetBase）的功能。使用1.8声明式，我们使用data-dojo-mixins，解析器完成我们想要的任务。

但是，在几个地方，我们正在以编程方式实例化小部件。有没有办法告诉Dojo实例化这个类，这个/这些其他类混合在一起？或者我们必须分别使用safeMixin吗？

任何意见将是有益的，谢谢。

Answer 1

看起来createSubClass做了什么，我想要的。用我的mixin从原来的课程中创建一门新课程。你可以看到输出在控制台at this jsFiddle

require([ 
     'dojo/_base/declare', 
     'dojo/_base/window', 
     'dijit/_WidgetBase', 
     'dijit/_TemplatedMixin', 
     'dojo/_base/lang' 
    ], 
    function(
     dojoDeclare, 
     win, 
     _WidgetBase, 
     templatedMixin, 
     lang 
    ) { 
    console.clear() 
    var R = dojoDeclare([_WidgetBase, templatedMixin], { 
     templateString : "<div>Go go widget gadget</div>", 
     postCreate : function() { 
      this.inherited(arguments); 
      console.log("r - postCreate"); 
     }, 
     startup : function() { 
      this.inherited(arguments); 
      console.log("r - startup"); 
     } 
    }); 

    var M = dojoDeclare([], { 
     postCreate : function() { 
      console.log("m - postCreate"); 
      this.inherited(arguments); 
      console.log("m - postCreate after inherited"); 
     } 
    }) 

    var X = R.createSubclass(M); 
    var r = new X(); 

    console.log([X, R]); 

    r.placeAt(win.body()); 

    r.startup(); 
}); 

Answer 2

这里是我怎么总是创建扩展_WidgetBase我的自定义部件：

define([ 
    'dijit/_WidgetBase', 
    'path/to/module1', 
    'path/to/module2' /* etc. */ 
], function(WidgetBase, module1, module2) { 

    /* Here you can define your module's functions */ 

    var myVar = 42; 
    var foo = function(num){ 
     alert("My var is " + myVar); 
    }; 

    return declare([WidgetBase], { 

     /* This is the widget you are creating. Public variables should go here */ 

     myGlobalVar = "I did stuff", 
     doStuff: function(a, b) { 
      module1.doSomething(a); 
      module2.doSomethingElse(b); 
      alert(this.myGlobalVar); 
     }, 
     callDoStuff: function() { 
      alert("I'm gonna doStuff"); 
      this.doStuff(3, 5); 
     } 
    }); 

}); 

当然，如果你只是想以编程方式扩展插件，你可以随时落回用dojo._base.lang::extend()（字面扩展小部件）或dojo._base.lang::mixin()（修改小部件的原型）。

从DojoToolkit website：

require(["dojo/_base/lang", "dojo/json"], function(lang, json){ 
    // define a class 
    var myClass = function(){ 
    this.defaultProp = "default value"; 
    }; 
    myClass.prototype = {}; 
    console.log("the class (unmodified):", json.stringify(myClass.prototype)); 

    // extend the class 
    lang.extend(myClass, {"extendedProp": "extendedValue"}); 
    console.log("the class (modified with lang.extend):", json.stringify(myClass.prototype)); 

    var t = new myClass(); 
    // add new properties to the instance of our class 
    lang.mixin(t, {"myProp": "myValue"}); 
    console.log("the instance (modified with lang.mixin):", json.stringify(t)); 
});