重写 HTML 标签属性和方法 - Javascript 中实现 AOP 面向切面编程

假如有这样一个应用场景，如果对 INPUT 输入框的值进行控制，要求获取或设置时必须全部转成大写字母。当然，实现这个功能的方式太多了，这里只介绍一种大家最不可能用到的实现方式：当获取或设置时对逻辑进行拦截，增加一些自己的处理逻辑。

重写属性

这里仅提供一种编程思路，真实情况应该不对这么玩。实现思路如下：

重新定义 INPUT 标签的value属性。
为 INPUT 标签添加新的属性getter和setter，可以由使用者自己添加切面逻辑。
在新的value逻辑中执行切面逻辑。

在之前的一篇笔记中介绍了扩展原生标签属性的方法，请参阅扩展 HTML 原生标签（上），里面的一些注意事项不再重复。

先上代码。

HTMLInputElement.valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
HTMLInputElement.executeAopFunction = function(object, func, value) {
    if (typeof (func) == 'string') {
        return (function(func, value) { return eval(func) }).call(object, func, value)
    }
    else {
        return func.call(object, value);
    }
}

HTMLInputElement.prototyoe.getter = null;
HTMLInputElement.prototyoe.setter = null;

Object.defineProperty(HTMLInputElement.prototype, 'value', {
    get () {
        let value = HTMLInputElement.valueDescriptor.get.call(this);
        if (this.getter != null) {
            value = HTMLInputElement.executeAopFunction(this, this.getter, value);
        }
        return value;
    },
    set (value) {
        if (this.setter != null) {
            value = HTMLInputElement.executeAopFunction(this, this.setter, value);
        }
        HTMLInputElement.valueDescriptor.set.call(this, value);
    }
});

$('#UPPER').getter = function(value) {
    return value.toUpperCase();
};

$('#UPPER').setter = 'value.toUpperCase()';

代码解释如下：

HTMLInputElement.valueDescriptor用于保存 INPUT 标签value属性原生的 getter 和 setter。不能在value重定义逻辑中使用this.value这样的操作，会造成堆栈溢出。
HTMLInputElement.executeAopFunction用于执行自定义的 getter 或 setter 函数，支持函数或字符串。
HTMLInputElement.prototyoe.getter和HTMLInputElement.prototyoe.setter分别定义了一个getter和setter属性。
Object.defineProperty用于重新定义 INPUT 标签的value属性。
value = HTMLInputElement.valueDescriptor.get.call(this)用于执行原生的 getter 逻辑，即原来是value = this.value。
HTMLInputElement.valueDescriptor.set.call(this, value)用于执行原生的 setter 逻辑，即原来是this.value = value。
$('#UPPER').getter假设有一个文本框 id 为UPPER，这里为这个文本框定义了一个 getter 逻辑，函数形式。
$('#UPPER').setter为文本框定义了一个 setter 逻辑，字符串形式。

重写方法

这一节跟切面没什么关系。

每个标签都有一个getAttribute方法，用于获取自定义标签属性的值。属性名称如attr-name和attrName都是合法的属性值（其实任意字符都可以），且不区分大小写，建议属性值使用第一种的连字符格式。但是元素属性都是 Camel 格式，现在要求无论传入的是 Camel 格式还是连字符格式，都能获取到相应的属性值。

解决思路如下：

找到并保存原生的getAttribute方法。
定义新的getAttribute方法。
在新getAttribute方法添加逻辑并执行原生getAttribute方法。

上代码。

代码解释：

原生getAttribute属性是所有元素标签都有的，所以在 HTMLElement 类中。
第一句 HTMLElement.prototype.getAttribute 是getAttribute属性的原生逻辑。将逻辑保存在自定义全局变量HTMLElement.getAttribute中，其中的getAttribute是变量名，HTMLElement是保存这个变量的类，其实命名成什么保存在哪里无所谓。
第二句 HTMLElement.prototype.getAttribute = function .. 是通过原型来重新定义 HTMLElement 类的getAttribute属性。
HTMLElement.getAttribute.call(this, attrName)是调用原生的getAttribute方法。
toCamel和toHyphen是自定义的字符串方法，分别将属性名转成 Camel 或连字符格式，代码略。
??是空值合并运算符，当左面的值为null或undefined时才取右面的值。这里当所有类型的属性都检查一次后，如果都为null则说明没有设置这个属性，则返回默认值。

好像就这么多。有问题请提交反馈。

（本文完）