关于require.js的简单demo

require.js 的中文官网 http://www.requirejs.cn/home.html

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

requirejs能带来什么好处？

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。简单粗暴的来说：“模块化管理js，防js阻塞！”（可能是说的不对，大概这意思，原谅菜鸟的不严谨 sorry 不要在意太多细节）

下面展示require.js用法demo  各别api参数不详细 请参考官网。

---

demo 目录结构：

目录结构

---

index.htrml文件 （第一步）

 这里首先先引入了require.js 这个你可以去官网下载，加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？如上面的data-main="js/main"设定后，我们在使用require(['jquery'])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js，相当于默认配置了，这里我写的是config,js

---

config.js配置文件（第二步）

config.js 配置文件 是用来配置模块加载位置，简单点说就是给模块起一个更短更好记的名字，first second third jQuery 这都是名字，名字后面就是文件路径了。这样在require时只需要写["first"]  ['second]   ["third"]  ["jQuery"]  就可以加载该js  (请大家尽量规范命名，这是个好习惯，我是个反面教材)；

shim干啥的？？？

  通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim，shim解释起来也比较难理解，shim直接翻译为"垫"，其实也是有这层意思的，目前我主要用在两个地方。 非AMD模块输出，将非标准的AMD模块"垫"成可用的模块，例如：在老版本的jquery中，是没有继承AMD规范的，所以不能直接require["jquery"],这时候就需要shim，比如我要是用underscore类库，但是他并没有实现AMD规范，那我们可以这样配置

这样配置后，我们就可以在其他模块中引用underscore模块：

---

a.js  b.js c.js 分别是我们的其他demo js

a.js b.js c.js

这三个 js 里面分别写了一些方法，define 从名字就可以看出这个api是用来定义一个模块; require ()加载依赖模块，并执行加载完后的回调函数.