首先创建app.js
require.config({
paths : {
jquery : './lib/jquery',
//css.js是为了给requireJS导入css文件模块进行转换用的
//注意：导入模块的名字前面要加一个标识例如：$css，不加$的话有可能会有问题
$css : './lib/css',
//text.js是为了给requireJS导入html文件模块进行转换用的
text : './lib/text',
//underscore.js是为了支持backbone.js
underscore : './lib/underscore',
//backbone.js 是一个框架，但我们只用到里面的路由模块功能
backbone : './lib/backbone',
//导入路由模块
router : './router',
//导入百度模板
template : './lib/baiduTemplate'
}
});
require(['jquery', 'backbone', 'router'], function ($, Backbone) {
$(function () {
// console.log(Backbone);
//需要启动一下
Backbone.history.start();
})
});
配置路由router.js
define(['backbone'], function (Backbone) {
//配置路由
var Router = Backbone.Router.extend({
routes: {
//属性是跳转时候的锚点名字
//值是要实现的功能函数
"home": "home",
"*action": "defaultAction"
},
// 首页
home: function() {
require(['./modules/home/home'], function (home) {
home.render();
});
},
defaultAction:function () {
location.hash = "home";
}
//需要实例化一下路由
var router = new Router();
});
index.html
<body>
<!--这个容器是单页应用用来切换不同模块的容器-->
<div id="container"></div>
<footer id="footer">
<ul>
//设置锚点
<li><a href="#home">首页</a></li>
</ul>
</footer>
<script src="../requireJS/lib/require.js" type="text/javascript" charset="utf-8" data-main = "app"></script>
</body>
home目录下的home.js
//导入相应的css和html，需要借用$css和text模块进行转换
//导入html语法格式：text！+路径
//h 导入css语法格式：$css! + 路径
define(['text!./cart.html','$css!./cart.css'],function (html) {
function render () {
$("#container").html(html);
}
return{
render:render
}
});
网友评论