javascript - 这是在 jQuery 中组织代码的明智方式吗？

Question

很长一段时间我都是这样在里面写我所有的代码......

$(document).ready(function(){
    $('.show_module').click(function(){

    });
     ...

});

将各种点击处理程序放在那里。但最近有人向我介绍了一种新的做事方式，我想感受一下这是否是一种明智的做法。

想法是将所有处理程序都放在相关函数中，然后在上面的 document.ready 中使用最少的代码。

例如……

$(document).ready(function(){
    page_handler(); // other functions follow
});

function page_handler(){
    $('.show_module').click(function(){

    });
     ...
}

这似乎允许在函数中组织相关的处理程序，并将 document.ready 用作更多的初始化程序。

我知道在 JavaScript 中函数和变量在代码开始执行之前就被“提升”了

do_something();
function do_something(){

}

之所以有效，是因为该函数在实际调用 do_something() 之前就已准备就绪，即使它出现在实际函数定义之前也是如此。

我想知道这里是否会发生同样的事情，以及这个想法/做事方式有多“好”。

Answer 1

这会将您的所有处理程序暴露给全局 (window) 范围，这可能会导致冲突。

我更喜欢这样做...

(function($) {

 // Anything you do in here won't be attached to window.
 var a;

 // If you must have something global, set it explicitly
 window.doSomething = function() { ... }

 // We can also use $ for jQuery here, even if we have used jQuery.noConflict()
 $('body')...

})(jQuery);