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

例子压缩包点此下载

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;
}
};
});

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

时间: 2024-10-09 08:11:10

JavaScript + HTML AMD(Require.js) 多页面组织方式的相关文章

JavaScript模块化-require.js,r.js和打包发布

在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发布,性能优化,工程化管理都有密切的关系,这么重要的事情,在JavaScript大行其道的今天,不可能没有成熟的解决方案,所以从我的实践经验出发,从模块化讲到工程化,分享一下自己的经验. 这篇文章主要是讲require.js和r.js在项目中的使用,不会涉及到工程化问题,对此熟悉的看官可以略过此文.对

Javascript模块化编程-require.js

很多情况下,JS都是放到一个或者多个文件里,只要加载这些文件就可以了. 但是对于一些小型项目而言,这种写法是没有任何问题的. 但是对于某些大型网站,JS的量是很大的,如果还采用这种方式,网站时常在加载时,出现假死的现象. 为了解决这个问题,require.js应运而生. 1.require.js的核心 1.实现js文件异步加载,避免网站失去响应. 2.管理模块之间的依赖性,便于代码的编写和维护. 2.require.js的加载 在网页加载require.js时,需要实现如下写法: <script

require.js 最佳实践

require.js(官网:http://www.requirejs.org/)是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJS 参考文章 1. require.js的主要作用是js的工程化,规范化: 1)它是一个js脚本的加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本

如何利用Require.Js管理多页面站点文件(译)

英文版地址 最近使用 Require.Js 的时候我发现它确实是一个改善代码管理的一个好方法.我以前发表Backbone类的文章时曾提到过 Require,但此前,我从未在传统的多页面网站内使用到 Require.在多页面网站里面配置 Require 的过程相当繁琐,所以我想将教程整理出来帮助那些可能会遇到困惑的朋友们. 概述 注意,本文假设你已经熟悉 Require.Js 和基本的配置使用方法,如果不是,建议你先看看官网的手册. 创建一个单页应用 (single-page App) 时,许多人

[转]js模块化——AMD及require.js

由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制,完整描述了模块的定义,依赖关系,引用关系以及加载机制.而AMD规范的作者亲自实现了符合AMD规范的requireJS.本文将详细介绍AMD及requireJS AMD规范 AMD(Asynchronous Module Definition)翻译为异步模块定义.异步强调的是,

Javascript模块化编程(三):require.js的用法

作者: 阮一峰 日期: 2012年11月 7日 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></s

require.js的AMD规范详解

require.js使用简介 在web刚开始发展的蛮荒时代,一个页面中只需要加载一个或少量的js文件,不存在模块,也不存在冲突之类的问题,但随着web项目的发展,它越来越大,js文件动辄几十个,怎么加载就成为了一个问题,要为浏览器的性能考虑,还有各个js文件(模块)的依赖关系.require.js的出现就是为了解决这样的问题. 1.实现js文件的异步加载,避免网页失去响应. 2.管理模块之间的依赖性,便于代码的编写和维护. require.js加载 使用require.js的第一步,是先去官方网

Javascript模块化编程(三):require.js的用法(转)

这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src

advanced JavaScript Skills ——Require.js(二)

咱们在上一篇博客中写道,使用RequireJS的好处,以及一些简单的介绍.还有使用它的好处: 1.防止js加载阻塞页面渲染 2.可以通过程序调用的方式加载js文件.就不用写辣么多的JavaScript的引用了.界面整洁美观了更加.如果你的界面像下面一样,可以考虑一下,使用Require.js模块化加载的方式来改造提高你的前台代码的质量! 今天,咱们来看看RequireJS真正的看家本领.她是如何解决模块之间的依赖性的问题的. 一.RequireJs的加载 使用require.js的第一步,是先去