モジュール化の規範と規範化の問題
13171 ワード
モジュール化詳細まとめ
ECMAScript 2015以降、元のjsは
モジュール化の役割は複雑な問題を相対的に独立したモジュールに分解するという設計が可能です. モジュール化の核心 独立モジュールのスコープの一つのファイルはモジュールです.独立したスコープを持っています.そして導き出すモジュールは標準的に
1、ESM
前に書いたブログでモジュールの導入文法について導出する前に、NodejsがまとめたES 6のモジュール化を学びます.
モジュールの導入と導出は、関数の定義と呼び出しと同様であり、異なるところで異なる定義と呼び出しルールがある.
エクスポート:
インポート:2つのモードで外部モジュールデータを導入します.静的導入 動的導入 キーワードimportは、関数を呼び出すように、動的にモジュールを導入することができる.このように呼び出したら、プロミセオブジェクトに戻ります. type="module"のスクリプトタグに依存する必要はありません.
以前のフロントエンドはモジュール化に対して規範がなく、かえってサービスエンドの応用に偏ってより強い需要があり、
モジュール内部データの導出は、
CommunJSはいくつかの特性(ファイルシステムに基づいて、同期ローディング)を規範化しています.前に述べたように、主にサーバー側に適用されています.ブラウザ側には適用されないので、ブラウザ側の規範AMD(Aynchronous Module Definition)を別途定義しています.
ブラウザはこの規格のコードを具体的に実現していないので、第三者のプラグインライブラリを通じて解決します.requireJSプラグインライブラリコードrequire.min.jsをダウンロードします.
define法により、値を返していないモジュールを定義し、この方法のコールバック関数パラメータにより、独立した作用領域パラメータ1を生成する.導入された経路(存在配列において、複数の導入が可能)パラメータ2:コールバック関数、関数内のパラメータは、導入されたデータである.
UMDは汎用モジュール定義仕様(Universal Module Definition)と呼ばれる.厳密には、
ECMAScript 2015以降、元のjsは
ECMAScript Module
と呼ばれるモジュール化概念を発表しました.今主流のブラウザーはすべてとても良い支持があります.モジュール化の役割は複雑な問題を相対的に独立したモジュールに分解するという設計が可能です.
ESM
,
,
の下にあります.以前の記事にはまとめがあります.小さな手で厳密モードと非厳格モードの違いを見てみてください.1、ESM
前に書いたブログでモジュールの導入文法について導出する前に、NodejsがまとめたES 6のモジュール化を学びます.
モジュールの導入と導出は、関数の定義と呼び出しと同様であり、異なるところで異なる定義と呼び出しルールがある.
エクスポート:
文を使ってモジュール内部データをエクスポートします.インポート:2つのモードで外部モジュールデータを導入します.
export
, import ,
//b.js
// b.js
export default " b ";
//a.js
//
// b.js a.js
import b from './b.js';
console.log(b);
//
let b2 = import ("./b.js");
console.log(b2);
// ( )
document.onclick = async function(){
let b3 = await import ("./b.js");
console.log(b3);
// Module {Symbol(Symbol.toStringTag): "Module"}
}
<!-- html -->
<!-- script js , type="module" , , -->
<script src="./js/a.js" type="module"></script>
2、Common JS仕様以前のフロントエンドはモジュール化に対して規範がなく、かえってサービスエンドの応用に偏ってより強い需要があり、
import() , default
規範はサービスエンドのモジュール化規範に偏っています.NodeJSはこの仕様を採用しています.モジュール内部データの導出は、
CommonJS
またはmodule.exports
オブジェクトを介してモジュール内部データを導出する.// a.js
let a = 1;
let b = 2;
//
module.exports = {
x: a,
y: b
}
//
exports.x = a;
exports.y = b;
外部モジュールデータを導入するexports
関数で外部モジュールデータを導入する// b.js
//
let a = require('./a.js');
a.x;
a.y;
3、AMDCommunJSはいくつかの特性(ファイルシステムに基づいて、同期ローディング)を規範化しています.前に述べたように、主にサーバー側に適用されています.ブラウザ側には適用されないので、ブラウザ側の規範AMD(Aynchronous Module Definition)を別途定義しています.
ブラウザはこの規格のコードを具体的に実現していないので、第三者のプラグインライブラリを通じて解決します.requireJSプラグインライブラリコードrequire.min.jsをダウンロードします.
define法により、値を返していないモジュールを定義し、この方法のコールバック関数パラメータにより、独立した作用領域パラメータ1を生成する.導入された経路(存在配列において、複数の導入が可能)パラメータ2:コールバック関数、関数内のパラメータは、導入されたデータである.
// a.js
/*
define , , ( )
1: ( , )
2: ,
*/
//
//
// b.js
// './js/b.js'
define(['./js/b.js'], function (b) {
console.log(b);
});
// b.js
//
// return
// b.js
define(function(){
let val = " AMD ";
return val;
});
<!--test.html -->
<script src="./js/require.min.js" data-main="./js/a.js"></script>
4、UMDUMDは汎用モジュール定義仕様(Universal Module Definition)と呼ばれる.厳密には、
require
はモジュール仕様のセットではなく、UMD
、CommonJS
、AMD
、CMD
の違いを処理するために主に使用され、モジュールコードが異なるモジュール環境下で正常に移動できるようにする.// : ( )( );
//(function(){
//
//})();
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// Node, CommonJS-like
module.exports = factory;
}
else if (typeof define === "function" && define.amd) {
// AMD
define(function () {
return factory;
});
}
else {
window.rmb = factory;
}
})(function (val) {
return "¥" + (val / 100).toFixed(2);
});