PonconJS 前端简易路由控制工具
https://github.com/oyps/PonconJS
介绍
- 面向对象设计
- 原生 JavaScript 开发
- 支持页面 hash 监听和路由传参
- 使用 CSS display 控制页面显示
- 路由格式:
host/[filename]#/target[/args]
使用说明
- 入口页面必须是
div.poncon-home.poncon-page
使用方法
-
引入 poncon.js
<script src="poncon.js"></script> -
注意以下代码需要在页面加载完成后执行,如 window.onload
-
实例化一个 poncon 对象
var poncon = new Poncon() -
注册页面列表
poncon.setPageList(['home', 'about']) -
设置页面事件
poncon.setPage('home', function (target, dom, args) { console.log(target, dom, args) }) poncon.setPage('about', function (target, dom, args) { console.log(target, dom, args) }) -
启动路由系统
poncon.start() -
HTML 页面模板
<div class="poncon-home poncon-page"> </div> <div class="poncon-about poncon-page"> </div>