require js（二）结合director.js配置项

接上文：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

---

最后

因为公司不能上传任何东西，所以就看不到动图效果了，大家可以自己去试试的。