WebComponents - 屬性更改

從鏈接qr-code.js我有下面的代碼。WebComponents - 屬性更改

然後我不明白，在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']

你能解釋我這個？我不覺得這個對谷歌的任何明確的解釋。謝謝。

以下是完整代碼：

'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 
}); 
});

來源

2016-12-16 Angel

它正在檢查屬性，部分由變量attrName的值給出，並將其與字符串Changed結合。可能是一些自定義屬性代碼或由qr-code.js使用。 – Jhecht

@Angel你有沒有找到你的問題的答案？ – Supersharp

由於@Jhecht建議，這是一個屬性和「改變」的後綴名的組合，以創建通用方法名。

例如，如果<qr-code>元件具有被添加，更新或刪除一個屬性「foo」，那麼回調將定義fn變量this["fooChanged"]，這相當於this.fooChange。

如果此方法存在，它將由fn.call()調用。

但是我在代碼中看不到任何代碼，你發佈了這樣的方法簽名附加到自定義元素原型，所以它是無用的代碼，直到進一步通知。

來源

2016-12-16 22:55:18 Supersharp

WebComponents - 屬性更改

回答

相關問題