Question

我们已经开始创建一堆mixin来扩展dijits和我们自己的小部件（基于_WidgetBase）的功能。使用1.8声明，我们使用data-dojo-mixins，解析器用它们做我们想要的。

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

任何建议都会有所帮助，谢谢。

Answer 1

以下是我始终如何创建扩展_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));
});

Answer 2

看起来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();
});

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

2 个答案: