requirejs

654 阅读1分钟
优点:
①防止js加载阻塞
②可以通过模块间的依赖进行加载,防止产生页面多个引入。
使用准备:
下载require.js,引入到使用的页面
关键字说明:
  • define——define([],function(){})定义一个模块
  • require——引入某个模块 require([数组],function()
  • baseUrl——用于加载模块的根路径。
  • paths——用于映射不存在根路径下面的模块路径。
  • shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。
  • deps——加载依赖关系数组{})
//加载文件
require.config({
baseUrl: '/public/js',
paths:{
"vue":"path",
"jquery": [a,b] //a、b为可选择路径,如果a没有加载到则使用b
}
})
require(["vue","jquery"],function(Vue,$){})
全局配置
当一个系统有多个页面,多个页面都需要用到require.config时,可以使用requirejs提供的“主数据”的功能:
创建一个main.js,配置整个系统完整的模块库,
然后在每个页面上使用如下的方式来使用
<script data-main="js/main" src="js/require"></script>
第三方模块
1、不符合AMD规范的模块,使用shim声明
require.config({
shim:{
"暴露的名字":{
exports: 'path'
}
}
})
2、插件形式的非AMD模块(??)
require.config({
shim:{
"jquery.form":["jquery"]或者
"jquery.form" : { deps : ["jquery"] }
}
})