ダウンロードしてインストールします
プロジェクトでSEAJSを使用するには、必要な準備はすべてSea.jsをダウンロードして、プロジェクトのどこかに置くことだけです。
SEAJSプロジェクトは現在、GitHubでホストされており、ホームページはhttps://github.com/seajs/seajs/にあります。 GitライブラリのビルドディレクトリにSea.js(圧縮)またはSea-Debug.js(非圧縮)をダウンロードできます。
ダウンロードが完了したら、プロジェクトの対応する位置に配置し、ページ上の<script>タグを介して導入すると、Seajsを使用できます。
SEAJS基本開発原則
SEAJの特定の使用について議論する前に、まず、SEAJのモジュール式概念と開発原則を紹介しましょう。
SAIJを使用してJavaScriptを開発することの基本原則は、すべてがモジュールであることです。 Seajsが導入された後、JavaScriptコードを書くことは、SEAJのモジュールの概念を次々と書くことになりました。パブリックとメソッドは、他のモジュールによって呼び出されます。
さらに、各モジュールは、別のJSファイル、つまり1つのモジュールに対応するファイルで定義する必要があります。
以下は、モジュールの書き込みと呼び出しについて説明しています。
モジュールの定義と書き込み
モジュール定義関数が定義します
Seajsでは、「定義」関数を使用してモジュールを定義します。 SEAJSのドキュメントには定義の完全な参照がないため、SEAJSソースコードを読み、定義が3つのパラメーターを受信できることがわかりました。
次のようにコードをコピーします:/**
*モジュールを定義します。
* @param {string =} idモジュールID。
* @param {array。| string =}モジュールの依存関係を示します。
* @param {function()| object}ファクトリーモジュール工場関数。
*/
fn.define = function(id、deps、factory){
//機能コード…
}
上記は、SEAJSソースコードから抜粋しています。ソースコードを読んだ後、定義の異なるパラメーターの数の解析ルールは次のとおりであることがわかりました。
パラメーターが1つしかない場合は、値を工場に割り当てます。
2つのパラメーターがある場合、2つ目は工場に割り当てられます。
3つのパラメーターがある場合、それらはそれぞれID、DEPS、工場に割り当てられます。
ただし、SEAJSの公式の例を含む定義が使用されるほぼすべての場所では、次のコードと同様に、1つの工場関数のみが渡されます。
コードコピーは次のとおりです。
定義(関数(要求、エクスポート、モジュール){
//モジュールのコード...
});
個人的には、SEAJSの公式例の標準に従い、パラメーター定義でモジュールを定義することをお勧めします。では、IDとDEPSで何が行われますか?
IDは、モジュールの識別文字列に1つのパラメーターのみを持っている場合、IDはデフォルトでこのJSファイルの絶対パスに割り当てられます。 example.comのA.JSファイルのモジュールを定義する場合、このモジュールのIDはhttp://example.com/a.jsに割り当てられます。 ID。 DEPSは一般に渡す必要はなく、必要なモジュールには必要に応じてロードできます。
工場機能ファクトリー分析
工場の関数は、モジュールの本体であり焦点です。定義するために1つのパラメーターのみが渡される場合、このパラメーターはこの時点で、工場関数の3つのパラメーターが次のとおりです。
1.従属モジュールを記録するために使用されるレクイアモジュール負荷関数。
2.Exports-Interfaceポイントは、データまたはメソッドを定義する場合、外部呼び出しに公開します。
3.モジュール - モジュールのメタデータ。
これらの3つのパラメーターは、仕様を表示するために必要に応じて選択できます。
以下のモジュールについて話しましょう。モジュールは、次のように、モジュールのメタ情報を保存するオブジェクトです。
1.module.id-モジュールID。
2.module.dependencies - このモジュールが依存するすべてのモジュールのIDリストを保存する配列。
3.module.exports-エクスポートと同じオブジェクトにポイント。
モジュールを作成するための3つのモード
モジュールを定義する最初のモードは、エクスポートベースのモードです。
コードコピーは次のとおりです。
定義(関数(要求、エクスポート、モジュール){
var a = require( 'a');
var b = require( 'b');
var data1 = 1; //
var func1 = function(){// private method
a.run(data1)を返します。
}
exports.data2 = 2;
exports.func2 = function(){// public method
「こんにちは」を返します。
}
});
上記は、比較的「本物の」モジュール定義モデルです。パブリックデータとエクスポート方法を追加することに加えて、上記のコードと同じ関数があるなど、モジュールを表すオブジェクトを直接返すこともできます。
次のようにコードをコピーします。定義(function(require){
var a = require( 'a');
var b = require( 'b');
var data1 = 1; //
var func1 = function(){// private method
a.run(data1)を返します。
}
戻る {
データ2:2、
func2:function(){
「こんにちは」を返します。
}
};
});
モジュールの定義に他のコードがなく、1つのオブジェクトのみを返す場合、次の単純化された書き込み方法を見つけることができます。
次のようにコードをコピーします:define({
データ:1、
func:function(){
「こんにちは」を返します。
}
});
3番目の方法は、純粋なJSONデータを定義するモジュールに非常に適しています。
モジュールの読み込みと参照
モジュールアドレス指定アルゴリズム
上記のように、モジュールはJSファイルに対応しています。通常、文字列パラメーターを指定するため、文字列の識別からファイルパスへの解析アルゴリズムのセットがあります。実際のモジュールがあります。 SEAJSは次の識別子をサポートします。
絶対アドレス - JSファイルへの絶対パスを与えます。
のように:
コードコピーは次のとおりです。
http://example/js/a.jsのロードを意味します。
相対アドレス - 相対呼び出しを使用してモジュールを見つけて、負荷関数が配置されているJSファイルの相対アドレスを見つけます。
たとえば、http://example/js/b.jsにロードします
コードコピーは次のとおりです。
次に、http://example/js/c.jsをロードします。
ベースアドレス - 荷重文字列識別子が絶対的なパスではなく、「./」で始まる場合、この方法のグローバルな構成の「ベース」についてアドレス指定されます。
上記のモジュールをロードするとき、接尾辞名「.js」とSayjsが自動的に「.js」を追加する必要はないことに注意してください。ただし、次の3つのケースは追加されません。
次のようなCSSをロードするとき:
コードコピーは次のとおりです。
パスに「?」が含まれている場合:
コードコピーは次のとおりです。(<a href = "http://example/js/a.json?cb = func"> http://example/js/a.json?cb = func </a> );
パスが「#」で終わるとき:
コードコピーは次のとおりです。
さまざまなアプリケーションシナリオによると、SEAJはモジュールをロードするために3つのAPIを提供します。つまり、seajs.use、require and require.async、以下に紹介します。
seajs.use
Seajs.Useは、主にエントリモジュールのロードに使用されます。エントリモジュールは、Cプログラムの主な関数と同等であり、モジュール依存性ツリー全体のルートでもあります。上記のTinyAppの小さな例では、initはエントリモジュールです。 Seajs.Useの使用は次のとおりです。
コードコピーは次のとおりです。
//シングルモード
seajs.use( './ a');
//コールバックモード
seajs.use( './ a'、function(a){
a.run();
});
//マルチモジュールモード
seajs.use(['./ a'、 './b']、function(a、b){
a.run();
b.run();
});
一般的に、Seajs.Useは、ページにエントリモジュールをロードするためにのみ使用されます。エントリモジュールが1つしかない場合は、sea.jsを導入するスクリプトタグに「データメイン」属性を追加することで、seajs.useを省略することもできます。次の書き込み方法:
コードコピーは次のとおりです。
<!doctype html>
<html lang = "zh-cn">
<head>
<メタcharset = "utf-8">
<title> tinyApp </title>
</head>
<body>
<p> </p>
<Script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
この書き方は、HTMLをより簡潔にします。
必要とする
必要なのは、1つのモジュールで他のモジュールが必要な場合、通常:
コードコピーは次のとおりです。varm = require( '/path/to/module/file');
SEAJの自動荷重メカニズムの簡単な紹介を次に示します。上記のように、seajsを使用した後、sea.jsを含めるだけです。 SEAJSは最初にエントリモジュールをダウンロードし、次に正規表現を使用してエントリモジュールに沿ったコードのすべての要件を一致させ、要求のファイルパス識別に従って対応するJSファイルをダウンロードし、ダウンロードしたJSファイルを反復します。プロセス全体は、グラフのトラバーサル操作に似ています(クロスサイクルの依存関係がある可能性があるため、依存関係データ構造全体はツリーではなくグラフです)。
上記のポイントを理解したら、次のルールは簡単に理解できます。
要求されるパス識別子は、たとえば式ではなく、文字通りの文字通りでなければなりません。
コードコピーは次のとおりです。
require( 'module'.tolowercase());
これにより、SEAJSは正確な通常の試合を実行して、対応するJSファイルをダウンロードします。
require.async
上記のように、SEAJは、特定のJSファイルを使用している場合にのみダウンロードしたい場合、静的分析を通じてすべての必要なJSファイルを一度に記録します。
コードを次のようにコピーします。require.async( '/path/to/module/file'、function(m){
//コールバックのコード...
});
このようにして、このモジュールを使用する場合にのみ、対応するJSファイルがダウンロードされ、JavaScriptコードのオンデマンドロードが実現されます。
SAIJのグローバル構成
SAIJSは、グローバル構成をセットアップし、グローバル構成を表す構成オブジェクトを受信できるSEAJS.CONFIGメソッドを提供します。特定の使用方法は次のとおりです。
次のようにコードをコピーします:seajs.config({
ベース: 'パス/to/jslib/'、
エイリアス:{
'app': 'path/to/app/'
}、
CHARSET: 'UTF-8'、
タイムアウト:20000、
デバッグ:false
});
ここで、ベースはベースアドレス中のベースアドレスパスを表します。たとえば、ベースはhttp://example.com/js/3-party/に設定されています。
コードコピーは次のとおりです。var$ = require( 'jquery');
http://example.com/js/3-party/jquery.jsはロードされます。
エイリアスは、より長い一般的なパスの略語を設定できます。
Charsetは、JSをダウンロードするときにスクリプトタグのCharSet属性を表します。
タイムアウトは、ミリ秒単位でファイルをダウンロードする最大時間を示します。
デバッグは、デバッグモードで機能するかどうかを示します。
SEAJSが既存のJSライブラリとどのように機能するか
Jquery with Seajsなどの既存のJSライブラリを使用するには、Seajsのモジュール定義ルールに従って既存のライブラリをカプセル化するだけです。たとえば、以下はjQueryのカプセル化方法です。
次のようにコードをコピーします:define(function(){
// {{{{jQuery Original Codeが起動します
/*!
* JQuery JavaScriptライブラリv1.6.1
* http://jquery.com/
*
* Copyright 2011、John Resig
* MITまたはGPLバージョン2ライセンスに基づいてライセンスされています。
* http://jquery.org/license
*
* Sizzle.jsが含まれています
* http://sizzlejs.com/
* Copyright 2011、Dojo Foundation
* MIT、BSD、およびGPLライセンスの下でリリースされました。
*
*日付:5月12日15:04:36 2011 -0400
*/
// ...
//}}} jQuery元のコードが終了します
$ .NOCONFLICT()を返します。
});
SEAJSプロジェクトパッケージと展開
Seajsはもともと、パッケージ化された展開ツールを後で統合しました。 SPMの中心的なアイデアは、すべてのモジュールのコードをマージして圧縮し、SEAJ自体の特性により、開発環境と生産環境の間で簡単に切り替えることができます。 。ただし、SPMは公式バージョン用にリリースされていないため、この記事では、興味のある友人がGitHubプロジェクトのホームページhttps://github.com/seajs/spm/を詳細に紹介することはできません。
実際、各プロジェクトに使用されるJSマージおよび圧縮ツールは異なるため、SPMは各プロジェクトに完全に適していない場合があります。 SEAJの原則を理解した後、プロジェクトの特性に一致するマージとパッケージのスクリプトを書くことができます。