RequireJS条目一实现的第一个例子

为什么需要学习？

像我这样的菜鸟会提到AMD，JS模块化编程，异步.等等在无数文章中提到。

RequireJS将允许您以不同于平常的方式编写JavaScript。您将不再使用脚本标签将JS文件引入HTML，也不需要通过脚本标签顺序来管理依赖关系。

Requirejs是一个Javascript文件和模块框架，可以帮助我们管理js代码(我的理解)。

深入学习后，我们将被迫接受一系列名词：data-main、require、define、baseUrl、paths、shims、deps。等待；

总之，很多文章都在向我们推销一些我们无法理解的术语和概念。

简单，现在我们要做一个简单的需求，用RequireJS管理我们的js代码，使用jquery！

1.构建一个web项目并运行！

里面的文件如图所示：

里面有很多漏洞，所以我把所有的文件都放在文件的根目录下，先把这些小问题处理掉！

其中jquery.js和require.js需要从网站下载，请自行百度。

2.在index.jsp添加脚本标签。

您可以在body/p中添加一个标记pRequireJS异步负载测试。

3.补充main.js文件。

require . config({ path : { jquery : ' jquery-2 . 1 . 1 ' } })；需要(['jquery']，函数($) {alert($()。jquery)；});4.快跑~

您将看到一个弹出框，页面已经呈现为显示“RequireJS异步负载测试”。

总结：

A.RequireJS由詹姆斯伯克创建，他也是AMD规范的创始人。这是一个用于客户端模块管理的工具库。

这个例子显示的是：

1.当alert弹出时，页面也同时呈现，体现了异步加载的功能。传统的写在头上会造成堵塞，所以只有点击ok后才能呈现页面。

2.页面只需要引入一个require.js，不需要引入其他复杂的js代码。剩下的工作将由RequireJS框架来完成！

B.学习前了解AMD规范。AMD通过定义来定义模块。基本模式是定义(' id '，[deps1，deps2，]，回调)。

为什么在这个例子中我们可以不用定义就运行？因为jquery提供了对AMD的支持。Path对象用于介绍各种模块。

普通js代码可以用RequireJS管理吗？是的，使用垫片加载这些资源！

C.总结未来的编码思路：

Xx.jsp xx . js(与main.js相同)通过require.config引入了各种js模块(资源)；Require加载所需的模块，并在回调函数中传递相应的变量，以便直接调用每个模块中的函数和变量。

D.自我实现：在页面上增加一个按钮；将juqery的click monitoring事件添加到main.js中，测试监控是否成功！

E.遗留问题：路径问题，绝对不在根目录，但这不是事！

本文是RequireJS实现的第一个例子的完整介绍，希望对大家有所帮助。