4

すべての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
});

2番：

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
}

2番目のメソッドはより適切で整理されているように見えますが、my_func_2（）がページ上で探しているものを見つけられなかったとしましょう。たとえば、$（'＃my-id'）、my_func_2（）に続く関数は実行されません。

また、別の方法を試し、すべてのjquery関数を1つのjsファイルで定義してから、HTMLのスクリプトタグを使用して関数を追加しました。

<script>my_func_2();</script>

では、jqueryコードをグループ化するための最良の方法は何ですか？

使用する必要があります：

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

コードの束ごとに？

よろしくお願いします。

4

4 に答える 4

2

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 .... });
于 2012-04-27T09:43:57.267 に答える
1 
var myFunc1 = function() {};
var myFunc2 = function() {};
var myFunc3 = function() {};
var myFunc4 = function() {};

最初に関数を宣言します。そして、この短縮形を参照してくださいjQuery.ready

jQuery(function($) {
    // in here $ === jQuery.
    myFunc1();
    myFunc2();
    myFunc3();
    myFunc4();
});
于 2012-04-27T10:01:09.630 に答える
0

一般に、機能は短く簡潔にすることをお勧めします。また、コードを小さな単位に分割すると、別の場所でコードを再利用するのに役立つことを考慮してください。

さらに、コードのテストの側面に留意する必要があります。大きなチャンクよりも、コードの小さな個別のユニットをテストする方がはるかに簡単です。

于 2012-04-27T09:36:19.450 に答える
0

関数定義を内部に配置することのポイント$.ready()は、それらの関数がそのコンテキストに囲まれ、外部からアクセスできなくなることです。これは（囲まれた変数にアクセスしたり、関数の誤用を防ぐために）利点になる可能性がありますが、デバッグが難しくなります。

私の経験では、これらの関数をに移動するよりも、外部で関数を宣言し始めてください（コードを簡単にテストできるようにするため）$.ready()。

于 2012-04-27T10:18:59.477 に答える