Question

我有一个包含所有jquery代码的js文件，我遵循了2个练习，但我不知道哪个更好：

首先：

jQuery(document).ready(function(){
    var $ = jQuery;

    //some code here

    //another code not related to the first one

    //also another independent code

    //... and so on
});

第二

jQuery(document).ready(function(){
    //call the functions here
    my_func_1();
    my_func_2();
    my_func_3();
    my_func_4();
});

//list of functions
function my_func_1() {
   //function code
}

function my_func_2() {
   //function code
}

function my_func_3() {
   //function code
}

function my_func_4() {
   //function code
}

第二种方法似乎更好，更有条理，但有时候让我们说my_func_2（）没有找到它在页面上寻找的内容，例如$（'＃my-id'），my_func_2（）后面的函数永远不会跑。

我还尝试了另一种方法，在一个js文件中定义我的所有jquery函数，然后在html中使用脚本标记添加函数：

<script>my_func_2();</script>

那么对jquery代码进行分组的最佳方法是什么？

我们应该使用：

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

每一堆代码？

并提前致谢。

Answer 1

如果func_2（）中的代码可能导致错误，那么你真的应该在try / catch块中包装函数的内容，以确保下一个函数运行没有问题。

此外，以下也是多个启动功能的选项，同时保持其错误范围分开：

$(document).ready(function(e) { ... My function code 1 .... });
$(document).ready(function(e) { ... My function code 2 .... });
$(document).ready(function(e) { ... My function code 3 .... });
$(document).ready(function(e) { ... My function code 4 .... });

Answer 2

var myFunc1 = function() {};
var myFunc2 = function() {};
var myFunc3 = function() {};
var myFunc4 = function() {};

首先声明你的功能。并查看jQuery.ready

的缩写

jQuery(function($) {
    // in here $ === jQuery.
    myFunc1();
    myFunc2();
    myFunc3();
    myFunc4();
});

Answer 3

一般来说，保持功能简洁明了是一种很好的做法。另外，考虑将代码拆分为小单元可以帮助您在其他地方重复使用它。

此外，您应该记住测试代码的方面。与大块相比，测试小的独立代码单元要容易得多。

Answer 4

将函数定义放在$.ready()中的意义在于，这些函数会被包含在该上下文中，而不能从外部访问。这可能是一个优点（访问封闭变量或防止函数滥用），但使调试更难。

根据我的经验，开始在外面宣布你的功能（这样你就可以轻松测试代码），而不是将这些功能移到$.ready()。

分组许多jquery函数的最佳实践是什么？

4 个答案: