4
  • 通常，在$(document).ready().
  • 在下面的两个选项中，Widget 在$(document).ready().
  • 这个可以吗？我可以在准备好的处理程序之外初始化 jQuery 元素（只要我不操作任何东西）吗？
  • 将整个 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 回答