# ponconjs

> 前端路由控制系统

Latest version **1.1.9** (published 2023-02-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install ponconjs
pnpm add ponconjs
yarn add ponconjs
bun add ponconjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2023-02-28 |
| First published | 2023-01-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | oyps |

## Links

- npm: https://www.npmjs.com/package/ponconjs
- Repository: https://github.com/oyps/PonconJS
- Homepage: https://github.com/oyps/PonconJS#readme
- Issues: https://github.com/oyps/PonconJS/issues
- npm.io page: https://npm.io/package/ponconjs

## Recent versions

- 1.1.9 (latest) — 2023-02-28
- 1.1.8 — 2023-02-28
- 1.1.7 — 2023-02-28
- 1.1.6 — 2023-01-14
- 1.1.5 — 2023-01-14
- 1.1.4 — 2023-01-14
- 1.1.3 — 2023-01-14
- 1.1.2 — 2023-01-14
- 1.1.1 — 2023-01-14
- 1.0.0 — 2023-01-14

## README

# PonconJS

> 前端路由控制系统

### 介绍

* 面向对象设计
* 原生 JavaScript 开发
* 支持页面 hash 监听和路由传参
* 使用 CSS display 控制页面显示
* 路由格式：`host/[filename]#/target[/args]`​

### 说明

* 入口页面必须是 `div.poncon-home.poncon-page`​

### 使用方法

#### 安装 PonconJS

* 使用 `<script>`​ 标签引入

  ```html
  <script src="./dist/poncon.min.js"></script>
  ```
* 通过 npm 安装

  ```bash
  npm install ponconjs
  ```

#### 创建 `poncon`​ 对象

注意以下代码需要在页面加载完成后执行，如 `window.onload`​。

* 通过 `<script>`​ 引入时

  ```js
  const poncon = new Poncon()
  ```
* 使用 JS + Browserify 时

  ```js
  const ponconjs = require('ponconjs')
  const poncon = new ponconjs.default()
  ```
* 使用 TS + Browserify 时

  ```ts
  import Poncon from 'ponconjs'
  const poncon = new Poncon()
  ```

#### 注册页面列表

```js
poncon.setPageList(['home', 'about'])
```

#### 设置页面事件

```js
poncon.setPage('home', function (target, dom, args) {
    console.log(target, dom, args)
})
poncon.setPage('about', function (target, dom, args) {
    console.log(target, dom, args)
})
```

#### 启动路由系统（必须在最后执行）

```js
poncon.start()
```

#### HTML页面模板

加上 `style="display: none;"`​ 可以防止页面元素闪烁。

```html
<div class="poncon-home poncon-page" style="display: none;">
    <!-- Your code -->
</div>

<div class="poncon-about poncon-page" style="display: none;">
    <!-- Your code -->
</div>
```

### Demo

* [script 标签引入示例](demo/script-tag-demo/README.md)
* [Browserify 示例](demo/browserify-demo/README.md)
* [TypeScript + Browserify 示例](demo/ts-browserify-demo/README.md)

### 打包项目

```bash
npm run build
```

### API

`getTarget`​：获取当前页面标识名称

---
_Source: https://npm.io/package/ponconjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._