# ts-todolist-appearance-demo

**Repository Path**: kevinleeeee/ts-todolist-appearance-demo

## Basic Information

- **Project Name**: ts-todolist-appearance-demo
- **Description**: 案例：`todolist`

在开发外观模式下做一个待办事项的案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**<u>案例：`todolist`</u>**

在开发外观模式下做一个待办事项的案例

**技术：**

- `ts` + `vite` + 外观模式

**组件划分：**

- `TodoList`组件：`Input` + `List`，实例化子组件并传入节点容器和配置信息
- `TodoList`组件是一个中介，集中管理`Input`和`List`的功能，组装子组件最后挂载到`todoList`容器
- `TodoList`组件最终交给`index`视图(子组件实例创建，渲染，事件绑定)

**关于外观模式：**

外观模式的基本用法，入口模块直接接收一个`TodoList`外观模块接口，去实现相应的功能，而不会去对子组件产生任何的依赖

```
组件化 -> 组件结构 -> 外观模式
```

**项目目录：**

```
├─index.html
├─package.json
├─src
|  ├─app.ts - 实例化后初始化todolist插件/根节点和静态数据传入实例
|  ├─typings
|  |    └index.ts - 接口
|  ├─components
|  |     ├─TodoList - 根组件/管理子组件的渲染和事件绑定/共享初始化函数
|  |     |    ├─index.ts - 自身实现实例化创建子组件
|  |     |    ├─Subs
|  |     |    |  ├─Component.ts - 抽象类/管理组件相关的公共方法/视图模板方法
|  |     |    |  ├─Input.ts - 输入框组件类
|  |     |    |  └List.ts - 列表组件类
```

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