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

最新推荐文章于 2023-02-28 17:53:47 发布

Robbie丨Yang

最新推荐文章于 2023-02-28 17:53:47 发布

阅读量2.9k

点赞数 2

分类专栏： Web前端文章标签： stateman SPA应用路由规则 js 基于状态的小型路由

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

版权

Web前端专栏收录该内容

98 篇文章 7 订阅

订阅专栏

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。

Robbie丨Yang

关注

2
点赞
踩
1

收藏

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

StateMan：创建一个简单的SPA实例概念：StateMan是为复杂的Web应用程序提供嵌套，并且基于状态的小型路由。特性： - 1.嵌套路由支持。 - 2.独立与微小的代码库。 - 3.异步路由支持如果你需要异步逻辑在导航。 - 4.支持承诺 html5历史支持，回退到基于哈希的旧浏览器。 - 5.简洁的API，致力于简单地开始使用它。 - 6.支持IE6 +等现代浏览
复制链接

扫一扫