4
  • 通常、DOM のクエリは、$(document).ready().
  • 以下の両方のオプションで、ウィジェットは$(document).ready().
  • これでよろしいですか？jQuery 要素を初期化できますか (何も操作しない限り)、ready ハンドラーの外側でできますか?
  • この Widget 定義全体を の中に入れたほうがよいでしょう$(document).ready()か?
  • Widget.init()要素をクエリするまで待つ必要がありますか?
  • 注: 私は JS デザイン パターンにまったく慣れていないので、何か不足している場合は注意してください。

オプション1

Widget = {
    ele : $('#ele'),
    init : function(){ ... }
};

$(document).ready(function(){
    Widget.init();
});

オプション2

Widget = (function(){
    var privateEle = $('#privateEle');
    return {
        publicEle: $('#publicEle'),
        init: function(){ ... }
    };
}());

$(document).ready(function(){
    Widget.init();
});
4

3 に答える 3

8

私がすること：

var Widget = (function(){
    var ele;

    function init(_ele){
        ele = _ele;
    };

    return {
        init: init
    };
})();

$(function(){
    Widget.init( $('#foo') );
});

スクリプトが jquery の前に読み込まれる場合、「未定義は関数ではありません」というエラーは表示されません。ただし、domReady の前にクエリを実行すると、ele = [] という予期しない結果が得られる可能性があります。

編集：ところで..タグを前に入れてください<script>。</body><head></head>

于 2013-03-27T19:33:07.853 に答える
0

要素をクエリする時点では要素がまだ存在しないため、機能しません。したがって、クエリは空の jQuery 選択を返します。要素のクエリを実行できるのは、DOM の準備ができている場合のみです。

ただし、次のいずれかが機能します。

の外側に要素を作成します$(document).ready()。完全な html を提供するか、その他の操作を行う必要があることに注意してください$(..).attr(x,y)。

Widget = {
    ele : $("<div id='ele'>"),
    ....
}

または、ウィジェットの初期化時に要素を照会できます。

Widget = {
    ele : "#ele",
    init : function(){
        this.ele = $(this.ele);
        ...
    }
}
于 2013-03-27T19:07:54.263 に答える
0

ボディ終了タグの直前にスクリプトを含めることができます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
</head>
<body>
    <!-- my HTML -->

    <script src="../js/vendor/jquery-1.9.1.js"></script>
    <script src="../js/vendor/jquery-migrate-1.1.1.js"></script>
    <script src="../js/custom.js"></script>
</body>
</html>

DOM の準備ができました ($(document).ready は必要ありません):

   /*custom.js */
    var Widget = (function($){
        var _$element;

        return {
            init: function(){ 
                  _$element = $('#myElementId');
                  // TODO - element is available from now on
           };
        };
    }(jQuery));

    Widget.init();
于 2013-03-27T19:36:43.793 に答える