Section 9. モジュール

Udemy - JavaScript: The Advanced Concepts

Section 9. Modules

モジュール

依存をインポート
他の場所へのエクスポート
区別も必要ですが、
コミュニケーションのルートも必要です

モジュールのない時代

<script src=... />で複数のファイルをロードします.
全員が1つになった.
すべてグローバル範囲

Module Pattern : IIFE

JSの最初のモジュール(コンセプト)
jQueryはこうです

//IIFE
var myModule = (function(globalVar){
   /*
    * 여기에서는 global변수도 쓸수있고
    * 나만의 변수도 가질수있고
    * return해서 공개할수도있어 <-- export
    */
})(globalVar) <-- import

しかし、依然として1つのグローバル名称空間(汚染される可能性がある)

が使用されている.

依存変数(import)は、このモジュールの前にある必要があります(スクリプト宣言順序に注意してください)

CommonJS

nodejsは導入され、まだ使用されています.
(ブラウザアプリケーションモジュールシステムより先に)
npm : node package manager
ユーザー間でモジュールを簡単に共有
(これもnodejsが有名になった理由です)

var module = require('module1')	<-- import

function foo () {}

module.exports = {	
	foo: foo
};

2)CommonJSはimportを同期してインポートします.
importが終了すると、実際のコードが動作します.
これはブラウザでは適用しにくい(nodejsはサーバのみで負担はありません)

バンドル

browserify script.js > bundle.js運転中にインポートしたものをすべて加算します.
大きなファイルの作成(browserfy、Webパッケージの役割)
ブラウザを使用しても問題は発生しません

AMD

CommonJSと一緒にしようとしたが、合意に至らず誕生した
(これは言語基準がない場合の問題です…)
require.主にjsというモジュールローダライブラリを使用
モジュールはブラウザでもayncとしてロードされます.

define(['module1'], 
    function (module1) {
        
        var a = module.hahah;
        function foo(){};
        
        return {
        	foo: foo,
        }
    }
);

ファイルミラーはありませんが、名前空間ロールはdefineです.

UMD

CommonJSとAMDのモジュール化
if文で両方のどちらが書かれているかをチェックし、対応する方法でロードする程度です.

ES6 Module

JSオリジナルモジュールがついに誕生!import , export , export defaulthtmlにscriptタグを書き込む場合は、<script type='module'>と認識する必要があります.
import、export構文の例
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

リストの読み込み

https://d2.naver.com/helloworld/12864