成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

從命令式到響應(yīng)式（一）

JayChen / 2849人閱讀

摘要：響應(yīng)式命令式這兩種編程風(fēng)格的思維方式是完全相反的。第二種方式是工人主動(dòng)去找工人索取生產(chǎn)手機(jī)所要的零件，然后生產(chǎn)一臺(tái)完整的手機(jī)，這兩種方式就對(duì)應(yīng)的響應(yīng)式和命令式。

angular2中內(nèi)置了rxjs，雖然框架本身并沒(méi)有強(qiáng)制開(kāi)發(fā)者使用響應(yīng)式風(fēng)格來(lái)組織代碼，但是從框架開(kāi)發(fā)團(tuán)隊(duì)的角度可以看出他們必然是認(rèn)同這種編程風(fēng)格的。rxjs本質(zhì)是基于函數(shù)式編程的響應(yīng)式風(fēng)格的庫(kù)，函數(shù)式相對(duì)于面向?qū)ο髞?lái)說(shuō)更加抽象，響應(yīng)式的思維方式和命令式的思考方式又截然相反，所以導(dǎo)致大多數(shù)的開(kāi)發(fā)者開(kāi)始接觸時(shí)覺(jué)得非常不適應(yīng)，認(rèn)為門檻太高，其實(shí)不然，只要思維方式能轉(zhuǎn)變，你會(huì)覺(jué)得響應(yīng)式是更加順其自然的事情。響應(yīng)式涉及的知識(shí)點(diǎn)很多，這篇文章只能做到管中窺豹，讓大家在感性上對(duì)它有一個(gè)認(rèn)識(shí)。

面向?qū)ο?vs 函數(shù)式

抽象層級(jí)不同：簡(jiǎn)單來(lái)說(shuō)，面向?qū)ο蟪橄罅宋铮瘮?shù)式抽象了行為。最簡(jiǎn)單的例子:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.ageAfterYears = function(years) {
    console.log(this.age + years);
}

var john = new Person("John", 18);

面向?qū)ο蟮姆绞?/p> 

john.ageAfterYears(5) // 23;

函數(shù)式的方式：

function getAge(baseAge) {
    return (obj) => console.log(obj.age + baseAge);
}

const ageAfterYears = getAge(5);

ageAfterYears(john); // 23；

這段代碼很簡(jiǎn)單，但足以說(shuō)明問(wèn)題，使用面向?qū)ο蟮姆绞綍r(shí)，我們直接調(diào)用person類的方法，計(jì)算出實(shí)例的年齡，我們會(huì)很在乎這個(gè)對(duì)象上是否提供這么一個(gè)方法。但使用函數(shù)式時(shí)，ageAfterYears函數(shù)并不在乎傳入的對(duì)對(duì)象上是否有那個(gè)方法，只需要傳入的對(duì)象有上age屬性，它就可以得一個(gè)結(jié)果，我們更在乎的是這種行為是否正確，例如計(jì)算函數(shù)的行為是加，而不是減，或者其它。

響應(yīng)式 vs 命令式

這兩種編程風(fēng)格的思維方式是完全相反的。假設(shè)一個(gè)生產(chǎn)手機(jī)的過(guò)程，第一種方式是工人 A 先處理零件，然后交給工人 B， 工人 B 接收后生產(chǎn)出一臺(tái)手機(jī)。第二種方式是工人 B 主動(dòng)去找工人 A 索取生產(chǎn)手機(jī)所要的零件，然后生產(chǎn)一臺(tái)完整的手機(jī)，這兩種方式就對(duì)應(yīng)的響應(yīng)式和命令式?？梢钥闯觯憫?yīng)式更適合于流水線式的生產(chǎn)，因?yàn)樗?jié)省了大量的溝通成本。尤其重要的一點(diǎn)是工人 B的行為是‘懶’的，它不會(huì)主動(dòng)的去爭(zhēng)取任務(wù)，而是一直在等待任務(wù)的到來(lái)。在程序中，數(shù)據(jù)就是我們產(chǎn)品的零件，因此也適合這種流水線式的處理。假如我們需要控制用戶在一個(gè)按鈕上每秒最多只能點(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} timers`);
        lastClick = Date.now();
    }
});

使用響應(yīng)式：

var button = button.querySelector("button");

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

從代碼上可以看出，命令式的代碼量更大，而響應(yīng)式的只有區(qū)區(qū)幾行，當(dāng)然你可以說(shuō)這是因?yàn)槭褂昧藃xjs封裝的庫(kù)，但更為重要的是在命令式的代碼中變量的數(shù)量更多，尤為糟糕的是這些變量相對(duì)于主邏輯來(lái)說(shuō)處于‘全局‘的位置，而javascript中全局變量是魔鬼，我們不得不隨時(shí)小心這些定時(shí)炸彈。

上面已經(jīng)提到過(guò)響應(yīng)式的處理過(guò)程是’懶‘的，除此之外，它的優(yōu)點(diǎn)可以概括如下

所有數(shù)據(jù)處理的過(guò)程使用操作符的全部都是純函數(shù)，它們只是單純的接收輸入，產(chǎn)生輸出，并不會(huì)對(duì)輸入的值做出任何改變。

rxjs實(shí)現(xiàn)的 Observable 是一個(gè)可以產(chǎn)生多個(gè)值序列，是一個(gè) push 類型的系統(tǒng)，這和 pull 類型的函數(shù)系統(tǒng)有很大的不同。

push vs pull

這里使用 pull 和 push 來(lái)描述值的生產(chǎn)者和消費(fèi)者之間是如何發(fā)生聯(lián)系的，它們是兩種完全不同的協(xié)議。

在pull的系統(tǒng)中，值的消費(fèi)決定什么時(shí)間從生產(chǎn)者上獲取數(shù)據(jù)，生產(chǎn)者本身并不關(guān)心數(shù)據(jù)什么時(shí)間分發(fā)給消費(fèi)者。

每一個(gè)javascript函數(shù)都可以看作一個(gè) pull 類型的系統(tǒng)。函數(shù)可以產(chǎn)生值，但這是通過(guò)調(diào)用者主動(dòng)調(diào)用函數(shù)，函數(shù)運(yùn)行產(chǎn)生出值返回給調(diào)用者的方式進(jìn)行的，所以可以理解為調(diào)用者主動(dòng)去函數(shù)上拉取了值。

ES2015中介紹另外兩種 pull 類型的系統(tǒng)，generator函數(shù) 和 iterator。對(duì)于它們來(lái)講，遍歷器對(duì)象的 next 方法可以視作值的消費(fèi)者，通過(guò)iterator.next()可以獲取到多個(gè)值。

Producer Consumer
pull 被動(dòng)：當(dāng)被調(diào)用時(shí)產(chǎn)生值 主動(dòng)：決定何時(shí)發(fā)起調(diào)用
push 主動(dòng)：按自身的設(shè)置產(chǎn)生值 被動(dòng)：響應(yīng)接收到的值

在push的系統(tǒng)中，生產(chǎn)者決定什么時(shí)候發(fā)送值給消費(fèi)者，消費(fèi)者并不知道什么時(shí)候可以接收到值。

ES6中的 promise 就是一個(gè)非常典型的 push 系統(tǒng)，promise 將 resolve 的結(jié)果傳遞給注冊(cè)在它內(nèi)部的回調(diào)函數(shù)，這與普通的函數(shù)有很大的不同，回調(diào)函數(shù)何時(shí)可以接收到數(shù)據(jù)完全取決于 promise 什么時(shí)間向它傳遞數(shù)據(jù)。

rxjs的 Observable 也是一種 push 類型的系統(tǒng)，一個(gè) Observable 可以產(chǎn)生多個(gè)值，然后推送給它的訂閱者。

Function 是一個(gè) ‘懶’ 的求值過(guò)程，只有在被調(diào)用時(shí)它才會(huì)同步的返回一個(gè)值給調(diào)用者。

generator 也是一個(gè) ’懶‘ 的求值過(guò)種，在遍歷的過(guò)程中同步的返回0個(gè)或多個(gè)值給調(diào)用者。

Promise 經(jīng)過(guò)運(yùn)算后可能產(chǎn)生一個(gè)值，當(dāng)然也可能產(chǎn)生一個(gè)錯(cuò)誤。

Observable 也是一個(gè)‘懶’的求值過(guò)程，當(dāng)它被訂閱后可以同步或者異步的產(chǎn)生出0個(gè)或者無(wú)限多個(gè)值給調(diào)用者，這個(gè)過(guò)程將一直持續(xù)到訂閱被取消或者流結(jié)束。

今天先寫到這里，沒(méi)有過(guò)多的代碼， 更沒(méi)有涉及到angular中如何去應(yīng)用響應(yīng)式，個(gè)人認(rèn)為寫代碼的過(guò)程其實(shí)不難，難的是思維方式的轉(zhuǎn)換，希望能從文字的描述上給大家一點(diǎn)啟發(fā)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97265.html

相關(guān)文章

  • 從命令式到響應(yīng)式（六）

    摘要：從這個(gè)系列的第一章開(kāi)始到第五章，基于的響應(yīng)式編程的基礎(chǔ)知識(shí)基本上就介紹完了，當(dāng)然有很多知識(shí)點(diǎn)沒(méi)有提到，比如，等，不是他們不重要，而是礙于時(shí)間精力等原因沒(méi)辦法一一詳細(xì)介紹。 從這個(gè)系列的第一章開(kāi)始到第五章，基于rxjs的響應(yīng)式編程的基礎(chǔ)知識(shí)基本上就介紹完了，當(dāng)然有很多知識(shí)點(diǎn)沒(méi)有提到，比如 Scheduler, behaviorSubject，replaySubject等，不是他們不重要，...

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

  • 從命令式到響應(yīng)式（七）

    摘要：響應(yīng)式組件上節(jié)中錯(cuò)誤的把添加到了中，實(shí)際中它返回的是一個(gè)，先調(diào)整過(guò)來(lái)。將這兩條流合并成一條請(qǐng)求流。利用上面實(shí)現(xiàn)的方法，可以很方便的拿到響應(yīng)流，即。由于不同于，請(qǐng)求和響應(yīng)一一對(duì)應(yīng)的很好，所以這里可能需要一定的條件來(lái)拿到請(qǐng)求對(duì)應(yīng)的響應(yīng)。 上回搭建了一個(gè)組件以及它所依賴的服務(wù)的基本結(jié)構(gòu)，這節(jié)接著它繼續(xù)。另外從本節(jié)開(kāi)始，統(tǒng)一采用rxjs6的風(fēng)格，6和5在寫法上最大的不同就是棄用鏈?zhǔn)秸{(diào)用，而采用...

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

  • 從命令式到響應(yīng)式（八）

    摘要：最近有同學(xué)在使用時(shí)總是不能如愿拿到自己想要的數(shù)據(jù)，說(shuō)到底還是沒(méi)有能把思維從命令式的習(xí)慣中轉(zhuǎn)換過(guò)來(lái)。響應(yīng)式的編程風(fēng)格中，數(shù)據(jù)應(yīng)該在流內(nèi)完成轉(zhuǎn)換，合并，過(guò)濾，而不是取出來(lái)，一頓操作再丟回流里。 最近有同學(xué)在使用rxjs時(shí)總是不能如愿拿到自己想要的數(shù)據(jù)，說(shuō)到底還是沒(méi)有能把思維從命令式的習(xí)慣中轉(zhuǎn)換過(guò)來(lái)。 Observable !== 異步 && Observable !== 同步 如題，請(qǐng)默念...

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

  • 從命令式到響應(yīng)式（三）

    摘要：它有三個(gè)方法，用來(lái)通知下一個(gè)值是什么方法在上產(chǎn)生錯(cuò)誤時(shí)通知觀察者，方法用來(lái)通知觀察者當(dāng)前流上的值已經(jīng)發(fā)射完畢。除此之外在我們不需要訂閱時(shí)，觀察者還應(yīng)該能夠安全的退出。 上次說(shuō)了響應(yīng)式中使用的設(shè)計(jì)模式，今天我們主要來(lái)看rxjs中實(shí)現(xiàn)響應(yīng)式的三大件，Observable, subject 和 Subscription; Observable--可觀測(cè)序列 在第一節(jié)中介紹過(guò) push 類型的...

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

  • 翻譯連載 | 第 10 章：異步的函數(shù)式（下）－《JavaScript輕量級(jí)函數(shù)式編程》 |《你不知

    摘要：而數(shù)組里則是為每一個(gè)值運(yùn)行一次映射函數(shù)，無(wú)論這個(gè)值何時(shí)加入，然后把它返回到里。上一章翻譯連載第章異步的函數(shù)式上輕量級(jí)函數(shù)式編程你不知道的姊妹篇原創(chuàng)新書移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson－《You-Dont-Know-JS》作者 關(guān)于譯者：這是一個(gè)流淌著滬江血液的純粹工程：認(rèn)真，是 ...

    魏明 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<