目錄

__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

最後

因為公司不能上傳任何東西，所以就看不到動圖效果了，大家可以自己去試試的。