StateMan:创建一个简单的SPA实例
概念:StateMan是为复杂的Web应用程序提供嵌套,并且基于状态的小型路由。
特性:
- 1.嵌套路由支持。
- 2.独立与微小的代码库。
- 3.异步路由支持如果你需要异步逻辑在导航。
- 4.支持承诺 html5历史支持,回退到基于哈希的旧浏览器。
- 5.简洁的API,致力于简单地开始使用它。
- 6.支持IE6 +等现代浏览器。 良好的测试,出生在大产品。
不废话了,直接上例子:
-注意:必须要引入stateman.js文件
代码块
<!DOCTYPE html>
<html>
<head>
<title>stateman路由测试</title>
<script type="text/javascript" src="../js/stateman.js"></script>
</head>
<body>
<h1>打开控制台console来查看日志信息</h1>
<ul>
<li><a href="#/app">/app</a></li>
</ul>
<script type="text/javascript">
//1.创建stateman的实例
var stateman = new StateMan();
//2.配置stateman实例的属性(config)、
/**
* 这里有五个生命周期相关的方法用来控制路由的逻辑, 它们都是可选择实现的
config.enter(option): 一个函数,当状态被进入时会被调用
config.leave(option): 一个函数,当状态被离开时会被调用
config.update(option): 一个函数,当状态更新时会被调用, 更新的意思是,路径有变化,但是此状态仍未被退出.
config.canEnter(option): 请求是否可进入
config.canLeave(option): 请求是否可退出
以下只用三个方法用于说明
*/
var config = {
enter:function(option){
console.log(this.name+",option"+option);
},
leave:function(option){
//other logic
},
update:function(option){
//other logic
}
}
//3.增加一个state对象
stateman.state({
"app":config
}).on("notfound",function(){//创建监听器,如果未匹配到url
//跳转页面
this.go('app');
}).start();//启动stateman, 路由开始
</script>
</body>
</html>
细节说明
var config = {
enter:function(option){
console.log(this.name+",option"+option);
}
}
1.option
参数option:config.enter(option)
2.this
StateMan API地址:http://leeluolee.github.io/stateman/?API-zh=undefined&doc=API&lang=zh#stateman-文档-api-new-stateman。