# ts-programming-todolist-demo

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

## Basic Information

- **Project Name**: ts-programming-todolist-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-06
- **Last Updated**: 2022-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

在开发程序设计模式(横向切割)下做一个待办事项的案例

希望将`dom`的问题交由后续处理，外层专门来操作数据，数据操作进而变更`dom`，由类的继承时驱动其他方法的加载，数据的处理和`dom`的处理是完全分开的

加入后端设计模式的应用，发挥最大的优势

**技术：**

- `ts` + `vite` + 程序设计 + 后端 + 装饰器

**传统写法：**

绑定事件处理函数，数据的更改：

- 增加项，列表数据增加一项`{id,content,completed}`，每一项的视图增加到列表中
- 删除项，根据`id`去删除一项，将对应项的视图从列表中删除
- 改变完成状态，根据`id`去改变，将对应项的完成状态更改成是否完成

**接口：**

- 列表请求数据(`get`)：`/todolist`
- 切换是否完成的状态(`post`)：`/toggle`
- 移除某一项(`post`)：`/remove`
- 新增某一项(`post`)：`/add`

**_问题：如何不通过数据响应式，虚拟节点等底层数据绑定机制方法去实现程序设计方案？_**

1. 面向对象的方式
2. 需要类的继承方式
3. 需要横向切割程序方式

**_问题：如何设计？_**

将程序进行分类：

1. `app.ts`外层：浏览器的事件去调用方法，事件处理函数的绑定
2. `TodoEvent.ts`操作数据(子类继承`DOM`类)：抛出公共实例方法`addTodo`，`removeTodo`,`toggleComplete`，以便于数据的专门维护
3. `TodoDom.ts`操作`dom`(父类同时继承模板类)：抛出公共实例方法`addItem`,`removeItem`,`changeCompleted`，以便于`dom`的专门维护
4. `TodoTemplate.ts`管理模板(祖先类)：`todoView`，模板可以接收参数，以便于模板的专门维护

**_问题：为什么要使用装饰器？_**

在`es6`写法的类里可以定义一个装饰器用来做副作用的程序加载，实现一个简单句柄的写法多次复用该函数里的副作用程序(如数据请求)

**_问题：如何使用装饰器？_**

```
1. 在使用装饰器的方法上面加入 句柄 @getTodoList
2. 定义一个装饰器函数getTodoList
   参数1：使用该函数装饰器的类(包含类里面的所有方法不管共有还是私有)
   参数2：使用该函数装饰器的方法名称 _init
   参数3：是一个修饰符的配置对象
3. 保存原有descriptor.value里的函数
4. 重写descriptor.value里的函数,等待数据请求成功后去执行原有的函数
```

**使用的装饰器：**

- `@getTodoList`：该装饰器添加请求列表数据
- `@removeTodo`：该装饰器添加请求删除某一项数据
- `@toggleTodo`：该装饰器添加请求修改某一项数据
- `@addTodo`：该装饰器添加请求新增列表数据

**项目目录：**

```
├─src
|  ├─app.ts - 节点获取/静态数据/实例化数据类/事件处理函数绑定
|  ├─typings.ts
|  |     └index.ts
|  ├─js
|  | ├─TodoDom.ts - 专门操作处理dom的类
|  | ├─TodoEvent.ts - 专门操作数据的类/装饰器使用
|  | ├─TodoService.ts - 专门管理和定义装饰器的函数
|  | ├─TodoTemplate.ts - 专门管理模板的类
|  | └utils.ts - 找到父节点/创建一项节点方法
```

**继承关系：**

```mermaid
graph TB;
id3(Class TodoEvent) -.extend.-> id2(Class TodoDom) -.extend.-> id1(Class TodoTemplate)
```

**项目总结：**

这种设计适用于很多场景，原生或底层项目时，横向切割程序进行分类，有助于单独对某程序进行维护和更新

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