Cycle.js学习笔记4--使用Class和装饰器
因为对Rxjs的好感玩上了Cycle.js,《Cycle.js学习笔记》系列用于记录使用该框架的一些笔记。
本文记录使用Class创建input控件的过程,以及其中使用装饰器和调整配置的笔记。
使用装饰器
这里我们先进行装饰器的配置调整。
使用最新babel特性
为了使用装饰器,之前安装的babel-preset-es2015
不知道够不够用啦,不管三七二十一我们直接上最新的特性啦:
|
|
这里我们还需要调整babel配置:
|
|
其实这里并不需要安装最新特性的babel
的,因为我们入口文件都是先经过ts-loader
的,而我们前面配置它的输出是es6
。
所以这里是多此一举[捂脸],不过介绍一下也没多大关系啦。
调整ts配置
这里我们需要在tsconfig.json
里面添加上关于装饰器的配置:
|
|
使用Class创建Input
添加bindMethods装饰器
前面在玩angular1和typescript的时候也发现和讲过,es6里的Class类,我们在使用的时候总是会有this
的指向的问题,所以这里做个bindMethods
装饰器,来进行this
的绑定。
我们创建utils
文件夹,用来管理这类工具,然后创建bindMethods.ts
:
|
|
添加文件夹别名
有个良好的习惯还是不错的,例如本骚年喜欢在架(luan)构(xie)项目的时候,就把共用文件夹的别名给添加上。
创建import
或require
的别名,来确保模块引入变得更简单。
首先我们要配置Webpack中的esolve.alias
:
|
|
因为我们使用Typescript,所以我们还需要调整ts的配置:
|
|
创建一个Input
这里我们在components
文件夹中添加input.tsx
文件:
|
|
[捂脸]感觉今天智商有点不够用,尝试了下没有想象中的结果出来。
或许后面对于流还需要再仔细研究,就能出来啦。
结束语
这节主要讲了为了使用装饰器进行配置调整,使用Class创建input控件的过程,不过智商不够用,还没能顺利跑起来。
项目代码也是个参考的过程,所以也作为一节来记录。
此处查看项目代码
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
原文地址:https://www.cnblogs.com/sanxiandoupi/p/11698916.html
- Replace方法与正则表达式的性能比较
- 由索引节点(inode)爆满引发的问题
- As3.0中的位图(Bitmap/BitmapData)编程
- Mesos+Zookeeper+Marathon的Docker管理平台部署记录(2)--负载均衡marathon-lb
- Docker集群管理工具-Kubernetes部署记录
- AS3:小游戏“贪吃蛇”的实现
- 超实用的8个Linux命令行性能监测工具
- 用javascript替换URL中的参数值
- Gitblit版本服务器环境部署记录
- HDK扩展自定义VEX函数print
- AsyncTask和Handler对比
- sql初始化XML操作
- 给你一根杠杆,撬起万亿的小程序红利市场!
- Flash/Flex学习笔记(43):动量守恒与能量守恒
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- socket接口层分析
- 数据存储方式——JSON、CSV、MongoDB、Redis、MySQL
- Spring Boot引入swagger-ui 后swagger-ui.html无法访问404
- 多路复用IO内幕
- Linux信号处理
- Shopify主题title/description等SEO设置
- Golang实现守护进程
- LaTeX简单常用方法笔记
- Convolution_model_Application_v1a
- Windows平台快速安装MongoDB和Robo 3T
- Linux内存管理 - slab分配器
- akka-grpc - 基于akka-http和akka-streams的scala gRPC开发工具
- Redis Sentinel原理与实现 (中)
- Keras_Tutorial_v2a
- 根据字符串生成对应Hash值