ダウンロードしてインストールします
プロジェクトで SeaJS を使用するには、sea.js をダウンロードしてプロジェクトのどこかに配置するだけです。
SeaJS プロジェクトは現在 GitHub でホストされており、ホームページは https://github.com/seajs/seajs/ です。 sea.js (圧縮) または sea-debug.js (非圧縮) は、git ライブラリの build ディレクトリからダウンロードできます。
ダウンロード後、プロジェクトの対応する場所に配置し、ページ内の <script> タグを介して導入すると、SeaJS を使用できるようになります。 </p>
<p><strong>SeaJS の基本的な開発原則</strong></p>
<p>SeaJS の具体的な使用法について説明する前に、まず SeaJS のモジュール概念と開発原則を紹介しましょう。 <br>SeaJS を使用して JavaScript を開発する基本原則は、すべてがモジュールであるということです。 SeaJS の導入後、JavaScript コードを記述することは、次々にモジュールを記述することになります。SeaJS のモジュールの概念は、オブジェクト指向のクラスに似ています。モジュールはデータとメソッドを持つことができ、データとメソッドはパブリックまたはプライベートとして定義できます。 . パブリック データとメソッドは他のモジュールから呼び出すことができます。 <br>さらに、各モジュールは個別の js ファイルで定義する必要があります。つまり、1 つのモジュールが 1 つのモジュールに対応します。 <br>モジュールの作成と呼び出しを以下に紹介します。 </p>
<p><strong>モジュールの定義と記述</strong></p>
<p><strong>モジュール定義関数define<br></strong>「define」関数は、SeaJS でモジュールを定義するために使用されます。 SeaJS のドキュメントには定義に関する完全なリファレンスがないため、SeaJS のソース コードを読んだところ、define は 3 つのパラメータを受け取ることができることがわかりました: <br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="61812" class="copybut" id="copybut61812" onclick="doCopy('code61812')"><u>コピー コード</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code61812">/**<br>* モジュールを定義します。<br>* @param {string=} id モジュール ID。<br>* @param {Array.|string=} deps モジュールの依存関係。<br>* @param {function( )|Object} ファクトリー モジュールファクトリー関数。<br>*/<br>fn.define = function(id, deps, Factory) {<br> //関数のコード…<br>} </div>
<p>上記はSeaJSのソースコードから抽出したもので、定義できるパラメータはモジュールID、依存モジュール配列、ファクトリ関数です。ソースコードを読んだ後、さまざまな数のパラメータに対するdefineの解析ルールは次のとおりであることがわかりました: <br>パラメータが1つしかない場合は、それをfactoryに割り当てます。 <br>パラメータが 2 つある場合、2 番目のパラメータは Factory に割り当てられ、最初のパラメータが配列の場合は deps に割り当てられ、それ以外の場合は id に割り当てられます。 <br>パラメータが 3 つある場合は、それぞれ id、deps、factory に割り当てます。 <br>ただし、SeaJS の公式サンプルを含め、define が使用されるほとんどすべての場所では、次のコードのようなファクトリ関数のみが渡されます: <br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="53527" class="copybut" id="copybut53527" onclick="doCopy('code53527')"><u>Copy code</u></a></span> コードは次のとおりです。</div>
<div class="codebody" id="code53527">
<br>define(function(require,exports, module) {<br> //モジュールのコード...<br>});</div>
<p>個人的にはSeaJS公式サンプルの規格に従い、パラメータdefineでモジュールを定義することを推奨します。では、ids と deps はどうなるでしょうか? <br>id はモジュールの識別文字列です。define にパラメータが 1 つしかない場合、デフォルトで id にはこの js ファイルの絶対パスが割り当てられます。定義を使用して example.com の a.js ファイルにモジュールを定義する場合、このモジュールの ID は http://example.com/a.js に割り当てられます。それ以外の場合は、ID を渡さないことをお勧めします。特別な必要があります。通常、deps を渡す必要はありません。使用する必要があるモジュールは、require でロードできます。 </p>
<p><strong>ファクトリー機能ファクトリー分析</strong></p>
<p>ファクトリー関数はモジュールの本体およびフォーカスです。定義にパラメータを 1 つだけ渡す場合 (推奨される記述方法)、このパラメータがファクトリ関数になります。 このとき、ファクトリ関数の 3 つのパラメータは次のとおりです: <br>1.require - 依存モジュールを記録するために使用されるモジュール読み込み関数。 。 <br>2.exports - インターフェイス ポイント。データまたはメソッドを定義すると、インターフェイス ポイントが外部呼び出しに公開されます。 <br>3.module—モジュールのメタデータ。 <br>これら 3 つのパラメータは、必要に応じて表示および指定できます。 <br>モジュールについて話しましょう。 Module は、次のようなモジュールのメタ情報を保存するオブジェクトです: <br>1.module.id - モジュールの ID。 <br>2.module.dependency - このモジュールが依存するすべてのモジュールの ID のリストを格納する配列。 <br>3.module.exports - エクスポートと同じオブジェクトを指します。 </p>
<p><strong>モジュールを作成する 3 つのモード</strong></p>
<p>モジュールを定義する最初のモードはエクスポートに基づいています: <br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="31500" class="copybut" id="copybut31500" onclick="doCopy('code31500')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div>
<div class="codebody" id="code31500">
<br>define(function(require, exports, module) {<br> var a = require('a'); //モジュールを導入します <br> var b = require('b'); // b module<br><br> var data1 = 1; //プライベートデータ<br><br> var func1 = function() { //プライベートメソッド<br> Return a.run(data1);<br> } <br><br>exports.data2 = 2; //パブリックデータ<br><br>exports.func2 = function() { //パブリックメソッド<br> return 'hello';<br> }<br>} );<br>
</div>
<p>上記は比較的「本格的な」モジュール定義パターンです。パブリック データとメソッドをエクスポートに添付するだけでなく、オブジェクト表現モジュールを直接返すこともできます。たとえば、次のコードは上記のコードと同じ機能を持ちます: <br></p>
<div class="codetitle"><span><a style="CURSOR: pointer" data="71021" class="copybut" id="copybut71021" onclick="doCopy('code71021')">コードをコピー<u></u></a> コードは次のとおりです:</span></div>define(function(require) {<div class="codebody" id="code71021"> var a = require('a'); //モジュールを導入します <br> var b = require(' b'); //b module<br><br> var data1 = 1; //プライベートデータ<br><br> var func1 = function() { //プライベートメソッド<br> return a.run(data1 );<br> }<br><br> return {<br> data2: 2,<br> func2: function() {<br> return 'hello';<br> } <br> };<br> });<br>
</div>
モジュール定義に他のコードがなく、オブジェクトのみを返す場合は、次のように簡略化することもできます: <p><br></p>
<div class="codetitle"><span><a style="CURSOR: pointer" data="52458" class="copybut" id="copybut52458" onclick="doCopy('code52458')">コードをコピー<u></u></a> コードは次のとおりです:</span></div>define({<div class="codebody" id="code52458"> data: 1,<br> func: function() {<br> return 'hello';<br> }<br>}) ;<br>
</div> 3 番目の方法は、純粋な JSON データを定義するモジュールに非常に適しています。 <br>
<p>モジュールのロードと参照<strong></strong>
</p>
<p>モジュール アドレッシング アルゴリズム <strong><br>上で述べたように、モジュールは js ファイルに対応し、モジュールをロードするとき、通常、モジュールが必要であることをロード関数に伝えるために文字列パラメータが提供されます。文字列識別子から実際のモジュールが配置されているファイル パスまでの解析アルゴリズムが必要です。 SeaJS は次の識別子をサポートしています: </strong>絶対アドレス - js ファイルへの絶対パスを指定します。 <br>
</p>例:<p><br></p>
<div class="codetitle"><span><a style="CURSOR: pointer" data="34705" class="copybut" id="copybut34705" onclick="doCopy('code34705')">コードをコピー<u></u></a> コードは次のとおりです:</span></div>require("http:/ /example/js /a");<div class="codebody" id="code34705"></div> は http://example/js/a.js をロードすることを意味します。 <br>相対アドレス - 相対呼び出しを使用して、読み込み関数が配置されている js ファイルの相対アドレスを使用してモジュールを検索します。 <br>たとえば、http://example/js/b.js に <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="61408" class="copybut" id="copybut61408" onclick="doCopy('code61408')"> をロードします。 コードをコピーします。 <u></u></a> コードは次のとおりです。 </span></div>require("./c");<div class="codebody" id="code61408"></div> は http://example/js/c.js を読み込みます。 <br>ベース アドレス - 読み込み文字列識別子が絶対パスでも、「./」で始まらない場合、SeaJS グローバル設定の「ベース」を基準にしてアドレス指定されます。この方法については後で説明します。 <br>上記のモジュールをロードするときにサフィックス「.js」を渡す必要はないことに注意してください。SeaJS は自動的に「.js」を追加します。ただし、次の 3 つの状況では追加されません。 <br>次のような CSS を読み込むとき: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="81298" class="copybut" id="copybut81298" onclick="doCopy('code81298')">コードをコピー<u></u></a>コードは次のとおりです:</span></div>require("./module1-style.css");<div class="codebody" id="code81298"></div>パスに「?」が含まれる場合 (<br><br><div class="codetitle"> など) <span><a style="CURSOR: pointer" data="48186" class="copybut" id="copybut48186" onclick="doCopy('code48186')">コードをコピー<u></u></a> コードは次のとおりです:</span>
</div>require(<a href="http://example/js/a.json?cb =func">http://example /js/a.json?cb=func</a>);<div class="codebody" id="code48186"></div>パスが "#" で終わる場合:<br><br> <div class="codetitle"><span><a style="CURSOR: pointer" data="47522" class="copybut" id="copybut47522" onclick="doCopy('code47522')">コードをコピーします<u></u></a> コードは次のとおりです。</span></div>require("http://example/js/a.json#"); <div class="codebody" id="code47522">
<br>さまざまなアプリケーション シナリオに応じて、SeaJS はモジュールをロードするための 3 つの API、つまり seajs.use、require、require.async を提供します。これらについては以下で紹介します。
<p><strong>seajs.use</strong></p>
<p>seajs.use は主にエントリーモジュールをロードするために使用されます。エントリ モジュールは C プログラムの main 関数に相当し、モジュール依存関係ツリー全体のルートでもあります。上記の TinyApp の例では、init がエントリ モジュールです。 seajs.use の使用法は次のとおりです: <br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="22955" class="copybut" id="copybut22955" onclick="doCopy('code22955')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code22955">
<br>//シングルモード<br>seajs.use('./a');<br><br>//コールバックモード<br>seajs.use('./a', function(a) {<br> a.run();<br>});<br><br>//マルチモジュールモード<br>seajs.use(['./a', './b'], function(a, b ) {<br> a.run ();<br> b.run();<br>});<br>
</div>
<br> 通常、seajs.use はページにエントリ モジュールをロードするためにのみ使用されます。 , SeaJS は、エントリ モジュールに沿ってすべての依存モジュールを解析し、ロードします。エントリーモジュールが1つしかない場合は、sea.jsを導入するスクリプトタグに「data-main」属性を追加することでseajs.useを省略できます。例えば、上記TinyAppのindex.htmlを以下のように変更することもできます。書き込み: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="96656" class="copybut" id="copybut96656" onclick="doCopy('code96656')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code96656">
<br><!DOCTYPE HTML><br><html lang="zh- CN"><br><head><br> <meta charset="UTF-8"><br> <title>TinyApp</title><br></head><br><body><br> <p class="content"></p><br> <script src="./sea.js" data-main= "./init"></script>
