jQuery + Module Pattern:何时声明/查询元素?

Mic*_*wis 3 javascript jquery document-ready module-pattern

  • 通常,在开始之前,您不会开始查询DOM $(document).ready().
  • 在下面的两个选项中,Widget被声明(并且元素被查询)在$(document).ready().
  • 这个可以吗?我可以初始化jQuery元素(只要我不操作任何东西),就绪处理程序的OUTSIDE?
  • 将整个Widget定义放入其中会更好$(document).ready()吗?
  • 我应该等到Widget.init()查询元素吗?
  • 注意:我是JS设计模式的新手,所以请注意我是否遗漏了一些东西

选项1

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

$(document).ready(function(){
    Widget.init();
});
Run Code Online (Sandbox Code Playgroud)

选项2

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

$(document).ready(function(){
    Widget.init();
});
Run Code Online (Sandbox Code Playgroud)

nei*_*ker 7

我会怎么做:

var Widget = (function(){
    var ele;

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

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

$(function(){
    Widget.init( $('#foo') );
});
Run Code Online (Sandbox Code Playgroud)

如果您的脚本在jquery之前加载,您将看不到错误"undefined is not a function".但是,如果你在domReady之前执行查询,你可能会得到意想不到的结果,ele = []

编辑:顺便说一句..把你的<script>标签放在</body>NOT 之前<head></head>