前端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中，要么分为项目库/第三方库的扁平结构