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

来源：互联网发布：西南交大网络教育作业编辑：程序博客网时间：2024/06/09 23:38

这个实例是在实例一的基础上进行增加的一些新的功能

<!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>        <li><a href="#/app/contact">/contact</a></li>        <li><a href="#/app/contact/message">#/contact/message</a></li>        <li><a href="#/app/contact/2?name=charles">/contact/2?name=charles</a></li>        <li><a href="#/app/contact/2/setting">/contact/2/setting</a></li>        <li><a href="#/app/contact/3/setting">/contact/3/setting</a></li>        <li><a href="#/app/user">/app/user</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_obj = {            enter:function(option){                console.log("enter:" + this.name);//print: enter:'app'                console.log("param:" + JSON.stringify(option.param));//print:'param:{}'            },            leave:function(option){                console.log("leave:" + this.name);//print: leave:'app'                console.log("param:" + JSON.stringify(option.param));//print:'param:{}'            },            update:function(option){                console.log("update:" + this.name);//print: update:'app'                console.log("param:" + JSON.stringify(option.param));//print:'param:{}'            }        }        //        var config_fun = function(o){            console.log(o);            o.enter  = o.enter || config_obj.enter;            o.leave  = o.leave || config_obj.leave;            o.update = o.update|| config_obj.update;            return o;        }        //3.增加一个state对象        stateman.state({            //配置多个对象            //key:用来匹配url            //value:对不同url进行对应的操作            "app":config_obj,            "app.contact":config_obj,            //匹配./app/contact/:id(\d+)的url            //option.url默认匹配规则：[-\$\w]+            "app.contact.params":config_fun({url:":id(\\d+)"}),            "app.contact.params.setting":config_obj,            "app.user":config_fun({                enter:function(option){                    var done = option.async();                    console.log(this.name+"1s later go into next state");                    setTimeout(done,1000);                },                leave:function(option){                    console.log(this.name + ", 1s later to leave out");                    return new Promise(function(resolve){                        setTimeout(resolve, 1000)                    });                }            })        }).on("notfound",function(){//创建监听器，如果未匹配到url            //跳转页面            this.go('app');        }).start();//启动stateman, 路由开始    </script></body></html>

最终效果

以下面的url为例

  <a href="#/app/contact/2?name=charles">/contact/2?name=charles</a>

浏览器地址栏
这里写图片描述
输出的对象o{url:”:id(\d+)”}

输出结果

0 0