javascript – Polymer中的私有状态变量

在Polymer元素中存储私有状态属性的推荐做法是什么？例如,仅对内部渲染有意义的属性(例如,一些布尔标志指示元素的哪些部分被渲染,或者从dom-repeat的对象构建的临时数组可以迭代).它们并不意味着通过元素的API公开,仅供内部使用.

到目前为止我一直在做的是声明属性可以通过属性对象中的元素API使用,而“私有”属性已经在ready和其他函数中设置(例如this._tempArray = [])而没有在属性中明确声明它们.我不知道这是不是一个好主意？

<dom-module id="test">
  <template>
    <style>

    </style>

    <template is="dom-if" if="[[_isDataReady]]">

    </template>

  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'test',

        properties: {
          dataUrl: {
            type: String
          }
        },

        ready: function() {
          this._isDataReady = false;
          this._tempArray = [];

          // Get data asynchronously from dataUrl
          // ...
        }
      });
    })();
  </script>
</dom-module>

解决方法:

执行此操作的最佳方法是将您的属性声明为普通属性,但在名称前面加上下划线(_)前缀,并将该属性设置为只读,以便外部使用者不能覆盖该变量.

例如：

properties: {
    _isDataReady: {
        type: Boolean,
        value: false,
        readOnly: true
    }
}

ready: function () {
    ...
    this.async(function () {
        //Some async logic
        ...
        this._set_isDataReady(true); //You will need to use this special generated setter to set the value
    );
}

此方法向消费者传达他们不应该使用此属性,因为它是内部属性,并且只读属性可以防止在正常工作流程之外错误地设置属性.

标签：javascript,polymer,web-component
来源： https://codeday.me/bug/20190824/1706340.html