{"id":19611101,"url":"https://github.com/iuroc/ponconjs","last_synced_at":"2025-10-03T13:32:55.419Z","repository":{"id":65281339,"uuid":"558229059","full_name":"iuroc/PonconJS","owner":"iuroc","description":"PonconJS 前端路由控制系统","archived":false,"fork":false,"pushed_at":"2023-02-28T08:59:38.000Z","size":46,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T05:18:07.813Z","etag":null,"topics":["dom","hash","javascript","npm","page","router"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ponconjs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iuroc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-10-27T06:15:16.000Z","updated_at":"2023-03-07T10:49:36.000Z","dependencies_parsed_at":"2023-01-16T05:45:38.197Z","dependency_job_id":"f7f8952c-d617-40d9-95fd-3d028edb3e11","html_url":"https://github.com/iuroc/PonconJS","commit_stats":null,"previous_names":["iuroc/ponconjs","oyps/ponconjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iuroc%2FPonconJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iuroc%2FPonconJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iuroc%2FPonconJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iuroc%2FPonconJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iuroc","download_url":"https://codeload.github.com/iuroc/PonconJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251219600,"owners_count":21554444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","hash","javascript","npm","page","router"],"created_at":"2024-11-11T10:36:12.165Z","updated_at":"2025-10-03T13:32:55.329Z","avatar_url":"https://github.com/iuroc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PonconJS\n\n\u003e 前端路由控制系统\n\n### 介绍\n\n* 面向对象设计\n* 原生 JavaScript 开发\n* 支持页面 hash 监听和路由传参\n* 使用 CSS display 控制页面显示\n* 路由格式：`host/[filename]#/target[/args]`​\n\n### 说明\n\n* 入口页面必须是 `div.poncon-home.poncon-page`​\n\n### 使用方法\n\n#### 安装 PonconJS\n\n* 使用 `\u003cscript\u003e`​ 标签引入\n\n  ```html\n  \u003cscript src=\"./dist/poncon.min.js\"\u003e\u003c/script\u003e\n  ```\n* 通过 npm 安装\n\n  ```bash\n  npm install ponconjs\n  ```\n\n#### 创建 `poncon`​ 对象\n\n注意以下代码需要在页面加载完成后执行，如 `window.onload`​。\n\n* 通过 `\u003cscript\u003e`​ 引入时\n\n  ```js\n  const poncon = new Poncon()\n  ```\n* 使用 JS + Browserify 时\n\n  ```js\n  const ponconjs = require('ponconjs')\n  const poncon = new ponconjs.default()\n  ```\n* 使用 TS + Browserify 时\n\n  ```ts\n  import Poncon from 'ponconjs'\n  const poncon = new Poncon()\n  ```\n\n#### 注册页面列表\n\n```js\nponcon.setPageList(['home', 'about'])\n```\n\n#### 设置页面事件\n\n```js\nponcon.setPage('home', function (target, dom, args) {\n    console.log(target, dom, args)\n})\nponcon.setPage('about', function (target, dom, args) {\n    console.log(target, dom, args)\n})\n```\n\n#### 启动路由系统（必须在最后执行）\n\n```js\nponcon.start()\n```\n\n#### HTML页面模板\n\n加上 `style=\"display: none;\"`​ 可以防止页面元素闪烁。\n\n```html\n\u003cdiv class=\"poncon-home poncon-page\" style=\"display: none;\"\u003e\n    \u003c!-- Your code --\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"poncon-about poncon-page\" style=\"display: none;\"\u003e\n    \u003c!-- Your code --\u003e\n\u003c/div\u003e\n```\n\n### Demo\n\n* [script 标签引入示例](demo/script-tag-demo/README.md)\n* [Browserify 示例](demo/browserify-demo/README.md)\n* [TypeScript + Browserify 示例](demo/ts-browserify-demo/README.md)\n\n### 打包项目\n\n```bash\nnpm run build\n```\n\n### API\n\n`getTarget`​：获取当前页面标识名称\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiuroc%2Fponconjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiuroc%2Fponconjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiuroc%2Fponconjs/lists"}