面向对象的JS(七) 编写组件

面向对象的JS(7) 编写组件
编写组件：
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));
    }
};

面向对象的JS(七) 编写组件

相关推荐