1. 程式人生 > >JavaScript + HTML AMD(Require.js) 多頁面組織方式

JavaScript + HTML AMD(Require.js) 多頁面組織方式

write return 清空 頁面 下載 con 關於 壓縮 load

例子壓縮包點此下載

RequireJS 是一種 AMD 方式的 JavaScript 模塊管理庫。

關於CommonJS, AMD, CMD自行百度,一般無需深入。

也可以參考這裏

js模塊化編程之徹底弄懂CommonJS和AMD/CMD!

https://www.cnblogs.com/chenguangliang/p/5856701.html

RequireJS 的特點是凡是使用它管理的JavaScript模塊,需要JavaScript模塊修改自己的實現適配RequireJS, 一堆堆的define、require、requirejs語句(煩人)。但如果用 TypeScript 開發再編譯成 JavaScript,無需特別適配(喜人),只需把 tsconfig.json 裏面的 "module" 從 "commonjs" 修改成 "amd" 即可。如果不理解 TypeScript ,無需深究,記住這個知識點就可以。

RequireJS官網

https://requirejs.org/

RequireJS GitHub地址

https://github.com/requirejs/requirejs

國內有一個中文網站

http://www.requirejs.cn/

這裏提供一個完整的RequireJS和JavaScript模塊結合的例子,管中窺豹。

about.html、index.html、main.js、require.js、util.js

=============================================

about.html

------------------------------------------------------------------------------------------------

<a href="index.html">Jump To index.html</a>

=============================================

index.html

------------------------------------------------------------------------------------------------

<html>
<head>
<title>INDEX</title>
</head>
<body>
Hello Index!
<br>
<a href="about.html">Jump To about.html</a>
<br>
<p id=myp></p>
<script data-main="main" src="require.js"></script>
</body>
</html>

=============================================

main.js

------------------------------------------------------------------------------------------------

requirejs(["util"], function(util) {
var c = util.Add(100, 200);
//window.alert(c);
//document.write(c); 這個執行時刻在 window.onload 之後,會清空文檔
document.getElementById("myp").innerText = c + ", " + new Date();
});

=============================================

require.js 這個是官方版本 2.3.6,原版,見壓縮包

=============================================

util.js

------------------------------------------------------------------------------------------------

define(function () {
return {
Add: function (a, b) {
return a + b;
}
};
});

JavaScript + HTML AMD(Require.js) 多頁面組織方式