原始時代: script標籤引入javascript檔案
-------- html ------- <p id="result"></p> <script type="text/javascript" src="add.js"></script> <script type="text/javascript" src="sum.js"></script> <script type="text/javascript" src="main.js"></script> -------add.js------ function add(a, b){ return a + b ;} ------ sum.js ----- function sum(n){ return n + add(1, 2); } ----- main.js ---- document.getElementById('result').innerHTML = sum(3);
這種方式缺乏依賴解析,全域變數空間污染,而且要保證檔案引入的順序,管理比較混亂
原始時代: 模組物件和IIFE模式
#透過使用模組物件和立即呼叫的函數表達式(IIFE) ,我們可以減少對全域作用域的污染。在這種方法中,我們只向全域作用域公開一個物件。該物件包含了我們在應用程式中需要的所有方法和值。
例如只向全局作用域公开了 App 对象 -------- html ------- <p id="result"></p> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="add.js"></script> <script type="text/javascript" src="sum.js"></script> <script type="text/javascript" src="main.js"></script> ------- app.js ------- var App = {}; ------- add.js ------- (function(){ App.add = function(a, b){ return a + b; } })(); ------- sum.js ------- (function(){ App.sum= function(n){ return App.add(1, 2) + n; } })(); ------- main.js ------- (function(app){ document.getElementById('result').innerHTML = app.sum(3); })(App);
可以看到,除了app.js 以外,其他每個檔案都被封裝成了IIFE 格式
依舊存在缺乏依賴解析的問題,還是有1個全域變量,而不是要幹掉全部的全域變數
過渡時代:CommonJS
CommonJS 不是一個JavaScript 函式庫。它是一個標準化組織。它就像 ECMA 或 W3C 一樣。 ECMA 定義了 JavaScript 的語言規範。 W3C定義了 JavaScript web API ,例如 DOM 或 DOM 事件。 CommonJS 的目標是為 web 伺服器、桌面和命令列應用程式定義一套通用的 API 。
CommonJS 也定義了模組 API 。因為在伺服器應用程式中沒有 HTML 頁面和 </script><script>
標籤,所以為模組提供一些清晰的 API 是很有意義的。模組需要被公開(**export**
)以供其它模組使用,並且可以存取(**import**
)。它的導出模組語法如下:
---------------- add.js -------------------- module.exports = function add(a, b){ return a+b; } ---------------- sum.js -------------------- var add = require('./add'); module.exports = function sum(n){ return add(1, 2) + n; } ---------------- main.js -------------------- var sum = require('./sum'); document.getElementById('result').innerHTML = sum(3);
CommonJs雖然解決的依賴問題,但是CommonJs的問題在於它是同步的,var sum = require('./sum'); 時
sum = require('./sum');时,系统将暂停,直到模块准备(ready)完成,这意味着当所有的模块都加载时,这一行代码将阻塞浏览器进程, 因此,这可能不是为浏览器端应用程序定义模块的最佳方式
非同步模組時代: AMD
define([‘add’, ‘sum’], function(add, sum){ document.getElementById.innerHTML = sum(3); });
define
函數(或關鍵字)將依賴項清單和回呼函數作為參數。回調函數的參數與陣列中的依賴是相同的順序。這相當於導入模組。並且回呼函數傳回一個值,也就是你導出的值。
CommonJS 和 AMD 解決了模組模式中剩下的兩個問題:依賴解析 和 全域作用域污染 。我們只需要處理每個模組或每個檔案的依賴關係就可以了,兵器不再有全域作用域污染。
AMD的良好實作: RequireJS #依賴注入
##RequireJS 是JavaScript 模組載入器(module loader) 。它可以根據需要非同步載入模組,儘管 RequireJS 的名字中含有 require,但是它的目標卻並非要去支援 CommonJS 的 require 語法。使用 RequireJS,可以寫出 AMD 風格的模組。
-------------------- html ---------------------- <p id="result"></p> <!-- 入口文件 --> <script data-main="main" src="require.js"></script> -------------------- main.js ---------------------- define(['sum'], function(sum){ document.getElementById('result').innerHTML = sum(3); }) -------------------- sum.js ---------------------- define(['add'], function(add)){ var sum = function(n){ return add(1,2) + n; } return sum; }) -------------------- add.js ---------------------- // add.js define([], function(){ var add = function(a, b){ return a + b; }; return add; });
瀏覽器載入
index.html,而 index.html 又載入 require.js 。剩下的檔案及其相依性都是由
require.js負責載入。 RequireJS 和 AMD 解決了我們以前遇到的所有問題。然而,它也帶來了一些不那麼嚴重的問題:1.AMD 的語法過於冗餘。因為所有東西都封裝在
define函數中
2.陣列中的依賴列表必須與函數的參數列表相符。如果存在許多依賴項,則很難維護依賴項的順序3.在目前瀏覽器下(HTTP 1.1),載入許多小檔案會降低效能
Browserify
可以在瀏覽器中使用CommonJS 模組,透過 Browserify 遍歷程式碼的依賴樹,並將依賴樹中的所有模組打包成一個檔案。
有別於RequireJS ,Browserify 是命令列工具,需要依賴NPM 環境,npm install -g browserify
---------------- html.js -------------------- ---------------- add.js -------------------- module.exports = function add(a, b){ return a+b; } ---------------- sum.js -------------------- var add = require('./add'); module.exports = function sum(n){ return add(1, 2) + n; } ---------------- main.js -------------------- var sum = require('./sum'); document.getElementById('result').innerHTML = sum(3); 命令: browserify main.js -o bundle.js
困惑的時代: UMD
# UMD 是一套用來辨識目前環境支援的模組風格的if/else 語句// UMD 风格编写的 sum 模块
//sum.umd.js
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['add'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory(require('add'));
} else {
// Browser globals (root is window)
root.sum = factory(root.add);
}
}(this, function (add) {
// private methods
// exposed public methods
return function(n) {
return add(1,2) + n;
}
}));
---------------- main.js --------------- import sum from './sum'; document.getElementById('result').innerHTML = sum(3); ---------------- sum.js --------------- import add from './add'; export default function sum(n){ return add(1, 2) + n; }; ---------------- add.js --------------- export default function add(a, b){ return a + b; };
虽然gulp、grunt都号称是工程化开发工具,,但个人感觉他们处理的东西还是比较基础,对于模块依赖打包来说,支持不是非常好,反正我是不喜欢gulp.
Webpack 是一个 模块打包器,就像 Browserify 一样,它会遍历依赖树,然后将其打包到一到多个文件。
它与Browserify 不同之处就是 可以处理 CommonJS 、 AMD 和 ES6 模块,并且 Webpack 还有更多实用的东西,比如 代码分离、加载器、插件
简洁的时代:Rollup
rollup 只会将需要的函数包含到打包文件中,从而显著减少打包文件大小
--------------- add.js ----------------- let add = (a,b) => a + b; let sub = (a,b) => a - b; export { add, sub }; --------------- sum.js ----------------- import { add } from './add'; export default (n) => {return add(1, 2) + n}; --------------- main.js ---------------- import sum from './sum'; document.getElementById('result').innerHTML = sum(3); 命令: rollup main.js -o bundle.js --------------- boundle.js ---------------- // bundle.js let add = (a,b) => a + b; var sum = (n) => {return add(1, 2) + n}; document.getElementById("answer").innerHTML = sum(3);
发现 add.js的 sub()
函数并没有包含在这个打包文件中,因为没有引用它。
以上是Javascript中關於模組化理解的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!