Mobile Router.js, a lightweight single page bone for mobile web app

M.router.init([
	{
		path: '/',
		cacheTemplate: false, // 针对于当前的route，是否缓存模板
		animation: true, // 针对于当前的route，是否有动画
		aniClass: 'slideup', // 针对于当前的route，动画类型（效果）
		getTemplate: function() {
			return '/index';
		},
		onActive: function() { // 1.5.5+ 当路由被激活时调用，一般此时还没创建 `page-view` 元素
			
		},
		callback: function() { // 页面展示出来之后
			if (this.cached) return;
			// 处理操作...
		},
		onDestroy: function() {
			// 例如，处理一些解绑操作，销毁和DOM关联
		},
		onEnter: function(paramName) { // 1.5.3+ // 页面将要显示的时候

		},
		onLeave: function() { // 1.5.3+ // // 页面将要隐藏的时候

		}
	},
	{ // 支持 redirectTo 语法，可以是直接的 url 还可以是函数 (1.5.5+)
		path: '/redirectTo/:rtPath',
		redirectPushState: false, // 默认 true, 当激活redirectTo的时候是否启用`pushState`
		redirectTo: function(rtPath) {
			console.log('redirectTo', arguments, this);
			return '/' + rtPath;
		}
	},
	{ // support redirectTo , string url or function (1.5.5+)
		// 如果当前的route配置有getTemplate的话，此时会表现的像正常的
		// route一样依旧会创建`page-view`、会调用回调函数们、会做动画等。
		// 当正常行为结束之后（route的callback被调用之后）会触发redirectTo的逻辑
		path: '/contacts',
		getTemplate: contacts.getTemplate,
		onEnter: contacts.onEnter,
		onLeave: contacts.onLeave,
		callback: contacts.controller,
		onDestroy: contacts.onDestroy,

		redirectTo: '/contacts/list',
		redirectPushState: false,

		children: { // Nested routes & views! (1.5.0+)
			viewsSelector: '.content',
			cacheViewsNum: 1,
			routes: [
				{
					// all contacts
					path: '/list',
					getTemplate: list.getTemplate,
					onEnter: list.onEnter,
					onLeave: list.onLeave,
					callback: list.controller,
					onDestroy: list.onDestroy
				}
			]
		}
	},
	{
		path: '/m/:paramName',
		cacheTemplate: false, // 针对于当前的route，是否缓存模板
		getTemplate: function(cb) {
			// 这里模拟异步得到模板内容
			var that = this;
			// that.params 参数信息
			// that.query query信息
			setTimeout(function() {
				cb('/m/' + that.params.paramName);
			}, 200);
		},
		callback: function(paramName) {
			if (this.cached) return;
			// 处理操作...
		},
		onDestroy: function() {
			// 例如，处理一些解绑操作，销毁和DOM关联
		}
	},
	{ // 嵌套！！(1.5.0+)
		path: '/b/:bid',
		getTemplate: function(cb) {
			var path = this.path.substr(1);
			setTimeout(function() {
				var lis = '';
				var t;
				for (var i = 1; i <= 4; i++) {
					t = path + '/s' + i;
					lis += '<li><a href="' + t + '">/' + t + '</a></li>';
					// 或者：（这样的话 不会对地址栏有影响）
					// lis += '<li><a href="#" data-href="' + t + '">/' + t + '</a></li>';
				}
				cb(
					'<ul class="nav">' + lis + '</ul>'
				);
			}, 200);
		},
		callback: function() {
			console.log('callback:/b', this, arguments);
		},
		onDestroy: function() {
			// 当前被销毁时调用
			console.log('destroy:/b', this, arguments);
		},

		children: {
			/* 这些配置项 默认继承自 parent */
			viewsSelector: '',
			viewClass: 'sub-view-b',
			maskClass: 'mask',
			showLoading: true,
			cacheViewsNum: 3,
			cacheTemplate: true,
			animation: true,
			aniClass: 'slide',

			routes: [
				{
					path: '/:subB', // '/b/:bid' + '/:subB'
					/* 这里依旧可以设置 */
					cacheTemplate: false, // 针对于当前的route，是否缓存模板
					animation: true, // 针对于当前的route，是否有动画
					aniClass: 'slideup', // 针对于当前的route，动画类型（效果）
					getTemplate: function(cb) {
						var that = this;
						setTimeout(function() {
							cb('<div>' + that.path + '<p>sub content</p></div>');
						}, 200);
					},
					callback: function() {
						console.log('sub callback b', this, arguments);
					},
					onDestroy: function() {
						console.log('sub destroy b', this, arguments);
					}
				}
			]
			
		}
	}
], {
	/*是否缓存模板*/
	cacheTemplate: true,

	/*views容器选择器 如果为空，或者没有符合元素，那么views的容器元素就为body了*/
	viewsSelector: '',

	/*view的class 默认会有 page-view 的 class 这里配置的是其他增加的 class */
	viewClass: 'page-view2 page-view3',

	/*是否有动画*/
	animation: true,
	/*有动画的话，动画的类型*/
	aniClass: 'slide',

	/*蒙层class 主要是显示loading时的蒙层*/
	maskClass: 'mask',
	/*显示loading*/
	showLoading: true,

	/*缓存view数*/
	cacheViewsNum: 3
});

// 也可以通过这种形式添加
M.router.add('/ddd/{dddID:int}', function(dddID) {
	// 这是 callback 回调
}, {
	cacheTemplate: true,
	getTemplate: function() {
		return '/ddd/' + this.params.dddID;
	},
	onDestroy: function() {
		// destroy
	}
});

/* 监听route change */
/* routeChangeStart 是刚开始的时候被触发，此时还没有调用getTemplate得到模板内容 */
M.router.on('routeChangeStart', function(currentRouteState) {
	
});
/*已经完成动画切换（如有动画效果的话）显示出来之后触发*/
M.router.on('routeChangeEnd', function(currentRouteState) {
	
});

// 开始 监听history
M.history.start({
	// base: '/', // base path
	// enablePushState: true // 启用pushstate
});