接上文:require简单实用
目录
__js
|__jquery.min.js
|__director.js
|__bootstrap.bundle.min.js
|__test
|__js
|__main.js
|__require.min.js
|__index.html
代码
index.html
<ul>
<li> <a href="#/author">#/author</a>
</li>
<li> <a href="#/books">#/books</a>
</li>
<li> <a href="#/books/view/1">#/books/view/1</a>
</li>
</ul>
<script data-main='js/easy' src="./js/require.min.js"></script>
main.js
requirejs.config({
baseUrl: "js",
urlArgs: 'ver=' +new Date().getTime(),//
paths: {
'jquery': ["../../js/jquery-3.3.1.min"],
'bootstrap': ['../../bootstrap.bundle.min'],
'director': ['../../js/director.min']
},
shim: {
bootstrap: {
deps: ['jquery']//实际没用上,只是让大家看下bootstrap依赖jq加载
},
director: {
exports: 'Router'//因为director不是require写法,所以需要导出配置
}
},
});
require([
'jquery',
'director'
], function ($, Router) {
'use strict';
var author = function () {
console.log('author')
}
var books = function () {
console.log('book')
};
var viewBook = function (bookId) {
console.log("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books': [books, function () {
console.log("An inline route handler.");
}],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
});
baseUrl
:所有模块的查找根路径,当加载纯.js文件(依赖字串以/开头,或者以.js结尾,或者含有协议),不会使用baseUrl
,如未显式设置baseUrl,则默认值是加载require.js
的HTML所处的位置。如果用了data-main
属性,则该路径就变成baseUrl
。
urlArgs
:加载js的版本号,在开发模式下可以这样写,在发版的时候最好定义一个版本号。
path
:映射那些不直接放置于baseUrl
下的模块名。设置path时起始位置是相对于baseUrl
的,除非该path设置以"/"开头或含有URL协议(如http:)。
shim
: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
这里也是顺带学习了一波director.js
最后
因为公司不能上传任何东西,所以就看不到动图效果了,大家可以自己去试试的。