非同期ロードのrequirejs、あなたは持つ価値があります

5505 ワード
requirejs
1、総説:
RequireJSの目的は、従来のラベルとは異なるスクリプトロードステップを使用したコードのモジュール化です.
コードのロードを加速させ、コードを最適化することができますが、主な目的はコードのモジュール化です.
2、jsファイルのロード
RequireJSはbaseUrlに対するアドレスですべてのコードをロードします.ラベルには特殊な属性data-main,requireが含まれています.jsは、スクリプトのロードプロセスを開始するために使用します(data-mainはエントリであり、javaのmainメソッドとして使用したい場合).baseUrlは、一般的にこのプロパティと一致するディレクトリに設定されます.
 <script data-main="scripts/main.js" src="scripts/require.js"></script>

このような設定では、baseUrlはscriptsディレクトリを指します.もちろんbaseUrlは手動で指定できます.つまりrequirejsです.config({})構成で、明示的な構成がない場合、baseUrlはデフォルトでrequirejsを参照するhtmlが存在するディレクトリを指します.
3、例解析、ディレクトリ構造:
  www/
	-index.html
	-js/
	---app/
	------sub.js
	---lib/
	------jquery.js
	------canvas.js
	---app.js

 index.htmlのクリップ
<script data-main="js/app.js" src="js/require.js"></script>

ファイルエントリapp.js 
 requirejs.config({
	baseUrl: 'js/lib', 
	paths: {
		app: '../app'
	}
	});
	// Start the main app logic.
	requirejs(['jquery', 'canvas', 'app/sub'],
	    function   ($, canvas, sub) {
	      //jquery,canvas,sub 资源都已经加载完毕，可以用了。
	}); 
  });

baseUrlはファイルのロードの開始位置ですが、paths構成(pathsはbaseUrlに対するパスであり、ロードされたファイルには.js接尾辞は必要ありません.requirejsのデフォルト依存リソースはjsファイルであり、接尾辞を付けるとエラーがロードされます)です.ここで、「app」で始まるModule ID(baseUrl+paths)の場合、js/appがロードされます.
4、requirejsコア
(1)モジュールの定義
モジュールは、従来のスクリプトファイルとは異なり、グローバルネーム空間の汚染を回避するための役割ドメインを良好に定義します.依存関係を明示的にリストし、依存関係を注入することもできます.
単純なオブジェクトを定義するには、次の手順に従います.
   define({
        name: "hcc0926",
	age: "3"
	});

外部依存なしでメソッドを定義します.
   define(function () {
	return {
		name: "hcc0926",
		age: "3"
	    }
	});

外部依存を含むメソッドを定義します.
まず例を見ると、このモジュールはbbに依存する.jsとaa.js: 
    define(["./aa", "./bb"], function(aa, bb) {
       return {
         name: "hcc0926",
		  age: "3",
         addToCart: function() {
            aa.xxx();
            bb.add();
         }
       }
    });

defineのパラメータの1つは配列であり、依存項目、2番目のパラメータはfunction(すなわちモジュールの定義はメソッド体で定義される)であり、すべての依存項目のロードが完了した後に2番目のパラメータfunctionが実行され、依存関係はパラメータの形でこの関数に注入され、パラメータリストは依存名リストに1つ対応している(名前は一致しない).jsに詳しいなら、functionではオブジェクトを返すだけでなく、メソッドを返すこともできます.つまり、次の形式です.
define(["./aa", "./bb"], function(aa, bb) {
    return function(){
	  return aa.xxx();
	}    
 });

もちろんmodule名を指定できます.
define("moduleId",["aa", "bb"],function(aa, bb) {
     //Define module in here.
});

 
(2)commonJs風にラッピング
CommonJSモジュール形式で記述されたコードがある場合、これらのコードは上記の依存名配列パラメータの形式で再構築するのが難しい場合は、これらの依存を直接ローカル変数に対応させることを考慮することができます.CommonJSの簡単なパッケージを使用して実現できます.
    define(function(require, exports, module) {
        var a = require('a'),
        b = require('b');
        //Return the module value
        return function () {};
     });

あるいは、exportsで本モジュールのインタフェースを外部に露出し、他の場所で呼び出す形式を書くこともできます.
    define(function(require, exports, module) {    
      var a = require('a'),b = require('b');
        exports.add = a.xxx()+b.xxx();
    });

5、その他の注意点
(1)ファイル定義モジュール
(2)define()の相対モジュール名:define()の内部でrequire(./relative/name)などの呼び出しを使用して相対名を正確に解析できるように、「require」自体を依存としてモジュールに注入することを覚えておいてください.
        define(["require", "./relative/name"], function(require) {
	    var mod = require("./relative/name");
	});

このように見ても違和感があり、commonJSのスタイルで次のような形に変えることができます.
        define(function(require) {
	    var mod = require("./relative/name");
	});

(3)モジュールに対するURLアドレスを生成する:参照ファイルのurlを生成したい場合は、以下の形式を使用します.
         define(["require"], function(require) {
	     var cssUrl = require.toUrl("./style.css");
	 });

(4)AMD仕様以外の文書をロードする:
backbone、underscoreについては、すでに他の非AMD仕様の必要性はrequirejsを借りる.config({})のshim:
    requirejs.config({
        baseUrl : {},
        shim: {
            'backbone': {
                deps: ['underscore', 'jquery'], //backbone的依赖库
                exports: 'Backbone' //backbone对外暴露的接口
            },
            'underscore': {
                exports: '_'
            }
	}
	});
   //在其他的文件中就可以通过如下形式访问了，
	define(['backbone'], function (Backbone) {
	  return Backbone.Model.extend({});
	});

shimの使用上の注意点:
1-shim構成はコードの依存関係のみを設定し、shimが指定したモジュールまたは関連するモジュールを実際にロードするには、通常のrequire/define呼び出しが必要です.shim自体がコードのロードをトリガーしないように設定します.
2-shimスクリプトの依存として他のshimモジュールのみを使用してください
3-CDNロードとshim構成を混在させない
(5)map:与えられたモジュール接頭辞に対して、異なるモジュールIDを用いてモジュールをロードする.
        requirejs.config({
		map: {
			'some/newmodule': {
				'foo': 'foo1.2'
			},
			'some/oldmodule': {
				'foo': 'foo1.0'
			}
		}
	});

    (6)requirejs.configのその他の構成:
config:これらの構成はアプリケーションレベルの情報であり、モジュールに下に渡す手段が必要です.
Packages:CommonJSパッケージからモジュールをロードします.「パッケージからモジュールをロードする」を参照してください.
またcontext、xhtml、urlArgs、callbackなどもありますので、参考にしてくださいhttp://requirejs.org/docs/api.html
(7)マルチバージョンサポート、プラグインのロード、国際化コンポーネントの定義
しばらく使用したことがないので、後で検討します.
比較的良いamdチュートリアルを添付します
http://efe.baidu.com/blog/dissecting-amd-what/
Pod拡張と縮小
KUBERNETESサービス健康診断機能整理