8

私のアプリの JavaScript/jQuery は外部scripts.jsファイルに含まれています。一般的には次のようになります。

$('document').on('ready', function() {
    giraffe();
    elephant();
    zebra();
});

function giraffe() {
    // code
}

function elephant() {
    // code
}

function zebra() {
    // code
}

giraffe()で利用可能なビューに/animal/giraffe
elephant()のみ使用されます で利用可能なビューに/animal/elephant
zebra()のみ使用されます で利用可能なビューにのみ使用されます/animal/zebra,

ただし、3 つすべてがビュー available で実行されることになっています/animal/all。.jsこれは初歩的な例ですが、HTTP リクエストを最小限に抑えることは別として、これらすべてを 1 つのファイルにまとめる理由は次のとおりです。

私の質問は、これは JavaScript のレンダリングに影響しますか? giraffe()で使用されていない (作業する要素がない)にもかかわらず/animal/zebra、まだ呼び出されています。何もすることが見つからない場合、js/jQueryは関数を無視しますか? スクリプト全体が読み取られていると確信しており、おそらく時間がかかります。それで、これを処理する最善の方法は何ですか？

1 つのソリューション

競合を避けるために、アクティブなページが必要とする関数のみを実行するように、js ファイルの先頭に条件を作成しました。

$('document').on('ready', function() {
    var body = $('body');

    if( body.hasClass('giraffe') ) {
        giraffe();
    }

    if( body.hasClass('elephant') ) {
        elephant();
    }

    if( body.hasClass('zebra') ) {
        zebra();
    }
});

これは私が望むよりも少し冗長ですが、これらの関数をモジュール化/競合から解放することに成功しています。このソリューションの改善を歓迎します。

4

3 に答える 3

3

必要なコードだけを実行する方が確実に良いでしょう。それほど難しいことではありません。唯一の小さな複雑さは、あなたの/animals/allケースを処理することです。すべてのコードを 1 つのファイルに保持する場合は、次のようにします。

var animals = {
    giraffe: function() {
        console.log( "I'm a giraffe" );
    },
    elephant: function() {
        console.log( "I'm an elephant" );
    },
    zebra: function() {
        console.log( "I'm a zebra" );
    }
};

$(function() {
    var animal = location.pathname.split('/').pop();
    if( animal == 'all' ) {
        for( var animal in animals ) {
            animals[animal]();
        }
    }
    else if( animal in animals ) {
        animals[animal]();
    }
    else {
        console.log( "I'm a mystery animal" );
    }
});

このコードを実際にテストするには、Stack Overflow の次のような URL にアクセスし、そのコードを JavaScript コンソールに貼り付けます。

https://stackoverflow.com/animal/giraffe
https://stackoverflow.com/animal/elephant
https://stackoverflow.com/animal/zebra
https://stackoverflow.com/animal/ocelot
https://stackoverflow.コム/動物/すべて

更新: OK、実際の状況はもう少し複雑であるとコメントで説明しました。誰にとっても役立つ場合に備えて、このコードをここに残しますが、あなたの状況では、既に持っているコードで必要なものに近づくかもしれません.

関係のないページにいるときに動物の機能の 1 つが何をするかという問題については、もちろん、それがどのようにコーディングされているかによって異なります。何もせずに成功するか、エラーが発生する可能性がありますよね？

ここでは jQuery コードについて話しているので、ここにいくつかの例を示します。ID で要素を検索し、その要素が存在すると想定するコードがあるとします。

var zebraElement = $('#zebra')[0];
console.log( zebraElement.value );

要素が存在するページで#zebra、このコードはそのvalue属性をログに記録します。(入力要素など、値を持つ要素であると仮定して議論します。)

しかし、#zebraが存在しない場合はzebraElementでundefinedあり、そのアクセスを試みるvalueと失敗し、デバッガーに到達します。

OTOH、次のようにコーディングした場合：

var $zebra = $('#zebra');
console.log( $zebra.val() );

がなくても失敗することはなく、エラーを引き起こすことなく#zebra正常に印刷されます。undefined

同様に、 を使用するコードがある$().each()場合、要素が欠落していても通常は失敗せずに実行されます。コールバック関数が実行されないためです。

$('.animal').each( function( i, e ) {
    console.log( $(e).val() );
});

が含まれる要素がない場合class="animal"、console.log()呼び出しに到達することはありません。したがって、エラーはありません。何もしません。

何をしているかにもよりますが、これは、必要な動作だけを起動するための完全に合理的な方法です。単純に、何もせずに不足している DOM 要素をコードが確実に処理するようにします。

また、より多くの洞察については、必ずニックの回答を読んでください。

bodyそしてもう 1 つ更新があります... コメントで、要素のクラス名をキーオフすると述べました。これを行う良い方法は、上記のコード例に似ています。動物ごとに条件は必要ありません。ループと単一の条件だけです。

var animals = {
    giraffe: function() {
        console.log( "I'm a giraffe" );
    },
    elephant: function() {
        console.log( "I'm an elephant" );
    },
    zebra: function() {
        console.log( "I'm a zebra" );
    }
};

$(function() {
    var $body = $('body');
    for( var animal in animals ) {
        if( $body.hasClass(animal) ) {
            animals[animal]();
        }
    }
});

したがって、たとえば、および関数<body class="giraffe zebra">を呼び出す場合があります。animals.giraffe()animals.zebra()

于 2013-06-11T10:34:28.737 に答える
0

Javascript は、「呼び出されていない」関数を無視します。すなわち。/elephant または /all ページ以外のページでエレファント()を呼び出さないと、決して使用されず、エラーも発生しません。

ただし、ページの読み込みを高速化するために、使用されていないページに関数を表示したくない場合があります。特定のページの JS ファイルを分離するか、PHP などのバックエンド サーバーから特定の JS スクリプトをロードして、必要な機能を判断することを検討してください。

于 2013-06-11T10:13:42.003 に答える