WebComponents - 属性が変更されました

Question

リンクqr-code.jsから以下のコードがあります。

私は、highlighted line (60)で、接尾辞： "Changed"を意味するのは分かりません。 ？あなたは私にこれを説明してもらえ

this[attrName+'Changed']

私はGoogleでこのことについて明確な説明を見つけることができません：

attributeChangedCallback: { 
    value: function (attrName, oldVal, newVal) { 
     var fn = this[attrName+'Changed']; 
     if (fn && typeof fn === 'function') { 
      fn.call(this, oldVal, newVal); 
     } 
     this.generate(); 
    } 

はまた、私はの使用方法を理解していません。ありがとう。以下は

完全なコードです：@Jhechtが示唆したように、それは一般的なメソッド名を作成するために、属性や接尾語「変更」の名の組み合わせです、

'use strict'; 

(function(definition) { 
    if (typeof define === 'function' && define.amd) { 
     define(['QRCode'], definition); 
    } else if (typeof module === 'object' && module.exports) { 
     var QRCode = require('qrjs'); 
     module.exports = definition(QRCode); 
    } else { 
     definition(window.QRCode); 
    } 
})(function(QRCode) { 
// 
// Prototype 
// 
var proto = Object.create(HTMLElement.prototype, { 
    // 
    // Attributes 
    // 
    attrs: { 
     value: { 
      data: null, 
      format: 'png', 
      modulesize: 5, 
      margin: 4 
     } 
    }, 
    defineAttributes: { 
     value: function() { 
      var attrs = Object.keys(this.attrs), 
       attr; 
      for (var i=0; i<attrs.length; i++) { 
       attr = attrs[i]; 
       (function (attr) { 
        Object.defineProperty(this, attr, { 
         get: function() { 
          var value = this.getAttribute(attr); 
          return value === null ? this.attrs[attr] : value; 
         }, 
         set: function (value) { 
          this.setAttribute(attr, value); 
         } 
        }); 
       }.bind(this))(attr); 
      } 
     } 
    }, 
    // 
    // LifeCycle Callbacks 
    // 
    createdCallback: { 
     value: function() { 
      this.createShadowRoot(); 
      this.defineAttributes(); 
      this.generate(); 
     } 
    }, 
    attributeChangedCallback: { 
     value: function (attrName, oldVal, newVal) { 
      var fn = this[attrName+'Changed']; 
      if (fn && typeof fn === 'function') { 
       fn.call(this, oldVal, newVal); 
      } 
      this.generate(); 
     } 
    }, 
    // 
    // Methods 
    // 
    getOptions: { 
     value: function() { 
      var modulesize = this.modulesize, 
       margin = this.margin; 
      return { 
       modulesize: modulesize !== null ? parseInt(modulesize) : modulesize, 
       margin: margin !== null ? parseInt(margin) : margin 
      }; 
     } 
    }, 
    generate: { 
     value: function() { 
      if (this.data !== null) { 
       if (this.format === 'png') { 
        this.generatePNG(); 
       } 
       else if (this.format === 'html') { 
        this.generateHTML(); 
       } 
       else if (this.format === 'svg') { 
        this.generateSVG(); 
       } 
       else { 
        this.shadowRoot.innerHTML = '<div>qr-code: '+ this.format +' not supported!</div>' 
       } 
      } 
      else { 
       this.shadowRoot.innerHTML = '<div>qr-code: no data!</div>' 
      } 
     } 
    }, 
    generatePNG: { 
     value: function() { 
      try { 
       var img = document.createElement('img'); 
       img.src = QRCode.generatePNG(this.data, this.getOptions()); 
       this.clear(); 
       this.shadowRoot.appendChild(img); 
      } 
      catch (e) { 
       this.shadowRoot.innerHTML = '<div>qr-code: no canvas support!</div>' 
      } 
     } 
    }, 
    generateHTML: { 
     value: function() { 
      var div = QRCode.generateHTML(this.data, this.getOptions()); 
      this.clear(); 
      this.shadowRoot.appendChild(div); 
     } 
    }, 
    generateSVG: { 
     value: function() { 
      var div = QRCode.generateSVG(this.data, this.getOptions()); 
      this.clear(); 
      this.shadowRoot.appendChild(div); 
     } 
    }, 
    clear: { 
     value: function() { 
      while (this.shadowRoot.lastChild) { 
       this.shadowRoot.removeChild(this.shadowRoot.lastChild); 
      } 
     } 
    } 
}); 
// 
// Register 
// 
document.registerElement('qr-code', { 
    prototype: proto 
}); 
}); 

Answer 1

。例えば

<qr-code>要素は、追加、更新または削除されている属性「foo」を有する場合、コールバックはthis.fooChangeに相当する、this["fooChanged"]にfn変数を定義します。

このメソッドが存在する場合は、fn.call()によって呼び出されます。

しかし、カスタム要素のプロトタイプに添付されているこのようなメソッドシグネチャを投稿したコードはどこにもないので、後で通知するまで無用なコードです。