requirejs 配制

Posted 2020-08-30 kuku

 

baseUrl: 用来配制动态加载脚本时，脚本文件的起始位置，此属性可以指定值，也可以由 requirejs 自动计算出值：

　　1：不进行任何配制： 假如 a.html 中引用 require.js 文件 <script src="require.js"></script>

　　　　这样在 require([‘util‘],...)  的时候，util.js 的路径就是和 a.html 在同一个目录.

　

　　2：通过 data-main 属性指定主文件：假如 a.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>

　　　　这种情况下，requirejs 会把 "../app/"  作为 baseUrl 属性的值，在 require([‘util‘],...)  的时候，util.js 的路径就是 ../app/util.js 了。

 

　　3：显示指定 baseUrl 属性：假如 /admin/home.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>

　　　　在 main.js 中配制了 baseUrl 的值为 ‘lib‘ 值，在 require([‘util‘],...)  的时候，util.js 的路径就是 lib/util.js, 这是相对于 home.html 文件, 对于网站的绝对地址就是 /admin/lib/util.js 了。

 

　　从上面的三种情况可以看取， requirejs 生成脚本路径的时候，就是把 baseUrl 加上 脚本的路径。

 

paths: 用来配制一些路径的别名，在 require 的时候直接使用别名就可以加载相应的脚本。

　　　　paths 也可以文件夹的别名，如控件全部放在 lib/common/controls/ 目录下面，如果在不取别名的情况下，引用一个控件需要这样 require([‘lib/common/controls/date‘], ...), 如果在 paths 里配制了 ‘controls‘: ‘lib/common/controls‘ 后， 就可以 require([‘controls/date‘], ...) 了。

 

　　　　paths 还有备错配制功能，如 jquery 的库默认从 cdn 上加载，如果 cdn 加载不成功就从本地加载：

　　　　‘jquery‘:[‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min‘, ‘lib/jquery‘]

 

shim: 配制一些未按 AMD 模式定义的库，（在 requirejs 中，模块使用 define 方法定义，define 方法会有一个返回值，这返回值就是模块的对象），如 jquery 的一些插件及以前一些老点的库，都没有按这些方式做，所以需要通过 shim 属性来配制一下：

　　　　shim: {

　　　　　　‘bold‘: [

　　　　　　　　‘deps‘: [‘jquery‘],

　　　　　　　　‘exports‘: ‘jQuery.fn.bold‘

　　　　　　]

　　　　}

 

　　上面的代码中，主要是 exports 属性，这此属性的意思是当文件加载成功后， requirejs 从哪个变量中获取文件中所定义的对象，其实就是一个变量名称，requirejs 通过这个变量名称获取到一个值，并传递到相应的方法。

urlArgs: 用来指定在加载脚本时，附加在脚本 url 地址后面的参数，如 urlArgs: ‘ver=10001‘, 那么在动态加载的所有的脚本文件中，都会加上这个参数。

bundles: 当一个文件中定义了多个模块时，就需要使用此属性来进行相应的配制 bundles: { jsUtil:[‘MathUtil‘, ‘DateUtil‘] }, jsUtil 是文件名称， MathUtil 和 DateUtil 是通过 define 定义的模块名称，这样定义后，就可以使用 require([‘MathUtil‘, ‘DateUtil‘]...) 的方式对模块进行相应的引用。