万搏体育官方平台|万搏体育平台下载|万搏体育官方网站

万搏体育官方平台规模极大,一直秉承“一切以用户体验设计为核心”的经营理念,万搏体育平台下载有着非凡的创意与想法,就是为了给玩家带来极具特色和魅力的博彩体验,万搏体育官方网站高返水高信誉,画面精致优雅,万搏体育官方平台通过高品质的游戏内容和高标准的服务理念,让每一位选择大资本娱乐场的玩家都有着非凡的游戏体验经历。

前端Rollup+RxJs呼应式编程实践

照应式编程

以下概念介绍,根据 node v10.16.3 版别进行。不满足条件的,请移步 google or 度娘。

概念介绍

const a = 1,b = 2;
const c = a+ b;

照应式编程,当a,b再次变化时,c会再次做出修正。

布景

  • RxJS是一个用于运用Observables进行照应式编程的库
  • 可简化编写异步或根据回调的代码

本地环境建立

  • node
  • npm script
  • rollup
 npm install --global rollup
  • rxjs
 npm install rxjs
  • es6 语法,运用tree-shaking ,减缩代码

运用

hello-world 之123

import { of } from 'rxjs';
import { m标签3ap } from 'rxjs/operators';
of(1,2,3).subscribe(res => {
console.log(res);
});

rollup打包→ bundle.js → node bundle.js,接连输出123

rollup main.js --file bundle.js --format cjs
'use strict';

var rxjs = require('rxjs');
require('rxjs/operators');

rxjs.of(1,2,3).subscribe(res => {
console.log(res);
});

优化rollup装备

创立rollup.config.js

export default {
input: 'main.js',
output: {
file: 'bundle.js',
fo标签5rmat: 'cjs'
}
};
rollup -c rollup.config.js 

npm script支撑

package.json

 {
"name": "rxjs-demo",
"version": "1.0.0",
"description": "",
"main": "test.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"rollup -c", // 默许装备 rollup --config rollup.config.js
"start":"npm run build && node bundle.js" // && 是继发,& 是并发
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"rxjs": "^6.5.3"
}
}

终究的运转如下:

npm start 

Rxjs读取package.json字段version

// install plugin
npm install --save-dev rollup-plugin-json
// rollup.config.js
import json from 'rollup-plugin-json';
export default {
input: 'main.js',
output: {
file: 'bundle.js',
format: 'cjs'
},
plugins:[json()]
};
// main.js
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';

of(1,2,3,version).subscribe(res => {
console.log(res);
});

pipe管道在输出前修正数据

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';

of(1,2,3,version).pipe(map(item => item + ' through pipe use map'))
.subscribe(res => {
console.log(res);
});

用Observable改写of

其间,能够看到observable归于前端Rollup+RxJs照应式编程实践异步履行。

import { of,Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';

//through pipe
// of(1,2,3,version).pipe(map(item => item + ' through pipe use map'))
// .subscribe(res => {
// console.log(res);
// });

console.log("before observable....");
const publisher$ = new Observable(suber => {
console.log("in observable....");
suber.next(1);
suber标签10.next(2);
suber.next(3);
suber.next(version);
});
console.log("after observable....");
publisher$.pipe(map(item => item + ' through pipe use map')).subscribe(res => {
console.log(res);
});

subscribe订阅几回,告诉履行几回,而不是仅消费一次

console.log("before observable....");
const publisher$ = new Observable(suber => {
console.log("in observable....");
suber.next(1);
suber.next(2);
suber.next(3);
suber.next(version);
});
console.log("after observable....");
publisher$.pipe(map(item => item + ' through pipe use map')).subscribe(res => {
console标签11.log(res);
});
publisher$.subscribe(res => {
console.log("subscribe second..." + res);
});

hot subscribe - 与时刻先后有关,订阅内容差

import { of,Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';

let count = 0;
console.log("before observable....");
const publisher$ = new Observable(suber => {
c标签14onsole.log("in observable....");
setInterval(() => {
count++;
suber.next(count);
}, 100);
});
console.log("after observable....");
publisher$.pipe(map(item => 'first ...'+ item)).subscribe(res => {
console.log(res);
});

setTimeout(() => {
const publisher2$ = new Observable(suber => {
setInterval(() => {
suber.next(count);
}, 10前端Rollup+RxJs照应式编程实践0);
});
publisher2$.subscribe(res => {
console.log("second ..." + res);
});
}, 1000);

cold subscribe -- 时刻先后无关,内容无差异

import { of,Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';


console.log("before observable....");前端Rollup+RxJs照应式编程实践
const publisher$ = new Observable(suber => {
console.log("in observable....");
setInterval(() => {
let count = 0;
count++;
suber.next(count);
}, 100);
});
console.log("after observable....");
publisher$.pipe(map(item => 'first ...'+ item)).subscribe(res => {
console.log(res);
});

setTimeout(() => {
const publisher2$ = new Observable(suber => {
setInterval(() => {
let count = 0;
count++;
suber.next(count);
}, 100);
});
publisher2$.subscribe(res => {
console.log("second ..." + res);
});
}, 1000);

observable状况中止

import { of,Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { version前端Rollup+RxJs照应式编程实践 } from './package.json';


const publiser$ = new Observable(suber => {
suber.next(1)标签5;
suber.next(2);
suber.next(3);
suber.next(version);
// suber.complete();标签10
suber.error();
});
publiser$.subscribe({
next:res => {
console.log(`next ...${res}`);
},
complete:() => {
console.log("complete done....");
},
error: () => {
console.log("error occur....");
}
});

中止订阅,开释资源,但状况没有中止

import { of,Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';


const publiser$ = new Observable(suber => {
let count = 0;
const timer = setInterval(() => {
suber.next(count);
count++;
},400);
//suber.next(1);
// suber.complete();
// 标签20suber.error();
return {
unsubscribe:() => {
console.log("stop push data....");
clearInterval(timer);
}
}
});
const unsuber = publiser$.subscribe({
next:res => {
console.log(`next 标签5...${res}`);
},
complete:() => {
console.log("complete done....");
},
error: () => {
c前端Rollup+RxJs照应式编程实践onsole.log("error occur....");
}
});

setTimeout(() => {
unsuber.unsubscribe();
},2000);

运用rxjs自带操作符优化上述的去粗取精订阅

import { of,Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';


const publiser$ = interval(400);
const unsuber = publiser$.subscribe({
next:res => {
标签3console.log(`next ...${res}`);
},
complete:() => {
console.log("complete done....");
},
error: () => {
console.log("error occur....");
}
});

setTimeout(() => {
unsuber.unsubscribe();
},2000);

双重身份的SubJect

import { of,Observable, interval,Subject } from 'rxjs';
i前端Rollup+RxJs照应式编程实践mport { map }标签1 from 'rxjs/operators';
import { version } from './package.json';

const sub = new Subject();
sub.pipe(map(res => 'first ...'+res)).subscribe((res) => {
console.log("sub one...",res);
});
sub.subscribe({
next:(res) => {
console.log(`second...${res}`);
}
});
sub.next(1);
sub.next(2);
import { of,Observable, interval标签20,Subject ,from} from 'rxjs';
import { map } from 'rxjs/operators';
import { version } from './package.json';

const sub = new Subject();
sub.pipe(map(res => 'first ...'+res)).subscribe((res) => {
con标签1sole.log("sub one...",res);
});
sub.subscribe({
next:(res) => {
console.log(`second...${res}`);
}
});
// sub.next(1);
// sub.next(2);
const publisher$ = from([1,2,3]);
publisher$.subscribe(sub);

参考文献

rxjs.dev/

rxjs.dev/guide/operators

www.ruany标签10ifeng.com/blog/2016/10/npm_scripts.html

本文作者:前端首席体会师(Cheon标签5gHu)

联络邮箱:simple2012hcz@126前端Rollup+RxJs照应式编程实践.com

Tagged