成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯]RxJS文檔01——介紹

BlackHole1 / 2372人閱讀

摘要：原文是一個(gè)使用可觀察量隊(duì)列解決異步編程和基于事件編程的庫。提供了幾個(gè)管理異步事件的核心概念可觀察量，代表了一個(gè)由未來獲取到的值或事件組成的集合。相當(dāng)于事件觸發(fā)器，是向多個(gè)廣播事件或推送值的唯一方法。

原文:http://reactivex.io/rxjs/manu...

RxJS 是一個(gè)使用可觀察量(observable)隊(duì)列解決異步編程和基于事件編程的js庫。
他提供了一個(gè)核心的類型Observable，和若干附屬類型(Observer、Schedulers、Subject)以及一組的操作符(map,filter,reduce,every等等)，可以像操作集合一樣處理異步事件流。

Think of RxJS as Lodash for events.

為了較好的管理事件隊(duì)列，響應(yīng)式編程組合了觀察者模式和迭代器模式，并且提供了操作集合的函數(shù)式編程方法。

RxJS提供了幾個(gè)管理異步事件的核心概念:

Observable: 可觀察量，代表了一個(gè)由未來獲取到的值或事件組成的集合。

Observer:觀察者，是一個(gè)集合，由監(jiān)聽Observable推送消息的一個(gè)或多個(gè)回調(diào)函數(shù)組成。

Subscription:訂閱過程，代表了Observable的執(zhí)行過程，通常用來取消或者中斷Observable的執(zhí)行過程。

Operators: 操作符是一些純函數(shù)，用來采用函數(shù)式編程風(fēng)格處理集合，比如：map,filter,concat,flatMap等等。

Subject: Subject相當(dāng)于事件觸發(fā)器(EventEmitter)，是向多個(gè)Observer廣播事件或推送值的唯一方法。

Schedulers: 調(diào)度者集中了派發(fā)器(dispatcher)控制并發(fā)，允許我們?cè)谑褂妙愃?b>setTimeout(),requestAnimationFrame或其他方法時(shí)，協(xié)調(diào)計(jì)算。

第一個(gè)例子

通常你會(huì)像下面這樣注冊(cè)事件偵聽器:

var button = document.querySelector("button");
button.addEventListener("click", () => console.log("Clicked!"));

使用RxJS，你可以創(chuàng)建一個(gè)observable，處理相同的邏輯:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .subscribe(() => console.log("Clicked!"));
純函數(shù)

采用純函數(shù)生產(chǎn)數(shù)據(jù)，使RxJS的能力很強(qiáng)，也可以減少代碼出錯(cuò)的幾率。

通常，一個(gè)不純函數(shù)中的部分代碼可能會(huì)擾亂狀態(tài)，類似:

var count = 0;
var button = document.querySelector("button");
button.addEventListener("click", () => console.log(`Clicked ${++count} times`));

使用RxJS，你可以將狀態(tài)隔離起來:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

例子中的scan操作符類似于數(shù)組的reduce()方法。他將一個(gè)值傳遞給回調(diào)函數(shù)，之后的返回值則會(huì)作為一個(gè)輸入被傳遞給下一個(gè)時(shí)間點(diǎn)上的回調(diào)函數(shù)。

流

為了控制Observable實(shí)例中事件流，RxJS提供了各種各樣的操作符。

以下的例子展示了使用純js，實(shí)現(xiàn)至少間隔1秒發(fā)出一次點(diǎn)擊事件的代碼:

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector("button");
button.addEventListener("click", () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

使用RxJS，可以這樣:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

還有很多控制流的操作符，比如:filter,delay,debounceTime,take,takeUntil,distinct,distinctUntilChanged等等。

值

你可以改變Observable流中的值。

以下的例子，使用純js實(shí)現(xiàn)了獲取每次click事件時(shí)鼠標(biāo)x坐標(biāo)的值，并進(jìn)行了計(jì)算:

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector("button");
button.addEventListener("click", (event) => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count)
    lastClick = Date.now();
  }
});

使用RxJS，你可以這樣:

var button = document.querySelector("button");
Rx.Observable.fromEvent(button, "click")
  .throttleTime(1000)
  .map(event => event.clientX)
  .scan((count, clientX) => count + clientX, 0)
  .subscribe(count => console.log(count));

其他用來加工和生產(chǎn)值的操作符有:pluck,pairwise,sample等等。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83630.html

相關(guān)文章

  • [譯]RxJS文檔04——Observer 觀察者

    摘要：原文什么是觀察者是流推送數(shù)據(jù)的用戶。觀察者們就是一組函數(shù)的集合，監(jiān)聽著每一個(gè)流推送出的不同類型的通知，包括和。如果沒有為某個(gè)類型的通知提供，流的執(zhí)行過程仍然會(huì)照常進(jìn)行，但是響應(yīng)的通知將會(huì)被忽略，因?yàn)橛^察者沒有提供相應(yīng)的來接收。 原文: http://reactivex.io/rxjs/manu... 什么是Observer？ 觀察者(Observer)是Observable流推送數(shù)據(jù)的...

    xiaolinbang 評(píng)論0 收藏0

  • [譯] RxJS文檔05——Subscription

    摘要：原文什么是是一個(gè)對(duì)象，表示一種可被處置的資源，通常指代一個(gè)流的執(zhí)行過程。在之前版本中的，被稱為可被處置的。本質(zhì)是一個(gè)含有方法，用來釋放資源或者取消流執(zhí)行的對(duì)象。 原文: http://reactivex.io/rxjs/manu... 什么是Subscription? Subscription是一個(gè)對(duì)象，表示一種可被處置的資源，通常指代一個(gè)Observable流的執(zhí)行過程。 Subsc...

    walterrwu 評(píng)論0 收藏0

  • [譯]RxJS文檔08——操作符分類

    摘要：原文各種各樣的操作符按照不同的目的，分類幾個(gè)大類創(chuàng)建，變化，過濾，組合，廣播，錯(cuò)誤處理，使用工具等等。 原文:http://reactivex.io/rxjs/manu... 各種各樣的操作符按照不同的目的，分類幾個(gè)大類:創(chuàng)建，變化，過濾，組合，廣播（multicasting），錯(cuò)誤處理，使用工具等等。 以下的列表，按照分類羅列了全部的操作符： 創(chuàng)建操作符 Creation Opera...

    phoenixsky 評(píng)論0 收藏0

  • [譯]RxJS文檔07——Operators 操作符

    摘要：原文提供的操作符非常有用，盡管是基礎(chǔ)對(duì)象。我們稱這種現(xiàn)象為操作符訂閱鏈。靜態(tài)操作符是依賴于類的一組純函數(shù)，通常被用來從頭創(chuàng)建流。最常見的靜態(tài)操作符類型是所謂的創(chuàng)建操作符。貫穿本站的文檔，我們會(huì)廣泛的使用珠寶圖去解釋操作符是如何生效的。 原文:http://reactivex.io/rxjs/manu... Operators RxJS提供的操作符非常有用，盡管Observable是基礎(chǔ)...

    cooxer 評(píng)論0 收藏0

  • [譯] RxJS文檔02—— Observable 可觀察量

    摘要：原文可觀察量是一種能惰性推送的集合，他可以包含多個(gè)值。是一種惰性計(jì)算方式，會(huì)在迭代中同步的返回到無限個(gè)可能的話返回值。使用一種處理方法，最終可能會(huì)或可能不會(huì)返回一個(gè)值。無論是同步方式還是異步方式，都可以擇其一來傳遞返回值。 原文：http://reactivex.io/rxjs/manu... Observable 可觀察量是一種能惰性推送的集合，他可以包含多個(gè)值。下面的表格對(duì)比了推送...

    A Loity 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<