Crossroads.js基于路由/分发(Route/Dispatch)方式处理路由的一套js专业路由库

Crossroads.js基于路由/分发(Route/Dispatch)方式处理路由的一套js专业路由库

crossroads.js是一个受Rails, Pyramid, Django, CakePHP等基于路由/分发(Route/Dispatch)方式处理路由的后端MVC框架启发的一套js专业路由库。它能够直接解析传入的字符串并根据相应的规则来过滤和验证路由,然后再执行下一步的操作。

使用方法

第一步引入bfwone crossroads.js依赖signals.js与hasher.js,使用时按照顺序加载

第二步,执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=signals|hasher|crossroads&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            //setup crossroads
            crossroads.addRoute('home');//主页
            crossroads.addRoute('user');//用户中心页
            crossroads.addRoute('cart');//购物车页面
            crossroads.addRoute('detail/{id}', function(id) {
                console.log(id);
                console.log(typeof id);
            });//上详情页
            crossroads.routed.add(console.log, console); //console所有的路由记录

            //setup hasher
            function parseHash(newHash, oldHash) {
                crossroads.parse(newHash);
            }
            hasher.initialized.add(parseHash); // parse initial hash
            hasher.changed.add(parseHash); //parse hash changes
            hasher.init(); //start listening for history change
            //跳转到商品页面
            hasher.replaceHash('detail/122333');
        });
    </script>
</head>
<body>
   请打开console查看记录,请查看浏览器url的变化
</body>
</html>

官网 https://github.com/millermedeiros/crossroads.js


立即下载crossroads.js查看所有js插件

网友评论0

程序员在线工具箱