反应式编程
反应式编程是一种编程模式,其重点在于:
异步编程
可观察的数据流
异步编程允许编写非阻塞代码。我们中的许多人都非常熟悉使用AJAX的jQuery承诺的异步编程。NodeJS由于其异步编程风格而变得非常受欢迎。而反应式编程组合了我们已经熟悉的方法和功能编程技术的概念,为异步编程提供了新的方法。
那么,什么是可观察的数据流?那么,流只是一连串的事件。数据流可以包括UI事件,数组元素和最流行的,我们将要使用很多是http请求流。当然可以有其他类型的流。在反应式编程中,观察者订阅可观察的。观察者是当数据流更改或更新时收到通知的对象。一个可观察者随时间发射多个值,或通过调用观察者的方法向其观察者发送通知。
所以,重要的问题可以是:为什么使用反应式编程和可观察的?老实说,我试图弄清楚这种模式对其他模式/选项的理解,并且很乐意听到你的看法。可观察是ES7的重要组成部分,我们今天可以使用RxJS库进行反应式编程。该库也可以与C#,Java ruby等其他语言一起使用
足够的理论,让我们得到编码:
您可以从npm存储库安装Rxjs库,以在设备上进行设置。
npm安装rxjs
要导入RxJS功能:
从‘rxjs / Rx’导入Rx;
要了解有关安装的更多信息,请访问此链接。
var source = Rx.Observable.fromEvent(document.body,‘mousemove’);
source.subscribe(val
=> console.log(val),
e => console.log(e),
()=> console.log(‘completed’));
source.subscribe(val
=> {
console.log(`x:$ {val.offsetX}&y:$
{val.offsetY}`)
},
e => console.log(e),
()=> console。日志( ‘完成‘));
我们可以创建可观察到的mousemove事件的序列,并且观察者监听该观察者的变化可以对事件做出反应。
Observable可以简单地看作是一个数组,但它可以随着时间的推移与新值异步地填充。而且我们也可以像数组一样使用map,filter,reduce等操作符。
var numbers = [1,4,5,6];
这里,数字只是一个数组。让它转换成可观察的。我们可以使用from()来转换数组,承诺或迭代到可观察的。
var source = Rx.Observable.from(numbers);
我们已经声明了一个可观察的,就像声明一个函数一样,直到被调用才会执行任何操作。调用observable称为订阅observable。
source.subscribe(
val => console.log(val),//下一个方法
e => console.log(err),//错误方法
()=> console.log(‘complete’)); //完成方法
//输出
// 1
// 4
// 5
// 6
如果我们想要收听数据或找到内部的内容,我们使用观察者订阅observable。观察员需要三种方法:
那么这个源观察 可以异步地接收数据流,我们可以使用观察者来监听变化并对其做出反应。
像数组一样,我们可以在observable上使用map(),filter(),reduce()等。这些方法被称为运算符,并返回新的可观察的表单源可观察值。
var numbers = [1,4,5,6];
var source = Rx.Observable.from(numbers)
.map(val => val
* 2)
.filter(val =>
val> 2);
source.subscribe(val
=> console.log(val),
e => console.log(e),
()=> console.log(‘complete’));
// Output
// 8
// 10
// 12
// complete
那么我们可以使用低级的create()来实现我们自己的可观察。它使用订阅功能中的逻辑创建一个新的可观察值。在大多数情况下,我们不需要使用这种方法,因为库提供运算符来满足大多数用例。然而,它很好的知道存在低水平的方法来创建我们自己的可观察。
var msg = Rx.Observable.create(function(observer){
observer.next(‘Hello’);
observer.next(‘World’)
})
msg.subscribe(val
=> console.log(val))
//输出
// Hello
// World
让我们以前的observable数组与setTimeout()异步,以便我们的观察者可以监听observable中的变化并对其做出反应并做一些逻辑。
var numbers = [1,4,5,6];
var source = Rx.Observable.create(observer => {
var num = 0;
var generateVal =()=>
{
observer.next(numbers
[num ++]);
if(num
setTimeout(generateVal,2000 );
}
}
generateVal();
})
source.subscribe(val
=> console.log(val),
e => console.log(e),
()=> console.log(‘complete’));
//输出
// 1
// 4
// 5
// 6
那么,可以在我们的应用程序中使用可观察的承诺。事实上,承诺只是一个简单的观察者,具有异步操作的单个结果。虽然可观察者可以发出多个事件并向其订阅者返回多个结果。
为了给出一个真实世界的例子,这是我在Angular 2中的一个项目中使用的方法,我们可以使用这个库来从服务器请求数据并在我们的UI中呈现响应。
var requestUrl =“
https://api.github.com/user ”;
var response = Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
var requestUrl
=”https://api.github.com/users”;
var response =
Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
response$.subscribe((val) =>
console.log(val),
(err) =>
console.log(err),
() =>
console.log(‘complete’));
我们可以简单的承诺转化为可观察到的与fromPromise() ,并 发出承诺听众的结果。我们有一个观察员听着响应可观察。
虽然可观察到了所有的承诺,我们可以使用庞大的运营商库来执行复杂的操作并将其转换成新的可观察者。
要观察更大的图像,我们可以使用observable来观察状态或一些数据或变量的行为,并通过对可观察流的变化做出反应来管理整个应用程序的状态。
可以使用更改检测策略,根据模型中的更改或更新来更新UI,而无需重新渲染页面。可观察是ES7的重要组成部分,是下一代JavaScript。
当ES7成为可用时,学习观察器有助于准备好前提,并且它肯定会提高我们的异步编程技能。
要了解有关反应式编程和RxJS的更多信息,您可以访问此站点。
我很想分享更多关于这个更多的帖子。敬请关注。
快乐编码🙂