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

时间:2021-02-06 08:12:35

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