如何为自定义小部件定义自定义 getter 和 setter？ - 道场

Question

对于继承自 _WidgetBase 的自定义小部件，定义自定义 getter 和 setter 的模式是什么？我感到困惑的是，在 dojo Stateful 的文档中（据推测由 _WidgetBase 继承）它定义了以下模式

fooBar: null,
_fooBarGetter: function(){
  return this.fooBar;
},
_fooBarSetter: function(value){
  this.fooBar = value;
},

所以一般来说_xxxGetter和_xxxSetter 其中 xxx 是属性

的确切名称

但是在 _WidgetBase 的文档中，示例中显示的模式如下所示

// for the field "foo" in your widget:

// custom getter
_getFooAttr: function(){ /* do something and return a value */ },

// custom setter
_setFooAttr: function(value){ /* do something to set a value */ }

首先 getter/setter 中属性的名称与评论中定义的实际属性不完全匹配，其次是完全不同的模式在有状态文档中看到的。

那么是哪一个？

Answer 1

如果您要通过继承 _WidgetBase 创建 dijit/widget。您需要遵循 _WidgetBase.

的文档

如果您创建的模块继承了 Stateful 模块（不是 dijit），那么您可以按照 Stateful.

的文档进行操作

为了澄清您的疑问，_WidgetBase 自定义 getter/setter 覆盖了 Stateful 的方法。所以如果你正在创建一个小部件，你需要自定义 getter/setter 格式为 _getXxxxAttr/_setXxxxAttr

更新： 问题不在于自定义 setter 的格式。 setter 会设置值，即使您没有自定义 getter/setter。它将创建一个新的属性并存储该值。如果目标只是将值存储为对象中的属性，则不需要自定义 setter/getter。但这作为编码标准并不好（这里不打算讨论这个）。

如果您因更新属性而有一些其他更改或事件，那么您将需要自定义 getter 或 setter，如文档中所述。下面是一个片段，它将向您展示格式之间的区别。观察结果，以及更新的方式和属性。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>
  <script>
    require(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/Stateful"], function(declare, _WidgetBase, Stateful) {

      var CustomDijit = declare([_WidgetBase], {
        _customname: "",
        greeting: "",

        _getNameAttr: function() {
          return this._customname;
        },

        _setNameAttr: function(value) {
          this._customname = value;
          this.greeting = "Hello " + this._customname + "!";
        }
      });

      var CustomDijit2 = declare([_WidgetBase], {
        _customname: "",
        greeting: "",

        _nameGetter: function() {
          return this._customname;
        },

        _nameSetter: function(value) {
          this._customname = value;
          this.greeting = "Hello " + this._customname + "!";
        }
      });

      var obj = new CustomDijit();
      obj.set("name", "Jeff");

      console.log(obj.get("name"));
      console.log(obj._customname);
      console.log(obj.name);
      console.log(obj.greeting);

      var obj2 = new CustomDijit2();
      obj2.set("name", "Jeff");

      console.log(obj2.get("name"));
      console.log(obj2._customname);
      console.log(obj2.name);
      console.log(obj2.greeting);

    });
  </script>
</head>

<body>


</body>

</html>

如何为自定义小部件定义自定义 getter 和 setter？ - 道场

How to define custom getter and setter for a custom widget? - Dojo

javascript

dojo