M — Lightweight single page bone for mobile web App.轻量级移动端单页面骨架

优势：

使用简单、方便、轻量，基于 history、window.onpopstate。
无依赖，可与其他框架（库）搭配自由使用，例如：jquery, zepto, iscroll等。
任意选择字符串式模板引擎，当然最简单的就是自己拼接字符串了；同时支持异步（远程获取模板，或者去请求数据在前端构建模板）；可配置是否缓存结果模板。
考虑后端渲染首屏的情况，只需要按结构输出响应的片段即可，利于SEO，且可以实现前后端模板公用。
自动缓存部分画面，可配置缓存数量，默认3个。
每个路由都有对应的callback和onDestroy配置方法，分别用于显示了对应画面后的回调以及当该画面销毁时回调。
利用CSS animation控制动画变换效果，也可设置关闭动画效果。
“保留”浏览器原生hash功能，根据hash，可自由跳转到对应id元素位置。
可配置enablePushState决定是否使用pushstate功能，默认启用；不启用的话，仅仅影响的是不产生历史，但是路由依旧好使的，也就是还是基于url的。

一些注意点：

不管画面是否已缓存在页面中，只要切换回显示了，那么就会调用callback，而callback中大多数情况需要处理监听事件、操作DOM，这时候可根据this.cached来区分；当没有缓存在页面上时为false，或者缓存在页面上了，但是模板更新了，这时候也为false。
getTemplate配置方法，如果带有参数，那么该参数就是得到模板字符串后的回调函数，一定要回调的；如果没有参数，直接返回模板字符串即可。这样做，主要是为了考虑异步获取（render）模板的场景。
M.history的默认的 base path 是页面中base元素的href的值，如果没有，则默认是/；也可以在M.history.start()时传入。
对于history、window.onpopstate不支持或者支持不够好的浏览器来说，能够正常匹配对应route，也就是说能够正常调用route配置项中的getTemplate以及callback（onDestroy除外），其他功能都没有，点击链接直接刷新页面。这样就可以在不改变代码的情况下，适配了不支持的浏览器。当然这种情况也可以通过取得M.history.support来判断，如果不支持的话，可以在调用M.history.start时设置参数enablePushState为false也可以，但不建议，因为没有历史记录了。

使用方法：

M.router.init([
	{
		path: '/',
		cacheTemplate: false, // 针对于当前的route，是否缓存模板
		getTemplate: function() {
			return '/index';
		},
		callback: function() {
			if (this.cached) return;
			// 处理操作...
		},
		onDestroy: function() {
			// 例如，处理一些解绑操作，销毁和DOM关联
		}
	},
	{
		path: '/c/:paramName',
		cacheTemplate: false, // 针对于当前的route，是否缓存模板
		getTemplate: function(cb) {
			// 这里模拟异步得到模板内容
			var that = this;
			// that.params 参数信息
			// that.query query信息
			setTimeout(function() {
				cb('/c/' + that.params.paramName);
			}, 200);
		},
		callback: function(paramName) {
			if (this.cached) return;
			// 处理操作...
		},
		onDestroy: function() {
			// 例如，处理一些解绑操作，销毁和DOM关联
		}
	}
], {
	/*是否缓存模板*/
	cacheTemplate: true,

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

	/*view的class*/
	viewClass: 'page-view',

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

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

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

// 也可以通过这种形式添加
M.router.get('/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
});

关于配置

aniClass和cacgeTemplate配置，依次取的是链接元素上的data-xxx->单个route规则中对一个的配置项->整体route配置规则中的配置。

examples中示例

index.html: 基本使用，都是默认配置，主要是关于getTemplate的2中方式以及在链接元素加入data-rel=back（反方向动画）配置。
index2.html: 关闭动画示例。
index3.html: 不缓存模板示例。
index4.html: 全局更改动画class示例。
index5.html: 局部更改动画class的两种方式示例。
index6.html: 局部更改缓存模板的两种方式示例。
index7.html: M.history禁用掉pushstate示例。

后端渲染

只需要在响应时加入对应的页面结构即可：

<div class="page-view">后端渲染内容</div>

这是因为默认第一次初始化时，会查找页面上带有viewClass的元素，如果找到了，且innerHTML不为空，那么就不会再去调用getTemplate来得到模板内容了。

代码风格

没有用空格，而是用的tab。

协议

MIT

yongxiwang/M