接上文: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
文件要和后面的参数一一对应。