WebComponents - 属性已更改答案

【问题标题】：WebComponents - Attribute ChangedWebComponents - 属性已更改
【发布时间】：2016-12-16 18:07:56
【问题描述】：

从链接qr-code.js我有下面的代码。

那我就不明白了，highlighted line (60)上的后缀：“Changed”是什么意思？

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

【问题讨论】：

它正在检查属性，部分由变量attrName 的值给出，并将其与字符串Changed 组合。可能是一些自定义属性代码或被 qr-code.js 使用。
@Angel 你找到问题的答案了吗？

标签： javascript html web-component custom-element

【解决方案1】：

正如@Jhecht 建议的那样，它是属性名称和后缀“已更改”的组合，以创建通用方法名称。

例如，如果<qr-code>元素有一个属性“foo”被添加、更新或删除，那么回调会将fn变量定义为this["fooChanged"]，相当于this.fooChanged。

如果该方法存在，会被fn.call()调用。

但是，我在您发布附加到自定义元素原型的此类方法签名的代码中看不到任何地方，因此在另行通知之前，它是无用的代码。

【讨论】：