2

私はこの本「Javascript忍者の秘密」を読んでいます。ここでは、ほとんどのコードがカスタムアサーションを使用して示されています。コードは次のとおりです。

(function () {
    var queue = [],
        paused = false,
        results;

    this.test = function test(name, fn) {
        queue.push(function () {
            results = document.getElementById("results");
            results = assert(true, name).appendChild(
            document.createElement("ul"));
            fn();
        });
        runTest();
    };

    this.pause = function () {
        paused = true;
    };

    this.resume = function () {
        paused = false;
        setTimeout(runTest, 1);
    };

    function runTest() {
        if (!paused && queue.length) {
            queue.shift()();
            if (!paused) {
                resume();
            }
        }
    }

    this.assert = function assert(value, desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));

        if (results === undefined) results = document.getElementById("results");

        results.appendChild(li);

        if (!value) li.parentNode.parentNode.className = "fail";

        return li;
    };
})();

ご覧のとおり、自己呼び出し関数です。

私はそれで遊んでいます、そして私がちょうど理解できない何かが、同じタグの間で、私がこれをする理由です：

<script type="text/javascript">

    ... previously shown code ...

    window.onload = function(){
       assert(true, "this works");
    };

</script>

そして、もう一度、このようにアサートを実行すると、次のようになります。

<script type="text/javascript">

    ... previously shown code ...
    assert(true, "this does not work");

</script>

window.onloadイベントを使用せずにアサーションを実行しようとすると、アサーションメソッドの「results.appendChild（li）」行に「UncaughtTypeError：Cannot callmethod'appendChild'tonull」というエラーが表示されます。

手伝ってくれてどうもありがとう。

4

2 に答える 2

1

ページ上の要素がレンダリングされる前にコードを呼び出しているためです。したがって、コードが検索するdocument.getElementById("results")と、何も検出されず、nullが返されます。

于 2012-08-06T18:46:12.177 に答える
1

要素のマークアップ（with id="results"）は、コードが実行されるまでに解析されないため、getElementByIdreturnsnullを使用してそれをフェッチしようとすると、.appendChild失敗します。

コードをwindow.onloadハンドラー内に配置すると、ウィンドウがロードされた後にのみ実行されることが保証されます。その時点で、ドキュメントマークアップも完全に解析され、要素が使用可能になります。

または、スクリプト要素をターゲット要素の後に配置することもできます。

<ul id="results"></ul>
<script>
//your code
</script>

スクリプト要素はターゲット要素の後にあるため、スクリプトが実行されるまでにターゲット要素が存在することが保証されます。

于 2012-08-06T18:46:34.590 に答える