JavaScript + HTML AMD(Require.js) 多页面组织方式
Posted 我虐TypeScript千百遍
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript + HTML AMD(Require.js) 多页面组织方式相关的知识，希望对你有一定的参考价值。
RequireJS 是一种用于客户端的 AMD 方式的 javascript 模块管理库。
CommonJS, AMD 这俩货可在TypeScript的tsconfig.json中的module项指定，其区别可以简单认为，CommonJS规范一般给服务端用的（也就是Node.js），没有异步装载概念，AMD一般给客户端互联网浏览器用的（Require.js可以支持AMD），有异步转载概念。
CommonJS老家在这里 http://www.commonjs.org/ https://github.com/commonjs/commonjs
AMD老家在这里 https://github.com/amdjs/amdjs-api
也可以参考这里
https://www.cnblogs.com/littlebirdlbw/p/5670633.html
https://www.cnblogs.com/chenguangliang/p/5856701.html
RequireJS 的特点是凡是使用它管理的JavaScript模块，需要JavaScript模块修改自己的实现适配RequireJS, 一堆堆的define、require语句（烦人）。但如果用 TypeScript 开发再编译成 JavaScript，无需特别适配（喜人），只需把 tsconfig.json 里面的 "module" 从 "commonjs" 修改成 "amd" 即可。如果不理解 TypeScript ，无需深究，记住这个知识点就可以。
RequireJS官网
RequireJS GitHub地址
https://github.com/requirejs/requirejs
国内有一个中文网站
这里提供一个完整的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) 多页面组织方式的主要内容，如果未能解决你的问题，请参考以下文章
该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结
该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结