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

最新推荐文章于 2023-02-01 18:51:13 发布

Robbie丨Yang

最新推荐文章于 2023-02-01 18:51:13 发布

阅读量907

点赞数

分类专栏： HTML5 Web前端文章标签：路由 stateman stateman实例

本文链接：https://blog.csdn.net/u013243347/article/details/58158903

版权

Web前端同时被 2 个专栏收录

98 篇文章 7 订阅

订阅专栏

HTML5

22 篇文章 0 订阅

订阅专栏

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

<!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+)”}

输出结果

Robbie丨Yang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
StateMan：创建一个简单的SPA实例(二)

这个实例是在实例一的基础上进行增加的一些新的功能<!DOCTYPE html><html><head> <title>stateman路由测试</title> <script type="text/javascript" src="../js/stateman.js"></script></head><body> <h1>打开控制台console来查看日志信息</h1
复制链接

扫一扫