JSモジュール化のいくつかの規範のまとめ

common JS

特徴:

1、モジュールは複数回ロードできますが、一回目のロード時に一回だけ実行して、その結果はキャッシュされます.後で再読み込みして、直接キャッシュ結果を読み取ります.モジュールを再起動するには、キャッシュをクリアする必要があります.2、モジュールローディングは次のコードの実行をブロックし、モジュールローディングが完了するまで継続することができます.同期ローディング.

環境:サーバ環境

アプリケーション:nodejsのモジュール仕様は、common JSを参照して実現される.

文法:

1、導入:require('パス')2、導出:module.exportとexports

注意:module.exportsとexportsの違いはexportsがmodule.exportsに対する引用の一つであり、Nodeがモジュールごとにexport変数を提供し、module.exportsを指すことに相当する.これは各モジュールのヘッドに相当し、var export=module.exportがあります.このような命令です

demo

// a.js
//          ：var exports = module.exports;  
exports.a = 'Hello world'; //    ：module.exports.a = 'Hello world';
// b.js
var moduleA = require('./a.js');
console.log(moduleA.a); //    hello world

AMD

特徴:

1、非同期ローディング2、管理モジュール間の依存性は、コードの作成とメンテナンスに便利である.

環境:ブラウザ環境

アプリケーション:requireJSは、AMD仕様を参照して実現された

である.

文法:

1、導入:require(''モジュール名')、function('モジュール変数参照'){/コード};3、エクスポート:define(function(){return');

demo

// a.js
define(function (){
return {
a:'hello world'
}
});
// b.js
require(['./a.js'], function (moduleA){
console.log(moduleA.a); //    ：hello world
});

CMD

特徴

1、CMDはAMDに基づいて改善された仕様であり、AMDとは依存モジュールの実行タイミング処理が異なり、CMDは近距離依存であり、AMDは前置依存である.

環境:ブラウザ環境

アプリケーション:seajsはUMD仕様を参照して実装され、requireJSの最新バージョンも一部UMD仕様の実装

を参照しています.

文法:

1、導入:define(function);2、導出:define(function(){return');

demo

// a.js
define(function (require, exports, module){
exports.a = 'hello world';
});
// b.js
define(function (require, exports, module){
var moduleA = require('./a.js');
console.log(moduleA.a); //    ：hello world
});

UMD

特徴:

1、AMDとcommon JS仕様に対応していると同時に、グローバル参照にも対応している方式

環境:ブラウザまたはサーバ環境

アプリケーション:なし

文法:

1、導入導出規範がなく、次のような一般的な書き方しかない.

一般的な書き方:

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
//AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//Node, CommonJS   
module.exports = factory(require('jquery'));
} else {
//       (root   window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
//  
function myFunc(){};
//      
return myFunc;
}));

ES 6 module

特徴:

1、必要に応じて2、importとexportコマンドをロード(コンパイルする時にロード)するのはモジュールのトップレベルだけで、コードブロックの中(例えば:if文)ではいけません.import()文はコードブロックの中で非同期的な動的な読み込みが可能です.

環境:ブラウザまたはサーバ環境(今後はサポート可能)

アプリケーション:ES 6の最新文法サポート規範

文法:

1、導入:import｛モジュール名A,モジュール名B…｝from'モジュールパス'2、導出:exportとexport default 3、import('モジュールパス').then()方法

注意:exportはオブジェクト形式の導出のみをサポートし、値の導出はサポートされていません.export defaultコマンドは指定モジュールのデフォルト出力に使用され、サポート値のみが導出されます.しかし、一つだけ指定されています.本質的にはdefaultという変数または方法を出力します.

規範:

/*     */
//    
export 1;
//    
var m = 1;
export m;
//    
if (x === 2) {
import MyModual from './myModual';
}
/*       */
//    
export var m = 1;
//    
var m = 1;
export {m};
//    
var n = 1;
export {n as m};
//    
var n = 1;
export default n;
//    
if (true) {
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
}
//    
Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
···
});