headjs を使用して js を管理およびロードし、ウェブサイトの読み込み速度を向上させます

requirejs や seajs などの成熟した JS モジュール ローダーはたくさんありますが、一部の小規模なプロジェクトでは、それらの機能が「強力」すぎる可能性があります。おそらく、単に JS を動的にロードできる機能が必要なだけかもしれません。私たちが書くページには、d5b6e0389f3bda44f254c238064eabb92cacc6d41bbb37262a98f745aa00fbf0 のようなものはあまりありません。前述の 2 つの js ローダーはモジュール性、つまり js ファイルの編成と管理を重視しており、大規模プロジェクトにより適しています。

先ほど言ったように、js ファイル ローダーが必要で、それに js ファイルのアドレスを指定するだけでよいのですか?次にテーマを入力し、headjs を使用します。 headjs は実際には完全なツールセットですが、ここで紹介したいのはその Javascript Loader 機能です。以下はその基本的な使用法です:

head.js("/path/to/file.js");

最も単純な使用法は、js ファイルのアドレスをパラメータとして提供することです。ブロッキングロードはバックグラウンドで実行されますが、いつ使用できるようになるかは誰にもわかりません。

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

最も基本的な使用法では、アドレス パラメーターを提供することに加えて、2 番目のパラメーターとしてコールバック関数も提供します。 js が読み込まれた後、コールバック関数が呼び出されます。コールバック関数には、js に依存するコードを記述できます。

head.js("file1.js", "file2.js", ... "fileN.js");

複数の js ファイル アドレスを指定します。これらの js は並行してロードされますが、次に従って与えられます。パラメータ これらのファイルは順番に実行されます。たとえば、file2.js が file1.js より先にロードされた場合でも、file1.js がロードされて実行されるまで待機します。

head.js("file1.js", "file2.js", function() {
  
});

複数のjsを並行して読み込み、パラメータ順に実行します。すべてのjsの準備ができたら、コールバック関数が実行されます。

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

複数のjsが並行して読み込まれ、最初に読み込んだものが先に実行されます

head.js("file1.js").js("file1.js").js("file3. js ");

先ほどのメソッドのチェーン呼び出しメソッド

この場合、基本的に headjs を使用して js ファイルを読み込むだけで十分で、依存関係も処理できます。 B をインストールし続けて Web サイトを構築し、すべての特殊効果を使用したいと考えて、ここで jquery プラグインを見つけ、そこで別のプラグインを見つけた場合、つまり、複雑な依存関係を持つファイルを大量に作成することになります。どうなるでしょうか?管理？上記の使用法で完全に解決できるので、質問する必要はありますか?でも、考えてみたら、B をインストールしたので、最後までインストールしましょう。人気のあるモジュールでもなんでもないので、モジュール全体をインストールしましょう。ただし、commonJS が言うほど複雑ではありません。つまり、モジュールを定義します。 、そして、このモジュールには、js ファイルは何で構成されているか、それらの間の依存関係は何かなどがあることを規定します。それでは、headjs は MTI プロトコルを使用します。これを変更しても問題ありません。 Diaosi は再び背が高く、金持ちで、ハンサムであるふりをしていますが、実際には変更ですが、いくつかのコードを追加していると言った方が適切で、依存関係の読み込みなどの機能は完全に headjs API を使用して実装されています。

ここでは、headjs に 2 つの新しいメソッドを追加しました。1 つはモジュールを追加するための add(name, file, preload) です。パラメータ name はモジュール名で、file は使用する js ファイルのアドレスです。複数のファイル、依存関係がある場合、ファイルは配列にすることができます。この配列の要素は使用されるファイル アドレスであり、依存関係は配列要素の順序に基づきます。 3 番目のパラメーター preload は、モジュール ファイルをプリロードするかどうかを指定するために使用されます。 false の場合、モジュールが使用されるときにファイルがロードされます。true の場合、使用されるファイルはモジュールの定義時にすぐにロードされます。デフォルトは false です

もう 1 つは use(name,callback) で、このメソッドはモジュールを使用するために使用されます。 name は add() メソッドを使用して定義されたモジュール名で、callback はモジュールがロードされた後に呼び出されるコールバック関数です。

したがって、次のように headjs を使用できます:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

モジュールが多い場合、モジュール定義コードを別のファイルに記述することができ、headjs を導入した後、モジュール定義ファイルがすぐにロードされます。このプロセスは次のように簡単に実装できます:

ed8b59a99a0db1bc5d2a5234e9850a952cacc6d41bbb37262a98f745aa00fbf0

init 属性がないことを確認してください。これを初期化属性と呼びます。 init の値はファイル名を表します。たとえば、上記の init は headjs と同じディレクトリにあるファイル init.js を表します。いわゆる初期化とは、use() を使用する前に init ファイルがロードされている必要があることを意味します。したがって、初期化ファイルにモジュール定義を記述することができます。

0f530e0f6eb29c660353a903d45660892cacc6d41bbb37262a98f745aa00fbf0

ニマ、これはどういう問題ですか? はい、なぜ別の main 属性があるのでしょうか?他の人がこれを持っているのを見たので、私もそれに倣って購入したことは認めます。 main 属性はモジュール名を表します。つまり、head.js および init.js ファイルがロードされた後、main 属性で指定されたモジュールが自動的に実行されます (もちろん、モジュールは最初に init で定義されている必要があります)。したがって、これら 2 つを使用すると、ページ上に 1 つの js コードがなくても (headjs を導入するタグを除く) 非常に複雑なコードを実行できます。

もう 1 つ説明しなければならない点があります。それは、モジュール ファイルの保存場所です。モジュール ファイルは、head.add('a','a.js') のように、head.js と同じディレクトリに保存する必要があります。ここでの a.js のパスは、head.js と同じです。モジュール ファイルのパスは、head.js が保存されているパスに対する相対パスであり、上方向ではなく下方向のみに移動できます。例:

head.add('a','a/a.js')/ /Correct

head.add('a','../a.js')//エラー、上に配置できません

最後に、圧縮バージョンではない、修正した head.js ソース ファイルを置きます。変更部分についてはコメントあり。

上記がこの記事の全内容です。PHP 中国語 Web サイトもサポートしていただければ幸いです。

headjs を使用して js を管理およびロードし、Web サイトの読み込み速度を向上させる方法の詳細については、PHP 中国語 Web サイトに注目してください。