Skip to content

Latest commit

 

History

History
162 lines (125 loc) · 3.63 KB

README.md

File metadata and controls

162 lines (125 loc) · 3.63 KB

Simple Router

A very simple router, just for the demo of weui

预览

image

https://progrape.github.io/router

使用

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>example</title>
</head>
<body>
    <div id="container"></div>
    <script src="path/to/router.js"></script>
</body>
</html>

JavaScript

var router = new Router({
    container: '#container'
});
var home = {
    url: '/',
    className: 'home',
    render: function (){
        return '<h1>home</h1>';
    }
};
var post = {
    url: '/post/:id',
    className: 'post',
    render: function (){
        var id = this.params.id;
        return '<h1>post</h1>';
    }
};
router.push(home).push(post).setDefault('/').init();

运行示例

git clone https://github.com/progrape/router
cd router
npm install
npm start

API

Router([option])

参数 option 是可选的,下面是该参数可选的属性。

属性 类型 默认值 描述
container String '#container' container 容器的选择器
enter String 'enter' 该页面出现时添加的类名,enterTimeout 为 0 时会被忽略
enterTimeout Number 0 在这个时间之后移除添加的 enter 类名
leave String 'leave' 该页面离开时添加的类名,lieaveTimeout 为 0 时会被忽略
leaveTimeout Number 0 在这个时间之后移除该页面的 DOM

实例方法

以下方法执行完毕后均返回实例本身。

push(route)

添加路由页面的配置。下面是 route 参数的属性。

属性 类型 描述
url String / 开头的 url,会体现在 hash,支持参数,如:/user/:userId/post/:posdId
className String 可选,该页面可以添加的额外类名,以便控制该页面下的样式
render function 页面渲染方法,支持同步和异步, 可以直接返回 html 字符串,可以返回 promise 对象,也可以接收 callback 参数
bind function 执行绑定事件的方法,this 指向当前页面容器

route 示例如下:

同步

{
    url: '/home',
    className: 'home',
    render: function (){
        return '<button>home</button>';
    },
    bind: function (){
        $(this).on('click', 'button', function (){
            // do something
        });
    }
}

promise

{
    url: '/home',
    className: 'home',
    render: function (){
        return new Promise(function (resolve, reject){
            resolve('<button>home</button>');
        });
    },
    bind: function (){
        $(this).on('click', 'button', function (){
            // do something
        });
    }
}

callback

{
    url: '/home',
    className: 'home',
    render: function (callback){
        callback(null, '<button>home</button>');
    },
    bind: function (){
        $(this).on('click', 'button', function (){
            // do something
        });
    }
}
setDefault(url)

设置页面启动时默认跳转的 url。

init()

启动页面,在调用完 pushsetDefault 方法后调用,主要完成 hashchange 的事件监听和跳转默认页面的工作。

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源