ホームページ > 記事 > ウェブフロントエンド > requireJS 使用ガイド_その他

requireJS 使用ガイド_その他

WBOYオリジナル: 2016-05-16 15:03:361305ブラウズ

ほとんどのプロジェクトではモジュール開発が使用されており、requireJS は AMD モジュール開発のモデルであるため、学習する必要があります。 requireJS を使用してデモを段階的に作成することで、requireJS の全体的な開発プロセスと、requireJS の使用に関する自分自身の感想を学ぶことができます。

AMD: JavaScript コードを非同期にロードするためのモジュールベースのメカニズム。グローバルオブジェクトへの依存関係を他のモジュールにカプセル化することを開発者に推奨します。多くのグローバル変数を宣言する必要はありません。遅延ロードおよびオンデマンドロードを通じて、個々のモジュールの依存関係を解決します。モジュール化された JavaScript コードの利点は明らかです。各機能コンポーネントの疎結合により、コードの再利用性と保守性が大幅に向上します。この JavaScript コードのノンブロッキングかつ同時かつ高速な読み込みにより、JavaScript コードに依存しない Web ページ上の他の UI 要素 (画像、CSS、その他の DOM ノードなど) が最初に読み込まれるようになり、Web ページの読み込みが速くなり、ユーザーは高速に読み込むことができます。良い結果が得られます。

1. requireJS をダウンロードします

requireJS を使用したモジュール開発の前に、いくつか準備する必要があります。次に、require.js ファイルをダウンロードする必要があります。ははは、このファイルはそれに基づいて開発されているためです。

2. HTML ファイルを作成します

HTML ファイルを作成した後、requireJS をインポートするときに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用する必要があります。これについては間違いありません。そして、このタグにはdata-main属性があり、これが入り口と出口として機能します。つまり、requireJSを読み込んだ後、data-main属性から入ります。

例:

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

js/require.jsをロードしたら、js/mainのjsファイルを実行します。 main も js ファイルです。その .js 接尾辞を省略すると、requireJS によって追加されます。

3. データメイン

プログラムが e4e68973213230bde45ab37f3eb5d0cc2cacc6d41bbb37262a98f745aa00fbf0 を実行するとき、 data-main を通じて main.js に入り、 main.js を実行します。では、main.js には何が含まれているのでしょうか?

コードを参照してください:

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

上記のコードから、main.js に require.config と require の 2 つのモジュールが含まれていることがわかります。

require.config の機能は、requireJS のいくつかのパラメータを設定し、それらをパブリックに参照することです。

たとえば、上記のbaseUrlの機能は、それをベースパスとして使用し、このパスの下にあるファイルを検索することです。すべての .js ファイルを js フォルダーに置きます。したがって、この属性を構成すると、今後のファイルは js パスの下でコンテンツを検索します。

次のように:

require(['monkey'], function(monkey){
  monkey.init();
});

猿を指す場合は、js/monkey ではなく、monkey を指します。

パスの役割は何ですか?よく使用されるいくつかの js ファイルを一般的な名前に置き換えるだけです。たとえば、jquery-1.8.2.min.js は、呼び出すたびにこれを記述することはできません。便宜上、jquery-1.8.2.min.js を今後は jquery に置き換えて使用できます。 jquery を直接実行すると、高速で便利です。

はい、require.config は見慣れたものです。一言で言えば、その機能は requireJS を設定することです。

require についてはどうですか?

require の機能は実行です。たとえば、ここでは、monkey.js だけを実行する必要があるため、monkey をインポートし、mk パラメーターを使用して、monkey 実行後の戻り値を取得しています。戻り値がある場合は、それに応じて mk を処理できます。

ねえ、猿の中には何が入ってるの？

見てみましょう:

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

定義してください!その機能は、他のモジュールまたは require で使用するための js モジュールを定義することです。他のjsモジュールを参照する方法はrequireと同様で、必要なjsファイルをインポートし、パラメータを1対1に対応させます。誰もが注意する必要があるのは、define で定義されたメソッドや変数には他のモジュールからアクセスできないということです。そのため、他のモジュールにアクセスさせたい場合は、対応するメソッドを object または function にスローするだけです。ここで、私が返すのは、他のモジュールを呼び出すための init を提供するオブジェクトです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS コンポーネントブートストラップはポップアップボックス効果コードを実装します_javascript スキル次の記事：JS コンポーネントブートストラップはポップアップボックス効果コードを実装します_javascript スキル

続きを見る

requireJS 使用ガイド_その他

関連記事