JS模块化工具requirejs教程(二)：基本知识

前一篇：JS模块化工具requirejs教程(一)：初识requirejs私たちは非常に簡単な方法でrequirejsを導入しましたが、この記事ではrequirejsの基本的な知識について、APIの使用方法などを含めて解説します。

基本API

requireはdefine、require、requirejsという3つの変数を定義します。そのうちrequire === requirejsであり、一般的にはrequireを使用する方がより簡潔です。

define 名前からもわかるように、このAPIはモジュールを定義するためのものです。
require 依存モジュールを読み込み、読み込み完了後のコールバック関数を実行します。

前回の記事のa.js：

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

define関数でモジュールを定義し、ページ内で使用します：

require(["js/a"]);

このモジュールを読み込む(require内の依存関係は配列であることに注意してください。たとえ依存が1つだけでも、必ず配列を使って定義しなければなりません。require APIの2番目のパラメータはcallback、つまりfunctionであり、読み込み完了後のロジックを処理するために使われます。例：

require(["js/a"],function(){
    alert("load finished");
})

加载文件

以前の例ではモジュールを読み込む際にすべてローカルJSを使用していましたが、ほとんどの場合、ウェブページで読み込むJSはローカルサーバー、他のウェブサイト、またはCDNから来ることがあります。そのため、この方法では読み込めません。例としてjQueryライブラリを読み込む場合を示します：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

こちらが関わっていますrequire.config，require.configモジュールの読み込み位置を設定するためのもので、簡単に言うとモジュールに対してより短く覚えやすい名前を付けることです。たとえば、百度のjQueryライブラリのアドレスを次のように指定します。jqueryこれにより、require時には単に["jquery"]と書くだけでそのJSを読み込めます。ローカルのJSも同様に設定できます：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

pathsの設定により、モジュール名がより簡潔になります。pathsにはもう1つ重要な機能があり、複数のパスを設定できます。リモートのCDNライブラリが読み込みに失敗した場合に、ローカルのライブラリを読み込むことができます。例：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

このように設定した後、百度のjqueryが正常に読み込まれなかった場合、ローカルのjsディレクトリにあるjqueryが読み込まれます。

requirejsを使用する際、モジュールを読み込むときに.js拡張子付きのものも、もちろん拡張子を書くことはできません。
上記の例のcallback関数の中に$パラメータ、これは依存するものです。jqueryモジュールの出力変数があります。複数のモジュールに依存する場合は、複数のパラメータを順番に書いて使用できます：

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

あるモジュールが変数値を出力しない場合は、その引数はありません。そのため、出力するモジュールをできるだけ前に書き、位置のずれによる誤解を防ぐようにしてください。

全局配置

上記の例では繰り返し出現しています。require.config設定を各ページに毎回記述すると、どうしても見苦しくなります。requirejsは「メインデータ」と呼ばれる機能を提供しています。まずmain.jsを作成します：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

その後、ページ内で以下の方法でrequirejsを使用します：

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

説明すると、requirejsスクリプトを読み込むscriptタグにdata-main属性が追加されています。この属性で指定されたjsは、require.jsを読み込んだ後に処理されます。これをrequire.configの設定を追加するdata-mainにすると、すべてのページでこの設定を使用でき、ページ内で直接requireすべての短いモジュール名をロードするために。

data-mainを使用できます。もう1つの重要な機能として、scriptタグにdata-main属性を指定した場合、requireはデフォルトでdata-mainで指定されたjsをルートパスとみなします。どういう意味でしょうか。上記のdata-main="js/main"設定後、私たちは使用します。require(['jquery'])の後（jqueryのpathsを設定しない場合）、requireは自動的にjs/jquery.jsというファイルを読み込みます。jquery.jsではなく、デフォルトで次のように設定されているのと同じです：

require.config({
    baseUrl : "js"
})

第三方模块

通过require読み込むモジュールは通常AMD規格に準拠する必要があり、つまりdefineを使ってモジュールを宣言します。しかし、非AMD規格のjsを読み込む必要がある場合もあります。そのときに必要なのがもう1つの機能、shimです。shimは説明するのが少し難しいですが、shimを直訳すると「クッション」となり、実際にそのような意味合いがあります。現在、主に2つの場面で使用しています。
1. 非AMDモジュールの出力。非標準のAMDモジュールを「垫（クッション）」して利用可能なモジュールにします。例：古いバージョンのjqueryではAMD規格を継承していないため、直接require["jquery"]とすることはできません。そのような場合にshimが必要です。たとえば、underscoreクラスライブラリを使用したいが、underscoreがAMD規格を実装していない場合、次のように設定できます。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

このように設定すると、他のモジュールでunderscoreモジュールを参照できるようになります：

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

2. プラグイン形式の非AMDモジュール。jqueryプラグインを使用することはよくありますが、これらのプラグインはほとんどAMD規格に準拠していません。たとえばjquery.formプラグインなどです。この場合、formプラグインをjqueryに「垫（クッション）」する必要があります：

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

次のように略記することもできます：

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

このように設定すると、プラグインを読み込んだ後のjqueryを使用できます。

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

さて、requirejsの基本設定はおおよそこのようなものです。さらに拡張機能については、今後の記事で説明します。

文章来源：https://github.com/liuxey/blog/issues/2

JSモジュール化ツールrequirejsチュートリアル(二)：基本知識

分类编程技术

基本API

加载文件

全局配置

第三方模块

JSモジュール化ツールrequirejsチュートリアル(二)：基本知識

分类 编程技术

基本API

加载文件

全局配置

第三方模块

分类编程技术