require js（三）结合director.js text.js做单页面

接上文：require js 结合director.js配置项

目的

因为现在大多的路由、单页面指的是vue-route，ng-route这一套有着自己完善模板渲染体系的框架。而在上文我也说到了因为某些原因用不了框架，而我做的页面又是单页面管理应用，所以我是投机取巧了很多的。比如我第一个项目用的angular1x.0的路由，因为支持纯html模板，二个我就是用了jq的ajax load()方法，不过我总觉得有点问题，虽然在实际项目中没有出过问题。后来了解require js的时候还发现有一个text.js，支持将html渲染成字符串。

目录

这次就不画出那么多了，就多加了一个router文件夹存放html单页面模板

__router
   |__1.html
   |_2.html

其余的跟上文一样，就是多了一个text.js

代码

requirejs.config({
    baseUrl: "js",
    urlArgs: 'ver=' + ver,
    paths: {
        'jquery': ["../../js/jquery-3.3.1.min"],
        'director': ['../../js/director.min'],
        'text': ['../../js/require/text'],
        'html1': ['../router/1.html'],
        'html2': ['../router/2.html']
    },
    shim: {
        director: {
            exports: 'Router'
        }
    }
});
require(['jquery', 'director', 'text!html1', 'text!html2'], function ($, Router, template1, template2) {
    'use strict';
    var author = function () {
        $('#router').html(template1)
    };
    var books = function () {
        $('#router').html(template2)
    };
    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();
});

这样要注意就是引入的html文件要和后面的参数一一对应。