分組許多jquery函數的最佳實踐是什么？

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() 。