文章目录
  1. 1. 使用装饰器
    1. 1.1. 使用最新babel特性
    2. 1.2. 调整ts配置
  2. 2. 使用Class创建Input
    1. 2.1. 添加bindMethods装饰器
    2. 2.2. 添加文件夹别名
    3. 2.3. 创建一个Input
  3. 3. 结束语

因为对Rxjs的好感玩上了Cycle.js,《Cycle.js学习笔记》系列用于记录使用该框架的一些笔记。
本文记录使用Class创建input控件的过程,以及其中使用装饰器和调整配置的笔记。

使用装饰器


这里我们先进行装饰器的配置调整。

使用最新babel特性

为了使用装饰器,之前安装的babel-preset-es2015不知道够不够用啦,不管三七二十一我们直接上最新的特性啦:

1
npm install -D babel-preset-latest

这里我们还需要调整babel配置:

1
2
3
4
5
6
7
8
9
10
// .babelrc
{
"presets": [
"latest" // 改成latest
],
"plugins": [
"syntax-jsx",
["transform-react-jsx", {"pragma": "html"}]
]
}

其实这里并不需要安装最新特性的babel的,因为我们入口文件都是先经过ts-loader的,而我们前面配置它的输出是es6
所以这里是多此一举[捂脸],不过介绍一下也没多大关系啦。

调整ts配置

这里我们需要在tsconfig.json里面添加上关于装饰器的配置:

1
2
3
4
5
6
7
8
9
{
"compilerOptions": {
// 启动装饰器和元数据
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
// ...
},
// ...
}

使用Class创建Input


添加bindMethods装饰器

前面在玩angular1和typescript的时候也发现和讲过,es6里的Class类,我们在使用的时候总是会有this的指向的问题,所以这里做个bindMethods装饰器,来进行this的绑定。

我们创建utils文件夹,用来管理这类工具,然后创建bindMethods.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 将实例的原型上面所有函数都绑定this
export function bindMethods(oldConstructor) {
const newConstructor: any = function(...args) {
const instance = new oldConstructor(...args);
const prototype = oldConstructor.prototype;
Object.keys(prototype).forEach(key => {
if (typeof prototype[key] === 'function') {
instance[key] = prototype[key].bind(instance);
}
});
return instance;
};
// 复制构造函数的$inject属性
Object.assign(newConstructor, oldConstructor);
newConstructor.prototype = oldConstructor.prototype;
return newConstructor;
}

添加文件夹别名

有个良好的习惯还是不错的,例如本骚年喜欢在架(luan)构(xie)项目的时候,就把共用文件夹的别名给添加上。
创建importrequire的别名,来确保模块引入变得更简单。

首先我们要配置Webpack中的esolve.alias

1
2
3
4
5
6
7
8
9
10
// webpack.config.js
var config = {
// ...
resolve: {
alias: {
utils: path.resolve(__dirname, 'src', 'utils'),
components: path.resolve(__dirname, 'src', 'components'),
}
}
};

因为我们使用Typescript,所以我们还需要调整ts的配置:

1
2
3
4
5
6
7
8
9
10
11
// tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": "src",
"paths": {
"utils": ["utils"],
"components": ["components"]
}
}
}

创建一个Input

这里我们在components文件夹中添加input.tsx文件:

1
2
3
4
5
6
7