StateMan：创建一个简单的SPA实例(一)

来源：互联网发布：剑网三唐门捏脸数据编辑：程序博客网时间：2024/06/01 10:29

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。

0 0