因为对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
|
{
"presets": [
"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,
},
}
|
添加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
|
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;
};
Object.assign(newConstructor, oldConstructor);
newConstructor.prototype = oldConstructor.prototype;
return newConstructor;
}
|
添加文件夹别名
有个良好的习惯还是不错的，例如本骚年喜欢在架(luan)构(xie)项目的时候，就把共用文件夹的别名给添加上。
创建import或require的别名，来确保模块引入变得更简单。
首先我们要配置Webpack中的esolve.alias：
1
2
3
4
5
6
7
8
9
10
|
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
|
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"utils": ["utils"],
"components": ["components"]
}
}
}
|
这里我们在components文件夹中添加input.tsx文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import xs from 'xstream';
import { run } from '@cycle/run';
import { makeDOMDriver } from '@cycle/dom';
import { bindMethods } from 'utils/bindMethods';
let id: number = 0;
@bindMethods
export class InputComponent {
DOM: any;
value: any;
constructor(domSources, type) {
this.value = domSources.select('#input' + id).events('change')
.map(ev => ev.target.value).startWith('');
this.DOM = this.value.map(val => {
return <input type={type} id={'input' + id++} className="form-control" value={val} />;
});
}
}
|
[捂脸]感觉今天智商有点不够用，尝试了下没有想象中的结果出来。
或许后面对于流还需要再仔细研究，就能出来啦。
结束语
这节主要讲了为了使用装饰器进行配置调整，使用Class创建input控件的过程，不过智商不够用，还没能顺利跑起来。
项目代码也是个参考的过程，所以也作为一节来记录。
此处查看项目代码
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
