requireJs简介
参数配置
requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。
require
define
其中define是用于定义模块，而require是用于载入模块以及载入配置文件。
define([id,deps,] callback); require(deps[,callback]);
加载配置文件
独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式：
<script src=\"js/require.js\"></script> <script src=\"js/app.js\"></script>
另一种方式则是使用 require 提供的 data-main 属性，该属性是直接写在引入require.js的script标签上，在require.js 加载完毕时，会自动去加载配置文件 app.js。
<script data-main=\"js/app\" src=\"js/require.js\"></script>
通过 data-main 去加载入口文件，便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置，相比之下我更加推荐这种方式，因为它更可能的方便快捷。
<script data-main=\"js/app.js\" src=\"js/require.js\"></script>
注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。
常用参数配置
urlArgs
RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例：
javascript:;urlArgs: \”bust=\” + (new Date()).getTime()
在开发中这很有用，但请记得在部署到生成环境之前移除它。
deps
用于声明require.js在加载完成时便会自动加载的模块，值是一个数组，数组元素便是模块名。
config
config属性可以为模块配置额外的参数设定，其使用格式就是以模块名或者模块ID为key，然后具体的参数为value。
shim
shim为那些没有使用define()来声明依赖关系、设置模块的\”浏览器全局变量注入\”型脚本做依赖和导出配置。
require.config({
baseUrl : \"./src\",
paths :{
jquery:\"./lib/jquery.min\",
vue:\"./lib/vue\",
vueResource:\"./lib/vue-resource.min\",
vueX:\"./lib/vuex\",
api :\"./api/index\",
lodash : \"./lib/lodash.min\",
bootstrap : \"./assets/js/bootstrap/js/bootstrap.min\",
ripples : \"./assets/js/bootstrap-material-design/js/ripples.min\",
material:\"./assets/js/bootstrap-material-design/js/material.min\"
},
shim : {
bootstrap : [\'jquery\'],
ripples:[\'jquery\'],
material:[\'jquery\'],
},
packages: [
{
name: \'components\',
location: \'component\',
main: \'components\'
},
{
name : \"vuex\",
location :\"vuex\",
main : \"vuex\"
}
]
});
vue项目
requirejs配置
require.config({
baseUrl : \"./src\",
paths :{
vue:\"./lib/vue\",
vueRouter: \"./lib/vue-router\",
promise: \"./lib/q\",
router: \"./js/router\",
header: \"./js/components/header\"
},
shim : {
vueRouter : [\'vue\']
}
});
router配置
define([\"resolve\"], function(resolve){
return [
{
path: \"/home\",
name: \"home\",
component: resolve(\"../js/xx.js\")
},
{
path: \"/news\",
name: \"news\",
component: resolve(\"../js/xx.js\")
}
];
});
resolve.js
define([\"require\", \"promise\"], function(require, Q){
var resolve = function(dep) {
return function() {
if (!(dep instanceof Array)) {
dep = [dep];
}
var deferred = Q.defer();
require(dep, function(res) {
deferred.resolve(res);
});
return deferred.promise;
};
};
return resolve;
});
index
<body>
<header></header>
<router-view></router-view>
</body>
require([\"vue\", \"vueRouter\", \"router\", \"header\"], function(vue, vueRouter, router, header) {
vue.use(vueRouter);
var routes = new vueRouter({
routes: router
});
new Vue({
router: routes,
data: function(){
return {
aa: true
};
}
}).$mount(\"body\");
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
暂无评论内容