English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

RequireJsの使用方法の詳細

一、なぜRequireJSを使用するのか？

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

上記の複数のjsファイルが読み込まれる際、ブラウザはウェブページのレンダリングを停止します（JSがブラウザのレンダリングをブロックします），ファイルが増えると、ウェブページが応答を失う時間が長くなります；また、各ファイルの依存関係を管理するのが難しいです。

RequireJsの役割：

（1）jsファイルのアシンクリーナーロードを実現し、ウェブページの応答を失うのを避けます；

（2）モジュール間の依存関係を管理し、コードの作成と保守を容易にします。

（3）作用域を定義することで、グローバル名前空間の汚染を避けます。

2. require.jsのロード

1.から公式サイト最新バージョンのrequireをダウンロードし、jsディレクトリに配置し、scriptでページをインポートします：

<script src="js/require.js">

ページのレンダリングをブロックしないように、HTMLの最下部に配置したり以下の方法に変更できます：

<script src="js/require.js" defer async="true" ></script>

async属性はこのファイルが非同期にロードされることを示します（defer属性はIEで互換性があります）。

2.ページのロジックコードをロード：

コードファイルがmain.jsであり、jsディレクトリに置かれている場合、以下の方法でインポートできます：

方法1：

<script　 data-main="js/main" src="js/require.js">

data-main属性はウェブアプリケーションのメインエントリを指定し、このファイルは最初にrequirejsでロードされます。requirejsはデフォルトで依存関係のリソースはすべてjsと仮定するため、main.jsはmainとして短縮できます。

方法2：

require.jsをロードした後、requirejsを通じてconfig設定ファイル（もしあれば）をロードし、最後にメインモジュールをロードします：

require(['configUrl'], function () { //config.jsはrequirejsを通じてロードしなければなりません
 require([moduleAName], function(moduelA) {
 //ロジックコード
 )
});

3. メインモジュールの書き方

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC) {
　　　　// some code here
　　});

require()関数は2つの引数を受け取り、1つ目の引数は現在のモジュールが依存関係を持つモジュールを示す配列です；2つ目の引数はコールバック関数であり、前面に指定されたモジュールがすべてロード成功した後に呼び出されます。ロードされたモジュールはコールバック関数の引数として渡され、コールバック関数内でこれらのモジュール（依存関係のモジュールがreturnする値）を使用できます。

require()は非同期にmoduleA、moduleB、moduleCをロードし、ブラウザは応答を失いません；指定されたコールバック関数は、前面の依存関係のすべてのモジュールがダウンロードされ実行された後にのみ実行されます。

4. モジュールの設定

require.config()メソッドはモジュールのパスを定義し、短いモジュール名の形式で依存関係を定義できます。このメソッドは各メインモジュール（main.js）の前に書けるもので、メインモジュールと一緒に使用されます。

パラメータはオブジェクトであり、そのpaths属性は各モジュールのロードパスを指定します。複数のパスを設定することができます、リモートcdnライブラリが正常に読み込まれなかった場合、ローカルライブラリをロードします。

モジュールの設定を定義しない場合、メインモジュールの依存関係は完全なパスで書かれる必要があります。

各ページで必要に応じてパスを設定：

require.config({  //モジュールの登録設定、後のコードで使用するために
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery"/jquery-1.12.0.min"
  "fixheight": "login"/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...他のコード; 
 fixHeight.init();
});

またはconfig設定を独立したjsファイルとして配置し、次に

require([“configJsUrl”],function(){  //mainファイルでrequireを使用してモジュール設定を非同期にロードする必要があります
 require([‘ModuleName’],function(Name){
 …他のコード
 )
)

各ページにrequireをネストしないように、以下のように使用できます：

まず独立したconfig.jsファイルを作成します：

require.config({ //モジュールの登録設定、後のコードで使用するために
 baseUrl: "/js/app/", //他の依存関係はこの位置に対する相対パスです
 // パス設定
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “モジュール短名”：“baseUrlに対するパスアドレス、モジュールファイルの.jsサフィックスを省略”
 },
 // 非AMDモードで書かれたライブラリは再設定が必要
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（短モジュール名はまだパスを定義する必要があります）: {
  exports: 'Backbone',  　　　　//ライブラリ出力の変数名、外部からこのモジュールを呼び出す時の名前を示す
  deps:['jquery','underscore'] //このモジュールの依存関係
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//jsリソースのパラメータ、バージョン更新キャッシュを制御
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main，则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径，则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档路径的脚本：

•　　　 以 ".js" 结束.

•　　　 以 "/" 开始.

•　　　 包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求，每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求，影响网页的加载速度。因此require.js提供了一个优化工具(r.js)，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数，但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块，必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义，通常返回一个对象，该对象具有供别的模块使用的方法或属性；或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件，允许require.js异步加载txt、css或html等文本资源供js使用，而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
);

注意：

モジュールの依存関係は、[]で導入することも、コールバック関数内でrequire()メソッドを使用して導入することもできます。効果は同じです。なぜなら、defineメソッドはまず正規表現でコールバック関数内のrequireメソッドの依存関係をスキャンし、ダウンロードしてからコールバック関数を実行するからです。ただし、この場合、依存関係のrequire自体を渡さなければなりません。そうしないと、エラーが発生します：

define(function(require){
 var helper=require('helpModuleUrI');//この依存関係も事前にロードされます
 ...
)

同じモジュールを複数回依存関係として参照した場合、そのモジュールは一度だけダウンロードおよび初期化され、その後requireはその参照を保持し、他のモジュールが再度使用するためにその参照を提供します。

requireメソッドの実行とコールバックの実行を区別する：

require('config',callBack1);
require('b',callBack2);
// 二つのrequireメソッドは即座に実行されますが、callBackの実行順序は不確定で、ダウンロードの順序に依存します。
//以下のコードとは異なり、厳密に順序に従って実行されます
require('config',function(){
 require('b',callBack2)
)

これでこの記事のすべての内容が終わります。この記事の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、ナイアラ教程を多くのサポートをお願いします！

声明：この記事の内容はインターネットから取得され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害が疑われる場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。申し訳ありませんが、関連する証拠を提供し、一旦確認が取れた場合は、このサイトは即座に侵害される可能性のあるコンテンツを削除します。）

基礎教程
おすすめ