A very simple router, just for the demo of weui
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参数 option 是可选的，下面是该参数可选的属性。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| container | String | '#container' | container 容器的选择器 |
| enter | String | 'enter' | 该页面出现时添加的类名，enterTimeout 为 0 时会被忽略 |
| enterTimeout | Number | 0 | 在这个时间之后移除添加的 enter 类名 |
| leave | String | 'leave' | 该页面离开时添加的类名，lieaveTimeout 为 0 时会被忽略 |
| leaveTimeout | Number | 0 | 在这个时间之后移除该页面的 DOM |
以下方法执行完毕后均返回实例本身。
添加路由页面的配置。下面是 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
});
}
}设置页面启动时默认跳转的 url。
启动页面，在调用完 push 和 setDefault 方法后调用，主要完成 hashchange 的事件监听和跳转默认页面的工作。
The MIT License(http://opensource.org/licenses/MIT)
请自由地享受和参与开源