対象に向けたJS(7)作成キット

作成コンポーネント:
JavaScriptは、開発者がHTML要素に新たな行動を追加することを許可します.1つのコンポーネント構造では、このようなバインディングが可能である.「webコンポーネント」とはW 3 Cのリーダーによる持続的標準化の作業です.以下は常用モードで、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));
    }
};