TypeScript方法装饰器应用
2023-06-13 09:16:12 时间
背景
在初入安卓开发的阶段要为一个按钮绑定点击事件需要经过
- 通过ID查找视图
- 为视图添加监听方法
- 完成点击事件具体内容
后来引入了一些IOC的库使得第1步和第2步可以通过配置自动完成,我们只关心点击事件的具体逻辑处理即可。 在前端MVVM框架盛行的现在,我们的事件绑定已经相当的简单了,但还是会有时候用到传统的写法,我们通过改造传统的前端事件绑定的写法了了解一下TypeScript中方法装饰器的使用。
HTML中只有视图的声明
<button id="query">查询</button>
<button id="cancel">取消</button>
const queryNode = document.querySelector("#query");
queryNode?.addEventListener("click", function () {
console.log("发起请求,查询数据~");
});
从上面的代码看的出前端的事件绑定和安卓中事件绑定的流程一致,都需要查找视图,添加监听方法,编写事件具体内容,重复的事情我们交给程序自动完成,专心写好查询函数。
引入接口来规范传入的参数
参数1:绑定视图的ID
参数2:绑定事件的名称
interface EventOptions {
id: string;
event: string;
}
创建方法装饰器
方法装饰器在运行时会当做函数传入以下三个参数来供我们使用
- 参数1:原型对象
- 参数2:成员名
- 参数3:属性描述符
说明:
装饰器函数中使用到了闭包
通过参数1和2可以灵活定位函数
function bindEvent(options: EventOptions) {
const { id, event } = options;
return function (
target: any, // ①原型对象
propertyKey: string, // ②成员的名字
descriptor: PropertyDescriptor // ③成员的属性描述符
) {
const node = document.querySelector(`#${id}`);
node?.addEventListener(event, function () {
④ 执行函数
target[propertyKey]();
});
};
}
模拟类组件进行装饰
export class Component {
@bindEvent({ id: "query", event: "click" })
query() {
console.log("发起请求,查询数据~");
}
@bindEvent({ id: "cancel", event: "click" })
cancel() {
console.log("接口取消~");
}
}
现在就可以将视图的ID和待绑定的事件类型传入装饰器进行配置,我们就专心完成点击事件的具体功能吧。
相关文章
- 使用pycharm连接MySQL数据库的方法「建议收藏」
- 软件测试流程设计—黑盒测试用例设计方法「建议收藏」
- Typescript教程_安装typescript
- ArcMap卡在加载界面、无法打开的解决方法
- 【计算机网络】数据链路层 : 局域网基本概念 ( 局域网分类 | 拓扑结构 | 局域网特点 | 局域网传输介质 | 介质访问控制方法 | IEEE 802 | 链路层 LLC、MAC 控制子层 )
- MongoDB插入数据的3种方法
- Oracle 取年月的实现方法(oracle取年月)
- Linux文件查看大小的方法(linux文件的大小)
- 排查Linux系统死锁的方法(linux检查死锁)
- 了解MySQL中不等于符号的正确使用方法和转义技巧(mysql 不等于 转译)
- ASP.netSubstitution页面缓存而部分不缓存的实现方法
- JQuerydatepicker使用方法
- php实现两表合并成新表并且有序排列的方法