javascript - 使用 mixin 对 Widget 进行编程实例化

Question

我们已经开始创建一堆 mixin 来扩展 dijit 和我们自己的小部件（基于 _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 网站：

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 从我原来的课程中创建一个新课程。您可以在此 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();
});