目次
seaJS の概要
seaJSとは何ですか?
requireJS と同様に、seaJS も JavaScript で書かれた JS フレームワークです。その主な機能は、さまざまな依存関係に従って JavaScript やその他のファイルをロードすることです。単純に JS ファイル ローダーとして理解でき、ブラウザに非常に適しています。使用してください。依存する JS ファイルがロードされた後に現在の JS ファイルがロードされるようにすることができます。これにより、多数の JS ファイルを使用するプロジェクト内の各 JS ファイルの順次ロード順序が保証され、特定のファイルが何らかの理由で回避されることが保証されます。読み込みが遅いと、他の高速読み込みファイルがその関数の一部に依存し、関数や変数が見つかりません。これは非常に便利で、seaJS (CMD に準拠) の主要な値でもありますが、それは異なります。 requireJS (AMD 仕様に準拠) とは異なります。
簡単で簡単な知識ポイント
1. seajs.config({...}); //Sea.js の設定に使用されます。
2. seajs.use(['a','b'], function(a,b){...}); //ページに 1 つ以上のモジュールをロードするために使用されます。
3.define(function(require,exports,module){...}); //モジュールの定義に使用されます。Sea.js は 1 つのモジュールと 1 つのファイルを尊重し、統一された記述方法に従います:
4. require(function(require){var a = require("xModule"); ... }); //require は、指定されたモジュールのインターフェース。
5. require.async, //モジュール内の 1 つ以上のモジュールを非同期的にロードするために使用されます。例えば：
define(function(require){
require.async(['aModule','bModule'],function(a,b){ // 异步加载多个模块，在加载完成时，执行回调
a.func();
b.func();
})
});6.exports, //モジュール内に外部インターフェイスを提供するために使用されます。例えば：
define(function(require, exports){
exports.varName01 = 'varValue'; // 对外提供 varName01 属性
exports.funName01 = function(p1,p2){ // 对外提供 funName01 方法
....
}
});7. module.exports は、exports と同様に、モジュール内に外部インターフェイスを提供するために使用されます。例えば：
define(function(require, exports, module) {
module.exports = { // 对外提供接口
name: 'a',
doSomething: function() {...};
};
});Seajsの使用
使用
seajs.use は、ページにモジュールをロードするために使用されます。use メソッドを通じて、任意のモジュールをページにロードできます。
<script src="path/to/sea.js"></script>
<script>
seajs.use('./main');
</script>構文: seajs.use(id, callback?)
// モジュール main をロードし、ロードが完了したら、指定されたコールバックを実行します
seajs.use('./main', function(main) {
main.init();
});use メソッドでは、複数のモジュールを一度にロードすることもできます。
// モジュール a とモジュール b を同時にロードし、両方がロードされたときに指定されたコールバックを実行します
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});コールバックパラメータはオプションです。モジュールが 1 つだけロードされ、コールバックが必要ない場合は、data-main 属性を使用して簡素化できます。
<script src=”path/to/sea.js” data-main=”./main”></script>に相当
<script src="path/to/sea.js"></script>
<script>
seajs.use('./main');
</script>