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);

Answer 2

取决于：

您想重复使用这些功能吗？ - 如果是的话，你的结构是一个很好的方法

您的代码有多长时间？ - 如果您的代码不是太长而且不能在其他任何地方使用。我认为你不需要把它分解成函数。

Answer 3

我总是将之前的函数准备好文档：

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

我会写简写：

$(function() { ... });

理想情况下，最好只拥有一个如上所述的初始化程序。如果你想在jQuery上下文中编写扩展/插件，This对你也很有用。

这是在jQuery中组织代码的聪明方法吗？

3 个答案: