2

HTMLドキュメントの最後にjQueryが埋め込まれたcmsのプラグインを書いています。

テンプレートコードでいくつかの変数を次のように動的に定義します。

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';
</script>

このコードはプラグインの一部であり、すべてのページに埋め込まれているわけではありません。したがって、名前はすべてのページで定義されているわけではありません。

私はまた、このJavascriptコードを別のファイルに持っています（cmsによってページの最後に自動的に追加されます）：

var MyNamespace = (function() {

    MyClass = function(name) {
        // Do something with name
    }

    return {
        MyClass: MyClass
    }

})();

jQuery が上部に埋め込まれている場合、テンプレート コードで次のようにします。

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';

    $(document).ready(function() {
        new MyNamespace.MyClass(name);        
    });
</script>

ただし、一番下に jQuery が含まれていると、それはできません ($ はまだ定義されていません)。jQuery-DomReady 呼び出しを別のコード ファイルに追加することもできません。これはすべてのページで実行されるためですが、名前var はすべてのページで初期化されず、コードが壊れます。

私に何ができる？古き良き document.ready は賢明なアプローチですか?

4

2 に答える 2

5

スクリプトでメソッドを定義し、グローバル javascript ファイルから実行できます。

あなたのページでこのようなことをすると

<script>
    var name = '<?php echo $nameTakenFromTheDatabase; ?>';

    function runWhenReady(){
        new MyNamespace.MyClass(name);        
    }
</script>

次に、ページの下部に追加されたグローバル ファイルで、次のようなことができます。

$('document').ready(function() {
    if (typeof runWhenReady != 'undefined') {
        runWhenReady();
    }
});

あなたが創造的であれば、「runWhenReady」をメソッドのコレクションにすることができます。これは、ページの準備ができたときに常にロードされます。

EDIT配列を使用する例を追加しました：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>

    <script type="text/javascript">
        // check if array is already created. This is necessary if it is possible to render multiple pages which uses the runWhenReadyFunctions collection.
        if (typeof runWhenReadyFunctions == 'undefined'){
            window.runWhenReadyFunctions = new Array();
        }

        runWhenReadyFunctions.push(function(){
            $('#testDiv').text('hello world!');
        });

        runWhenReadyFunctions.push(function(){
            $('#testDiv2').text('hello another world!');
        })

    </script>


    <div id="testDiv"></div>
    <div id="testDiv2"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        if (typeof runWhenReadyFunctions != 'undefined') {
            $.each(runWhenReadyFunctions, function(idx, func){
                func();
            });
        }
    </script>

</body>
</html>
于 2012-04-27T14:17:24.533 に答える
0

編集-グローバルスペースを乱雑にしないでください。jQueryを<script>含めるタグの下にタグを配置しない理由がわかりません。それ以外の場合は、AJAX 呼び出しを行うことができます

<script>


    $('document').ready(function() {
        $.getJSON('getmyname.php', function(data){
            new MyNamespace.MyClass(data.name);        
        });
    });
</script>
于 2012-04-27T14:02:32.737 に答える