前端JS框架系列之requireJS基础学习

1 背景

　　伴随着项目功能的不断扩充，客户体验的不断完善，实现交互逻辑的JS代码变得越来越多。起初，为了管理JS代码，我们把JS从页面中解放出来独立成文件，接着又把相似的交互代码提取到公共的JS页面中。然而这还不够，一个团队在编写JS交互逻辑时，往往会出现"命名冲突"的问题。于是乎，我们想到了闭包，并将每个JS文件都用闭包封装起来，形成一个个独立的作用域，如果有必要，还会返回一个对象接口供外界调用。走到这一步，JS中的命名问题、全局变量问题都可以完美解决，但还存在一个相互依赖的大问题。特别是引入大量JS文件时，经常会因为文件之间的依赖关系而抛错。引入JS框架RequireJS，可以让JS更规范，并解决上述遇到的一系列问题。

2 认识RequireJS

　　RequireJS是一个JavaScript模块加载器，使用RequireJS加载模块化脚本将提高代码的加载速度和质量，RequireJS兼容IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+。

　　RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>的脚本加载步骤。可以用它来1.加速和优化代码，但它的主要目的还是为了2.代码的模块化。它鼓励在使用脚本时用module ID代替URL地址。

　　RequireJS以一个相对于baseUrl的地址来加载所有代码。页面顶层<script>标签含有一个特殊的属性data-main，RequireJS使用它来启动脚本加载过程。

　　baseUrl设置方式：一般1.是与data-main属性相一致的目录，也可2.通过RequireJS config来手动配置，如果没有显示指定data-main或者config，则3.默认baseUrl为包含RequireJS的html文件所在目录。

　　例如：<script data-main="js/main.js" src="lib/require.js"></script>，通过data-main设置了入口，并会加载js目录下module ID为require的脚本，baseUrl则为js目录。

　　RequireJS默认假定所依赖的资源都是js脚本，所以无需在module ID上加.js后缀。可以通过paths config设置一组脚本，可以有助于我们在使用脚本时码更少的字。

　　如果想避开"baseUrl+paths"的解析过程，而是直接加载某一目录下的脚本，则module ID需满足以下规则之一：(1)带.js后缀 (2)以/开头 (3)包含URL协议如:'http:'或'https:'

　　一般来说，最好还是使用baseUrl和"paths" config去设置module ID，它会带来额外带来灵活性：脚本的重命名和重定位。同时，为了避免凌乱的配置，最好不要使用多级嵌套的目录层次结构来组织代码，而是要将所有的脚本都放到baseUrl中，要么分为项目库/第三方库的扁平结构