mini-define を使用してフロントエンド code_javascript スキルのモジュール管理を実装する

ミニ定義

require に基づくシンプルなフロントエンドのモジュラー フレームワーク。 require.js の学習に時間を費やしたくない、または長い cmd/amd 仕様を読みたくない場合は、このミニ定義が最適です。以前に sea.js または require.js を使用したことがある場合は、mini-define の方が効率的で軽量で使いやすいです。プロジェクトアドレス: github

使用法

最初にモジュールを定義します

モジュールの定義

1: 定義関数を使用してモジュールを定義します

1.1 依存関係があるかどうかに応じて、次の 2 つの状況があります:

1.1.1: 依存関係のないモジュール

コードをコピーします コードは次のとおりです:

define('id',function(){
// ここにコードを入力してください
});

1.1.2: 依存モジュール

コードをコピーします コードは次のとおりです:

define('id',['modeA','modeB'],function(A,B){
// ここにコードを入力してください
});

1.2 処理結果を外部使用のために返す必要があるかどうかに応じて、次の 2 つの状況があります:

1.2.1 には戻りオブジェクトがあります:

コードをコピーします コードは次のとおりです:

define('id',function(){
return {
// ここにコードを入力してください
}
});

1.2.2 オブジェクトが返されません

コードをコピーします コードは次のとおりです:

define('id',function(){
// ここにコードを入力してください
});

2: require() 関数を使用してモジュールを呼び出す

2.1 要求されたモジュールの数に応じて、次の 2 つの状況が考えられます。

2.1.1. 単一モジュールの呼び出し

require('modeId')

2.1.2. 複数のモジュールを呼び出す
require(['modeA','modeB']);
2.2 コールバック処理の有無により、次の 2 つの状況に分けられます。

2.2.1 コールバック処理関数があります

コードをコピーします コードは次のとおりです:

require('modeId',function(mode){
// ここにコードを入力してください
});

require(['modeA','modeB'],function(A,B){
// ここにコードを入力してください
});

2.2.2 コールバック処理なし
require('modeId');
次に、index.html ページで必要なモジュールを順番に参照します

コードをコピー コードは次のとおりです:

<スクリプト src="lib/core/require.js">

<スクリプト src="lib/main.js">
<スクリプト src="lib/config.js">

最後のステップは、好みの方法で lib ディレクトリをマージして圧縮し、min.js ファイルを生成することです。 アプリケーションを公開するときは、対応するindex.htmlも調整する必要があります:

コードをコピーします コードは次のとおりです:

<スクリプト src="lib/min.js">

利点:

seajs.js やオリジナルの require.js と比較すると、約 100 行のアノテーションしかないコードは、軽量と表現するには太くて細く見えます。
高度な内容は一切なく、複雑なスキルも必要なく、学習コストもほぼゼロです。