RequireJS入门之一——实现第一个例子

时间 2019-11-11

标签 requirejs 入门之一实现第一个例子栏目 JavaScript 繁體版

原文原文链接

为何学习RequireJS？jquery

像我这种菜鸟，会提到海量文章里提到的AMD、JS模块化编程、异步... ... 等等git

RequireJS是一个Javascript 文件和模块框架，它能够帮咱们去管理js代码（个人理解）。github

深刻学习，咱们便会被迫接受一系列的名词：data-main、require、define、baseUrl、paths、shims、deps。。。等等；web

总之，不少文章都在向咱们推销一些本身都说不明白的名词和概念。编程

简单点，如今咱们要作一个简单的需求，用RequireJS管理咱们的js代码，还要能使用jquery！api

1.构建一个web工程，跑起来！里面文件如图：框架

这里面有好多坑，因此我把文件都放在文件根目录，先排除掉这些小问题！异步

其中jquery.js和require.js是须要去网站下载的，请自行百度。jsp

2. 在index.jsp中添加script标签模块化

能够在<body>里添加一个标签 <p>RequireJS异步加载测试</p>

3. 补充main.js文件

require.config({
　　paths: {
　　 jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4.跑起来~

你会看到弹出框，页面已经渲染显示了 “RequireJS异步加载测试” 。

小结：

a. RequireJS由James Burke建立，他也是AMD规范的创始人。它是一个工具库，用于客户端的模块管理。

从本例体现出的：1. 弹出alert的时候页面同时也被渲染，体现了异步加载的功能，传统放在head中的写法会形成阻塞，只有点击肯定后才能渲染页面。

　　　　　　2. 页面只须要引入一个require.js，不须要再引入其余繁多复杂的js代码，剩下的工做交给RequireJS框架来作！

b. 学习以前先了解AMD规范，AMD经过define来定义模块，基本模式：define("id",[deps1,deps2,...],callback);

为何本例没有define就能够跑起来？由于jquery提供了对AMD的支持。path对象便是用来引入各类模块的。

普通的js代码能否被RequireJS管理？能够，使用shims来加载这些资源！

c. 总结之后的编码思路：

Xx.jsp Xx.js(同main.js) 经过 require.config 引入各类js模块（资源）；require加载所需模块，并在回调函数中传入对应变量，以方便在其中直接调用各模块中的函数和变量。

d. 本身实现：页面加一个按钮；在main.js中加入juqery的click监听事件，测试是否监听成功！

e. 遗留问题：路径问题，确定不能在根目录，不过这都不是事儿！