码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript + HTML AMD(Require.js) 多页面组织方式

时间:2018-12-15 00:56:27      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:hello   .json   语句   conf   element   comm   tle   data-   target   

例子压缩包点此下载

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) 多页面组织方式

标签:hello   .json   语句   conf   element   comm   tle   data-   target   

原文地址:https://www.cnblogs.com/nuets/p/10122282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!