2

DOM 要素のプロパティまたはその CSSStyleDeclation オブジェクトのプロパティを変更するたびに、ページが再描画されることは当然のことだと思います。

http://jsfiddle.net/peqtL/

document.getElementById("foo").innerHTML = "bar";
document.getElementById("foo").style.padding = "30px";

しかし、考えてみると.style、CSSStyleDeclarationオブジェクトをpadding返し、プロパティを返します。プロパティを設定するだけで、それがどのようにトリガーされ、ページの外観が変わるのでしょうか?

これは、ページ レンダラーがすべての DOM 要素とオブジェクトに登録し、プロパティが変更されるたびにレンダラーにページの一部を再描画するように通知する、古典的な「オブザーバー パターン」でしょうか。CSSStyleDeclaration

あるいは、何かを変更したとしても、ページ全体が影響を受ける可能性があるというのは本当ではないでしょうかz-index。ツリー、または要素にposition: relativeまたはがある場合はposition: absolute、ページ上のすべての要素に影響を与える可能性があるため、ページ全体を再描画する必要があります。つまり、レンダラーはすべての DOM 要素とそのCSSStyleDeclarationオブジェクトに登録する必要がない場合があります。render はトップレベルの DOM オブジェクト (documentまたは<html>tag 要素のいずれか) に登録する必要があります。document.documentElement簡単な実装は、そのプロパティまたはその子孫のプロパティが変更された場合、ページ全体を再描画するようにレンダラーに通知することです。プロパティの値を取得するだけであれば、ページを再描画するようレンダラーに通知する必要はありません。

そして、この「オブザーバー パターン」は DOM と JavaScript エンジンの内部にあります。

HTML と JavaScript のユーザーには実装が隠され、知られていないことになっていることはわかっていますが、プログラミングの観点から、これをソフトウェア システムの一部として実装できる実用的な方法を知りたいと考えています。

4

2 に答える 2

0

このパターンを実装する良い方法は、css クラスを使用することです。各 HTML 要素の DOM 機能を変更することは避けてください。HTML 要素セットの視覚的側面を変更するか、新しいクラスを追加します。以下に簡単な例を示します。

    //html
    First name: <input type="text" id="fmame" class="mandatory">
    Last name:  <input type="text" id="lname" class="mandatory" value="Blablabla">

    //javascript
    var inputs = $("input");
    for (var i = 0, j = inputs.length; i < j; i++) {
        if (inputs[i].className === 'mandatory' && inputs[i].value === '')
            inputs[i].className += ' error';
    }

    //css
    .error {
        background-color: red;
    }
于 2013-05-21T15:26:09.513 に答える