require.js入門学習

7634 ワード

モジュール化 amd require.js

require.js紹介
//-----------------------------------------
AMD仕様
最先端の開発はここ1、2年で非常に速く、JavaScriptは主流の開発言語としてかつてないほどの人気を得ています.多くの先端フレームが出現し、これらのフレームワークは先端開発における共通性の問題を解決しようとしているが、実現は違っている.この背景に、CommunJSコミュニティが誕生しました.先端フレームをより成熟させるために、CommunJSは開発者と一緒にコミュニティ内で特定の機能を完成させるための枠組み作りを奨励します.AMD(Aynchronous Module Definition)はその中の一つの規範です.
従来のJavaScriptコードの問題
JavaScriptコードはどのように開発されているかを見てみましょう.「script」タブでJavaScriptファイルをロードし、大域変数で機能コードを区別します.大域変数間の依存関係は明示的なロード順序を指定することによって解決されます.アプリケーションを公開する時はツールでJavaScriptコードをすべて一つのファイルに圧縮します.Webプロジェクトが非常に巨大になり、先端モジュールが非常に多くなると、これらのグローバル変数間の依存関係を手動で管理することが難しくなり、非常に効果的ではない.
AMDの導入
AMDはモジュールの非同期に基づいてJavaScriptコードをロードするメカニズムを提案しています.開発者にJavaScriptコードを一つのモジュールにカプセル化して、グローバルオブジェクトに対する依存性は他のモジュールに対する依存になります.これ以上多くのグローバル変数を表明する必要はありません.遅延と必要に応じてロードすることで、各モジュールの依存関係を解決します.モジュール化されたJavaScriptコードの利点は明らかであり、各機能コンポーネントの松結合性はコードの多重性、メンテナンス性を大幅に向上させることができる.このような非閉塞的かつ急速にJavaScriptコードをローディングし、Webページ上の他のJavaScriptコードに依存しないUI要素を、ピクチャ、CSSおよび他のDOMノードなどのように、先にローディングを完了し、Webページのローディング速度が速く、ユーザーもより良い体験を得ることができます.
CommonJSのAMD仕様では、リスト1に示されているように、一つのグローバルな方法しか定義されていません.明細書1.AMD仕様

define(id?, dependencies?, factory);

この方法はJavaScriptモジュールを定義するために用いられ、開発者はこの方法で一部の機能モジュールをこのdefine方法の中に封入することができる.
idはこのモジュールの識別を表し、オプションのパラメータです.dependenciesは、モジュールに依存する他のすべてのモジュールの識別を表す文字列Arayであり、モジュール依存は、実際に特定のfactory方法を実行する前に解決しなければならず、これらの依存オブジェクトは実行後の戻り値をロードし、デフォルトの順序でfactory方法のパラメータとして使用することができます.dependenciesもオプションのパラメータであり、ユーザーがこのパラメータを提供しない場合、AMDを実現するフレームワークはデフォルト値を「require」、「exports」、「module」と提供しなければならない.factoryはモジュールの変更を実行するための方法であり、前のdependenciesで宣言した他の依存モジュールの戻り値をパラメータとして使用することができ、この方法に戻り値がある場合、モジュールが他のモジュールに依存している場合、戻り値はモジュールの出力である.CommunJSは規範において他の方法を詳細に規定していません.一部の主要なAMDフレームはRequireJS、curl、bdroadなどのようにdefine方法を実現しています.同時に各フレームは自分の補完があり、APIをより実用的にしています.
require.js意味
//-----------------------------------------
モジュール化
実はコンピュータの分野で、モジュール化の概念は40年近く推奨されています.ソフトウェア全体の構造はモジュール化の思想を表しています.つまり、ソフトウェアをいくつかの独立した命名の部品に分けて、各部品を一つのモジュールと呼びます.すべてのモジュールを一緒に組み立てると、問題の解決が得られます.モジュール化はセグメンテーションを根拠としていますが、私たちはソフトウェアを無制限に細分化していくという意味ですか?実际には、分割が细すぎて、モジュールの総数が増えて、モジュールごとのコストは确かに减りましたが、モジュールインターフェースに必要な価格は増加しました.モジュールの合理的な分割を確保するためには、情報の隠蔽、凝集度および結合度を知る必要がある.ここのJavaScriptモジュールは、従来のJavaScriptコードとは異なるところで、グローバル変数にアクセスする必要がないということです.モジュール化された設計は、JavaScriptコードがグローバル変数にアクセスする必要があるとき、これらの「グローバル変数」をパラメータとしてモジュールの実現体に送ることができます.実現において、グローバル変数または函数にアクセスすることは避けられます.大量かつ複雑な名前空間管理を効果的に回避します.Common JSのAMD仕様で説明されているように、JavaScriptモジュールを定義することはdefine法により実現される.
名前空間
Javascriptは生まれつきの欠点で、言語自体が名前空間の概念を統合していないため、変数名、関数名が衝突しやすいです.ここ数年、みんなは各種の方法を考え尽くして、jsに名前空間の概念を添加して、その中の最も熟している道、RequireJSこのようなです.
c萼やjava言語の名前空間について少しずつ知っているなら、RequireJSの使い方と役割はc菗やjava言語の名前空間で類比して説明できます.

using xx=wojilu.Core;
namespace MyApp {
    public class MyClass {
        public void MyTest() {}
    }
}

require.jsの主な機能は、cxiコードの第一行と第二行を実現する機能です.1)使用する名前空間を導入します.2)自分のコードを名前空間に置いて、全体の汚染を避ける.
次に私達はRequireJSの具体的な書き方を見て、独立したwojilu.test 1.jsファイルを新たに作って、次のコードを入力します.

define( ['wojilu.Core'], function(xx) {
    return {
        MyTest : function() {alert( 'wojilu1 module' );}
    };
});

は上のc{コードと比べて、require.jsも同じように二つのことをしました.
1、名前空間を導入し、同時にxxという別名をつけました.
2、自分のすべてのコードをdefineにおいて、グローバル化の汚染衝突を避ける.
つまり、require.jsは名前空間を定義しています.定義する時、ついでに他の名前空間を使用する必要があります.私たちは気づいた.
require.js 名前空間という用語があります.
モジュールここで、
require.js 定義されたモジュール(名前空間)は匿名で、名前が付いていません.これはcxiとは違っています.
require.js実戦
//-----------------------------------------
require.jsを導入する

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

このファイルを読み込むと、ウェブページの応答がなくなるかもしれません.解決方法は二つあります.一つはホームページの下に置いてロードすることです.もう一つは次のように書くことです.

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

async属性は、このファイルは非同期的なロードが必要であり、ウェブページの応答が失われないようにすることを示しています.IEはこの属性をサポートしていません.deferだけをサポートしますので、deferも書き込みます.
このような書き方は簡単ですが、実際には勧められません.普通の書き方は属性を追加します.

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

は、cプログラムのように、常に入り口としてメインメソッドがあります.上記のように、いくつかのことをしました.
1、require-jquery.jsファイルをロードしました.注意して、公式はrequire.jsとjqueryのパッケージバージョンを提供して、推薦します.
2、ロードした後、入口のファイルjs/main.jsをロードします.注意して、main.jsを書き込む時、拡張子の名前は必要ありません.
あなたの他のjsモジュールファイルは全部main.jsに書いて、mail.jsを通してロードできます.
require.js用法(一):define定義モジュール

define( ['wojilu.test1'], function( t1 ) {
    return {
        NewTest : function() { t1.MyTest();}
    };
});

ファイル名(拡張子は不要)により、wojilu.test 1の名前空間を導入し、別名t 1を取ってコードにt 1.MyTest()の方法を使用する.
RequireJSの仕様に従って、すべてのモジュール定義は、return｛｝オブジェクトに置かなければなりません.つまり、あなたのコードは全部リセットの対象に書いてください.これはコードがぶくぶくしてみっともないことを招くことができますか?もちろんできません.再構成してもいいです.たとえばこうします.
defineコード

define(['wojilu.test1'], function (t1) {
    function someFunc1() {
        //       
    }
    function someFunc2() {
        //       
    }
    //    return   ，            ，    js   
    return {
        NewTest: function () {
            t1.MyTest();
        },
        fun1: someFunc1,
        fun2: someFunc2
    };
});

require.js用法(二):requireロードjsファイル
ここで、私たちは二つのキーワードに出会いました.一つはdefineです.モジュール(名前空間)を定義するために使えます.もう一つはrequireで、他のjsを直接ロードすることができます.簡単な使い方を除いて:

<script>
require( ["some" ] );
</script>

以外にも、defineと似たような複雑な使い方があります.

<script> 
require(["aModule", "bModule"], function() { 
    myFunctionA(); //    aModule.js      myFunctionA
    myFunctionB(); //    bModule.js      myFunctionB
}); 
</script>

まとめてみます.defineは自分のモジュールを定義する時に使います.他のjsをロードしてもいいです.requireは単刀直入にロードします.ロード方法です.ロードする時、エイリアスを定義できます.
require.js用法(三):require.co.nfig()モジュールローディング挙動をカスタマイズする.
require.co nfigはメインモジュールの頭に書いてあります.パラメータはオブジェクトです.このオブジェクトのパス属性は各モジュールのロードパスを指定します.

　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

もう一つはベースディレクトリを直接変更することです.

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

あるモジュールが別のホストにある場合、そのURLを直接指定することもできます.

require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
});

require.js用法(四):defineモジュールは関数の個数の問題を返します.
1、defineのreturnは一つの関数しかなく、requireのコールバック関数は直接エイリアスでこの関数名を代替できます.
2、defineのreturnは複数の関数がある場合、requireのコールバック関数は別名ですべての関数を呼び出す必要があります.

require(['selector','book'], function(query,book) {
    var els = query('.wrapper');

    book.fun1();
    book.fun2();
});

ここでquery関数は1の場合、book関数は2の場合です.
require.js用法(五):ロードされているjsファイルはAMD仕様ではありません.
呼び出したjsファイルがdefineで定義されていない場合は、そのグローバル変数や関数をそのまま使用すればいいです.影響はありません.
この時はjsファイルのロード順序を制御しただけです.
一部の資料はネットから来ました.偉大な喜びを分かち合うプログラム猿たちに感謝します.
require.js:http://www.requirejs.org
require.js入門教程:http://www.verydemo.com/demo_c 110_i 2031.
RequireJSを使用してWebアプリケーションの先端を最適化する:http://www.csdn.net/article/2012-09-27/2810404
require.jsリンクのまとめ:http://webeginner.diandian.com/post/2013-12-04/40060318517

jsは配列かどうかを判断する方法です.