# ts-plugin-tablist-demo

**Repository Path**: kevinleeeee/ts-plugin-tablist-demo

## Basic Information

- **Project Name**: ts-plugin-tablist-demo
- **Description**: ts面向对象插件化开发一个·`nav`切换`page`页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-04
- **Last Updated**: 2022-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**<u>案例：页面切换</u>**

面向对象插件化开发一个·`nav`切换`page`页面

**技术：**

- `vite` + `ts` + 订阅发布模式

**功能：**

- 直接切换`fade`
- 滚动切换`slide`

**类划分：**

- 功能类：
  - `Fade`：自身`setPage`方法的实现`fade`切换，实例化时执行收集方法传入`setPage`方法
  - `Slide` ：自身`setPage`方法的实现`slide`切换，实例化时执行收集方法传入`setPage`方法
- 抽象类：
  - `Base` 管理公共的功能
  - 定义容器装载函数方法
  - 订阅模式：收集方法`protected getMethod`，将继承类的方法放入容器
  - 发布通知模式：`protected notify`，该方法在点击切换时触发，遍历容器里所有的方法并执行同时传参

**源码地址：** https://gitee.com/kevinleeeee/ts-plugin-tablist-demo