一、传统JS文件加载
传统 JS 代码写在一个文件中,页面通过 script 标签来导入文件。随着网站功能的丰富,JS 文件越来越多,页面就需要依次加载大量的JS 文件

缺点 : JS 文件的编写和维护比较困难
1. 浏览器在加载 JS 文件时会暂停网页渲染, 当加载 JS 文件越多,网页停止响应的时间就会越长
2. JS 文件是按照 script 标签导入顺序来依次加载的, 而 JS 文件之间存在依赖关系, 依赖性大的模块一定要放到后来加载,例如上图中 a.js 在 b.js 前面进行加载的,你若换了位置则会出现错误
二、RequireJS 用法
RequireJS 优势
1. 实现 js 文件的异步加载,避免 js 文件加载时使得页面停止响应
2. 模块化管理和加载,使用程序去调用 js 文件,易于代码维护
3. 声明不同 js 文件的依赖关系
RequireJS 用法
1. html 页面引入require库

src 属性: 填写 require.js 文件的存放目录
2. html 页面使用 require() 加载自己写的 js 文件

require 第一个参数:是一个数组,加载依赖模块,可以加载多个模块。当前加载的是主模块main.js
require 第二个参数: 回调函数,执行代码
require() 先加载 main.js 后,在回调函数中再加载其他的 js文件
3. main.js 文件,配置模块的路径,以及模块依赖关系,来简化模块的调用

baseUrl:模块默认加载路径
paths:自定义模块加载路径
例如 jquery: " /lib /jquery /jquery.min "
定义 jquery,文件的存放路径是 /lib /jquery /jquery.min,其中 jquery.min 只写文件名,不写后缀
在调用模块的时候,直接调用 jquery

shim:定义模块之间的依赖关系
上面的 shim 中 bootstrap 依赖于 jquery,加载顺序是jquery,bootstrap
datatime_zh 依赖于 jquery 和 datatime,加载顺序是 jquery,datatime,datatime_zh

参考链接: http://www.zymseo.com/369.html
网友评论