面向对象的JS(7) 编写组件-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3843/article/details/82569618

本文介绍如何使用JavaScript创建自定义DOM组件，通过将JavaScript行为绑定到HTML元素，实现组件化开发。包括定义组件、HTML元素样式和绑定事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写组件：
JavaScript允许开发人员在HTML元素中添加新的行为。在一个组件结构中可以进行诸如此类的绑定。"web组件"就是由W3C领导进行的持续标准化工作。下面是一个常用模式，绑定JavaScript对象到DOM对象。通过这种方式，我们可以收集行为并管理他们的生命周期。
1 定义JavaScript组件

function InputTextNumberComponent(domElement) {
    this.initialize(domElement);
}
InputTextNumberComponent.prototype.initialize =
    function (domElement) {
        domElement.onchange = function () {
            //just a format
            domElement.value = "-"+domElement.value + "-";
        };
        domElement.jsComponent = this; //Expando property
        this.domElement = domElement;
};
InputTextNumberComponent.prototype.resetValue = function () {
    this.domElement.value = "";
};

2 定义组件相关的html元素的CSS类

<style type="text/css">
.inputTextNumber { text-align:right; }
</style>
<input type="text" class="inputTextNumber" name="NumberField"
size="10" value="Click me!" onClick="this.jsComponent.resetValue()">

3 当DOM加载完毕，检查html元素并创建组件：

window.onload = function () {
    var inputTextNumbers = document.getElementsByClassName("inputTextNumber");
    for (var i = 0; i < inputTextNumbers.length; i++) {
        var myComp = new InputTextNumberComponent(
            inputTextNumbers.item(i));
    }
};