requireJS学習ノート

一、よく使う方法と命令

require

defineでは、defineはモジュールを定義するためのものであり、requireはモジュールをロードするためのものであり、設定ファイルをロードするためのものである.ラベルを通して、require.jsファイルを現在のHTMLページに紹介します.bragt;lt;script src=「js/require.js」

二、パラメータ配置はrequireJSの中の一つのファイルは一つのモジュールであり、その表現はkey/valueのキー値でフォーマットし、keyはモジュールの名称(モジュールID)であり、valueはファイル(モジュール)の住所である.
基本パラメータの設定:

//index.html

require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxxx.xxx.com/js/jquery.min',
        'index':'index'
    },
        shim:{

        }
});

require(['index']);

require.co nfigはパラメータを構成するためのコア方法であり、固定フォーマットと属性を持つオブジェクトをパラメータとして受信します.
設定対象であるbaseUrlは、ベースディレクトリを定義し、pathsのモジュールのアドレスと自動的にスティッチングし、このモジュールの実際のアドレスを構成し、設定パラメータがscriptタグでhtmlファイルに埋め込まれている場合、baseUrlのデフォルトのフィンガーパスは、このhtmlファイルのアドレスである.
paths属性の値も対象です.オブジェクトはモジュールkey/value値です.その中でkeyはモジュールの名称とIDで、普通はファイルの名来を使って命名して、valueはモジュールの住所で、requireJSの中で、モジュールがJSファイルな時、省略することができます.jsの拡張子、例えば「index.js」は直接に「index」と書くことができます.また、定義されたモジュールがbaseUrlの値との綴りを必要としない場合は、baseUrlの設定を「/」とhttp:////.jsという形でバイパスすることができます.
shim属性の値は、非標準モジュールの依存性と戻り値を宣言するためのオブジェクトです.いわゆる「非標準モジュール」とは、AMD規格に合わないJSプラグインのことです.

require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index',
        'say':'say',
        'bar':'bar',
        'tools':'tools'
    },
    shim:{
        'tools':{
            deps:['bar'],
            exports:'tool'
        },
        'say':{
            deps:['./a','./b'],
            init:function(){
                return {
                    'sayBye':sayBye,
                    'sayHellow':sayHellow
                }
            }
        }
    }
});

require(['index']);

ここで注意したいのは、ロードされたモジュールファイルがAMD仕様に適合している場合、例えばdefineによって定義される場合、requireのデフォルトの優先度は標準的であり、基準に適合していない場合にのみ、shimで定義されたパラメータが採用されることである.
indexモジュール実行時:

define(['jquery','tool','say'],function($,tool,say){
    tool.drag();
    say.sayHellow();
    say.sayBye();
})

上記の例では、Shimには三つの重要な属性がありますが、それぞれ:

deps:現在の非標準モジュールに依存する他のモジュールを宣言するための値は配列であり、配列要素はモジュールの名前またはIDである.

export:非標準モジュールのグローバル変数または方法を定義するために使用されます.値は普通文字列です.

init:初期、処理、非標準モジュールの大域変数または方法で使用され、非標準モジュールに複数の大域変数および方法が存在する場合、値は関数である.

//  ：
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index'
    }
});
require(['index']);

三、プロファイルの読み込み<script src="js/require.js"></script>四、定義モジュールは私たちがレクリエーションJSを選択してモジュール化して私たちのプロジェクトやページを開発する時、私たちが今後作成したコードや機能を明確に知っておく必要があります.すべて定義されたモジュールに置くべきです.以下はrequireJS定義モジュールの方法フォーマットです.define([id,deps,] callback);

ID:モジュールのID、デフォルトはファイル名で、通常は使用者自身が手動で指定する必要はありません.

deps:現在のモジュールはしたがって依存するモジュール配列であり、配列の各配列要素はモジュール名またはモジュールIDである.

calback:モジュールのコールバック方法は、モジュールの具体的な機能とコードを保存するために使用され、このコールバック関数は、モジュール配列の各配列要素に対応しています.すなわち、各パラメータは、対応するモジュールのリターン値を保存します.

//  
//index.js
define(['jquery','./utils'], function($) {
    $(function() {
        alert($);
    });
});

上記の例から、indexモジュールでは、「jquery」モジュールに依存しており、モジュールのコールバック関数では、jqueryモジュールからの値を、jqueryモジュールに加えて、indexモジュールは、設定ファイルで定義されていないので、ここでは追加経路で個別に導入されている.
モジュールをロードする前に、「モジュール依存」について話します.モジュールとモジュールの間には相互依存関係があるので、モジュールAで使用される関数の一つがモジュールBで定義されているなど、異なるロード順序が決定されます.モジュールA依存モジュールBとも言えます.モジュールAをロードする時の順序もモジュールAであり、モジュールBであることを説明します.requireでは、我々はrequire()方法でモジュールをロードすることができます.使用フォーマットは以下の通りです.require(deps[,callback]);

deps:ロードするモジュール群.

calback:モジュールをロードした後に実行するコールバック方法.

require.config({
        paths:{
                'index':'index'
        }
});
require(['index']);

requireJSはrequire([])方法でモジュールをロードし、モジュールの中のコールバック関数を実行します.その値は配列であり、配列の要素はロードするモジュール名であるモジュールIDです.ここではrequire(''index')方法でindexというモジュールをロードしました.また、このモジュールはjqueryモジュールに依存していますので、引き続きjquerjquerryモジュールをロードします.jqueryモジュールのロードが完了すると、モジュールの最終的なフィードバック方法に自身の方法を伝えます.alertは$パラメータの具体的な内容を出します.
六、モジュールの戻り値requireで定義されたモジュールは、結果としてオブジェクトを返すだけでなく、結果として関数を返します.

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    return sayHellow
});

// index.js
define(function(require,exports,modules){
    var sayHellow = require('utils');
    sayHellow('hellow World');
})

リターンによって複数の結果が返ってくる場合:

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    function sayBye(){
        alert('bye-bye！');
    }

    return {  //return      
        'sayHellow':sayHellow,
        'sayBye':sayBye
    }
});

// index.js
define(function(require,exports,modules){
    var utils = require('utils');
    utils.sayHellow('hellow World');
})

ここで一つの注意点があります.これは非依存性のモジュールです.モジュールのコールバック関数に直接に次の3つのパラメータを加えることができます.

require:モジュールをロードする時に使用します.

export:モジュールの返却値を導出する.

modules:モジュールの関連情報およびパラメータを定義します.

まとめ:1、トップページにrequire.js
2を紹介し、defineを通じて(id、deps、calback);モジュールを定義、

＜ul＞

ID:モジュールのID、デフォルトはファイル名で、通常は使用者自身が手動で指定する必要はありません.つまりIDは管理しなくてもいいです.

です.

deps:現在のモジュールはしたがって依存するモジュール配列であり、配列の各配列要素はモジュール名またはモジュールIDである.

calback:モジュールのコールバック方法は、モジュールの具体的な機能とコードを保存するために使用され、このコールバック関数は、モジュール配列の各配列要素に対応しています.すなわち、各パラメータは、対応するモジュールのリターン値を保存します.

モジュールの戻り値

＜p＞3、モジュールをrequire.co nfigで構成する経路、
4、require(deps[、calback]);モジュールの導入

＜ul＞

deps:ロードするモジュール群.

calback:モジュールをロードした後に実行するコールバック方法.