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

我也不明白以下内容的用法:

这个[attrName+'已更改']

你能给我解释一下吗？，我在 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.fooChanged .

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

但是，我在您发布的附加到自定义元素原型(prototype)的方法签名的代码中没有看到任何地方，因此在进一步通知之前它是无用的代码。