RequireJS の概要 - 最初の example_javascript スキルの実装

RequireJS を学ぶ理由?

私のような初心者は、大量の記事で言及されている AMD、JS モジュラー プログラミング、非同期などについて言及します

RequireJS を使用すると、通常とは異なる方法で JavaScript を作成できます。 HTML に JS ファイルを導入し、スクリプト タグの順序で依存関係を管理するためにスクリプト タグを使用することはなくなります。

RequireJS は、JS コードの管理に役立つ Javascript ファイルおよびモジュール フレームワークです (私の理解では)。

徹底的に研究すると、data-main、require、define、baseUrl、paths、shims、deps などの一連の名詞を受け入れることを余儀なくされます。 。 。待ってください

要するに、多くの記事が私たちにさえ理解できない用語や概念を売り込んでいるのです。

シンプルにしてください。ここで、簡単な要件を作成し、RequireJS を使用して JS コードを管理し、jquery を使用できるようにする必要があります。

1. Web プロジェクトを構築して実行します。

中のファイルは以下のとおりです:

ここには落とし穴がたくさんあるので、最初にこれらの小さな問題を取り除くために、すべてのファイルをファイルのルート ディレクトリに置きました。

このうち、jquery.js と require.js は Baidu の Web サイトからダウンロードする必要があります。

2.index.jsp にスクリプトタグ

を追加します。

6c04bd5ca3fcae76e30b72ad730ca86de388a4556c0f65e1904146cc1a846beeRequireJS 非同期読み込みテスト94b3e26ee717c64999d7867364b1b4a3

にタグを追加できます。

3. main.js ファイルを補足します

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. 走る~

ポップアップ ボックスが表示され、ページがレンダリングされて「RequireJS Asynchronous Loading Test」と表示されます。

概要:

a. RequireJS は、AMD 仕様の創設者でもある James Burke によって作成されました。クライアント側のモジュール管理のためのツールライブラリです。

この例から:

1. アラートが表示されると、同時にページもレンダリングされます。これは、ヘッド内の従来の書き込み方法では、「OK」をクリックした後にのみページをレンダリングできます。

2. ページには require.js を導入するだけで済み、他の複雑な js コードを導入する必要はありません。残りの作業は RequireJS フレームワークに任せられます。

b. 学習する前に、まず AMD の仕様を理解してください。AMD は、define("id",[deps1,deps2,...],callback);

によってモジュールを定義します。

この例はなぜ定義なしで実行できるのでしょうか? jquery が AMD のサポートを提供しているためです。パス オブジェクトは、さまざまなモジュールを導入するために使用されます。

通常の JS コードは RequireJS で管理できますか?はい、シムを使用してこれらのリソースをロードします。

c. 今後のコーディングのアイデアを要約します:

各モジュールの関数と変数。

d. 自分で実装します: ページにボタンを追加し、juqery のクリック リスニング イベントを main.js に追加し、監視が成功するかどうかをテストします。

e. 残りの問題: パスの問題、絶対にルート ディレクトリに置くことはできませんが、これは問題ではありません。

この記事は、RequireJS を使い始めるための最初の例の全体的な説明です。皆様のお役に立てれば幸いです。