0

Web アプリケーションのマルチページ フロント エンドを構築しています。UI 用の最小限の JavaScript がありますが、バックエンドを処理するための JavaScript が大量にあることはわかっているので、できる限り少なくして制限するように最善を尽くしています。

縮小された js ファイルを 1 つだけ使用しながら、条件付きで JavaScript を同期的に実行したいと考えています。いくつかのグローバル関数がありますが、ほとんどのコードはページ固有です。各ページには、body 要素にページの ID があります。たとえば、about.html には次のコードがあります<html>...<body id="about">...</body></html>。

require.jsやなど、javascript をロードするためのさまざまな非同期メソッドを認識しています$.getScriptが、さまざまな理由から、そのルートを回避しようとしています。私は HTML を前処理しているので、ページごとにスクリプトを分割したくありません (できますが)。これは小さなファイルであり、さまざまな <script>タグをたくさん作成する必要がないためです。私の現在の解決策は、ページごとに必要な JavaScript を条件付きで実行することであり、以下の例のように実行しています。

    $(document).ready(function(){
         //global.js code
        if(document.body.id==='about'){
           // about.js code
        } 
       if(document.body.id==='home'){
           //home.js code
       } 
        // etc.

  });

ビルド プロセス中、すべての js は個別のファイルに保存されるため、ここに表示されているように視覚的に馬鹿げているわけではありませんinclude filename.js。条件の本体内に 1 つしかないためです。

条件は、不要なコードが各ページで実行されるのを防ぎます。しかし、これを行っているうちに、実際にはこの方法で行うメリットがない可能性があることに気付きました。$(window).loadまたは$('body').load イベントが と競合する可能性があることを読みました$(document).readyが、どちらも明らかに遅いです-現状のままですwindow.onload(テスト済み)。それが私の好みの方法だったと思います。私が読んだことは本当ですか？そして/または、とにかく私がやっていることは役に立ちますか?

4

1 に答える 1

1

ページ固有のイベントの場合、要素の参照に body ID を追加するだけではどうですか?

$( '#about .do-something' ).on()...

そして、実際に非イベントベースのコードをページごとに実行している場合

if( $( '#about' ).length ) { // trigger your code here }

どのコードをどこで実行するかについての種類のマニフェストを保持する必要がないことを除いて、ソリューションとあまり似ていません。いずれにせよ、両方のソリューションがキャッシュされます。

于 2014-08-27T23:15:17.300 に答える