WebComponents - Измененный атрибут

Question

Со ссылкой qr-code.js У меня есть код.

Тогда я не понимаю, на highlighted line (60), что означает суффикс: «Изменено»?

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

Кроме того, я не понимаю, использование:

this[attrName+'Changed']

Не могли бы вы объяснить мне это ?, я не нахожу никакого ясного объяснения об этом на Google. Благодарю.

Ниже приведен полный код:

'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

Как предложил @Jhecht, это сочетание имени атрибута и суффикс «Changed» для создания родовых имен методов.

Например, если <qr-code> элемент имеет атрибут «foo», который добавляется, обновлены или удалены, то обратный вызов будет определять fn переменную this["fooChanged"], что эквивалентно this.fooChange.

Если этот метод существует, он будет вызываться fn.call().

Однако я не вижу нигде в коде, который вы отправили такой сигнатуре метода, прикрепленной к прототипу пользовательского элемента, поэтому это бесполезный код до дальнейшего уведомления.