Modualize

require_once(__ROOT__.'/config.php');

import java.io.InputStreamReader;

import os.path
require("express");

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

PHP

Java

Python

Node JS

JS in Browser... Suck

Problem

1. 全域變數氾濫

​2. 不同頁面共用

3. 前後順序載入 (相依)

4.  Request 過多導致效能問題

 

 

在瀏覽器中模組載入的方式， 遇到其他環境沒有的問題。

必須「下載完」且「相依模組下載完」後才能執行 => 異步載入 (AMD)

 

 

 

History

1. 原始的script tag，有難以維護，依賴模糊，請求過多的問題

2. script loader，如Lab.js，基于文件的依賴管理

3. module loader，YUI [09]

4. CommonJS (前身叫 ServerJS)，node提供的模組化和加載方案，由于是同步/阻塞加載，所以只適合serverside/local [09-10 大牛]

5. AMD/ CMD，異步加載 (require JS 實踐)

6. Browserify/ Webpack，去掉define包裹，打包時解決模組化

7. ES6 原生模組化方案

https://itw01.com/8FOED5A.html

ECMAscript

- 只是個規範，為了推廣，讓個平台自己去實作

- 等不及，社群自幹 ( ES6 )

Bundled Type

esm5

esm2015

umd: 支持AMD/CMJ

fsem2015

loader/bundler

Require JS(loader) 實現AMD

System JS (loader)

gulp (自動化工作)

rollup JS(bundler):  better way to bundle Library (tree shaking 始祖)

Browserify(bundler): 允許CommonJS格式模組在前端使用。因此，它不只是一个模組加載器(loader)，而是模組綑綁器(bundler)。是一个完整的代碼建構工具，提供客戶端能加載一堆代碼功能。

Webpack(bundler):

https://www.zcfy.cc/article/modular-javascript-a-beginners-guide-to-systemjs-amp-jspm

https://www.jdon.com/idea/js/javascript-module-loaders.html

loader/bundler

https://stackoverflow.com/questions/38864933/what-is-difference-between-module-loader-and-module-bundler-in-javascript