JS | RequireJS 使用

一、传统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