国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]Flux入門

Ashin / 2072人閱讀

摘要：正式入坑我將按順序解釋概念，并且一個(gè)一個(gè)地構(gòu)建它們。視圖的和調(diào)度員本質(zhì)上是一個(gè)加入了額外規(guī)則的事件系統(tǒng)。它來(lái)廣播事件并注冊(cè)回調(diào)。這描述了我們的，我們稱之為。然后，會(huì)響應(yīng)已分派的操作這是處理調(diào)度回調(diào)的傳統(tǒng)方式。

原文地址：https://blog.andrewray.me/flu... ，作者：Andrew Ray

TL;DR 當(dāng)我在努力學(xué)習(xí)Flux時(shí)，我希望有人告訴我：它并不簡(jiǎn)單，也沒(méi)有好的文檔可以查，并且有許多變化的部分。

我需要使用Flux嗎？

如果你的應(yīng)用程序需要處理動(dòng)態(tài)數(shù)據(jù)（dynamic data）的話，那么答案就是yes，你可能需要使用Flux。

如果你的應(yīng)用程序僅僅是無(wú)需共享狀態(tài)靜態(tài)視圖（static view），并且你從不保存也不更新數(shù)據(jù)，那么你不需要使用Flux，F(xiàn)lux不會(huì)給你帶來(lái)任何好處。

為什么是Flux?

皮一下，因?yàn)镕lux是個(gè)適度復(fù)雜的主意，為啥要增加復(fù)雜度呢？

90％的iOS應(yīng)用程序是表格視圖中的數(shù)據(jù)。iOS工具包具有良好定義的視圖和數(shù)據(jù)模型可以讓?xiě)?yīng)用開(kāi)發(fā)變得簡(jiǎn)單。

但是在前端（Font End：HTML,JS,CSS），我們甚至都沒(méi)有。相反，我們遇到一個(gè)很大的問(wèn)題：沒(méi)有人知道應(yīng)該如何去構(gòu)建一個(gè)前端應(yīng)用。我從事這個(gè)行業(yè)多年，從來(lái)沒(méi)人教給我“最佳實(shí)踐”，相反，他們教了我好多“庫(kù)（libraries）”，諸如jQuery，Angular，Backbone等等。但是真正的問(wèn)題、數(shù)據(jù)流，仍然避開(kāi)了我們。

什么是Flux？

Flux是一個(gè)用來(lái)描述具有非常特定事件和監(jiān)聽(tīng)的“單向”數(shù)據(jù)流的詞。沒(méi)有官方的Flux庫(kù)，但是你需要Flux Dispatcher和任何的JavaScript event library。

官方文檔寫(xiě)的就像某人的意識(shí)流一樣，從這里開(kāi)始學(xué)習(xí)是不太好的。但是一旦你掌握了Flux，它可以幫助你填補(bǔ)空白。

不要試圖把Flux同MVC架構(gòu)進(jìn)行比較，它們的相似之處只會(huì)令人困惑。

正式入坑！我將按順序解釋概念，并且一個(gè)一個(gè)地構(gòu)建它們。

1.視圖的“Dispatch”和“Actions”

Dispatcher（調(diào)度員）本質(zhì)上是一個(gè)加入了額外規(guī)則的事件系統(tǒng)。它來(lái)廣播事件并注冊(cè)回調(diào)。全局的dispatcher只有唯一的一個(gè)，你應(yīng)該使用Facebook Dispatcher Library。實(shí)例化非常容易：

var AppDispatcher = new Dispatcher();

假設(shè)你的應(yīng)用程序有一個(gè)“新建”按鈕來(lái)向列表添加項(xiàng)目。

點(diǎn)擊會(huì)發(fā)生什么？你的視圖會(huì)調(diào)度一個(gè)非常具體的“操作”，其中包含操作名稱和新項(xiàng)目數(shù)據(jù)：

createNewItem: function( evt ) {

    AppDispatcher.dispatch({
        actionName: "new-item",
        newItem: { name: "Marco" } // example data
    });

}

“action”是Facebook創(chuàng)造的另一個(gè)詞。它是一個(gè)JavaScript對(duì)象，用以描述我們想要做什么事情，以及做這件事我們需要的數(shù)據(jù)。正如你所見(jiàn)到的，我們要做的事情就是添加一個(gè)new-item，我們需要的數(shù)據(jù)就是項(xiàng)目name。

2."Store"響應(yīng)調(diào)度的操作

像Flux一樣，“Store”這個(gè)詞也是Facebook創(chuàng)造的.對(duì)于我們的應(yīng)用程序，我們需要列表的特定邏輯和數(shù)據(jù)集合。這描述了我們的Store，我們稱之為L(zhǎng)istStore。

Store是一個(gè)單體對(duì)象，意味著你可能不能通過(guò)“new”關(guān)鍵字來(lái)聲明它，應(yīng)用程序中每個(gè)Store里只有一個(gè)實(shí)例。

// Single object representing list data and logic
var ListStore = {

    // Actual collection of model data
    items: []

};

然后，Store會(huì)響應(yīng)已分派的操作：

var ListStore = …

// Tell the dispatcher we want to listen for *any*
// dispatched events
AppDispatcher.register( function( payload ) {

    switch( payload.actionName ) {

        // Do we know how to handle this action?
        case "new-item":

            // We get to mutate data!
            ListStore.items.push( payload.newItem );
            break;

    }

});

這是Flux處理調(diào)度回調(diào)的傳統(tǒng)方式。每個(gè)payload包含一個(gè)action的名稱（actionName）和數(shù)據(jù)（newItem），switch語(yǔ)句確定Store是否應(yīng)該響應(yīng)action，并且知道根據(jù)action的類型處理數(shù)據(jù)變化。

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

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

相關(guān)文章

  • 【譯】展示型組件和容器型組件(作者：Dan Abramov，Redux的開(kāi)發(fā)者)

    摘要：我的教程可能也會(huì)幫你一把其他的二分法展示型組件和容器型組件這種分類并非十分嚴(yán)格，這是按照它們的目的進(jìn)行分類。在我看來(lái)，展示型組件往往是無(wú)狀態(tài)的純函數(shù)組件，容器型組件往往是有狀態(tài)的純類組件。不要把展示型組件和容器型組件的劃分當(dāng)成教條。 本文譯自Presentational and Container Components，文章的作者是Dan Abramov，他同時(shí)也是Redux和Crea...

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

  • Flux7 Docker 系列教程（八）：Docker Remote API

    摘要：本系列教程翻譯自，系列共有九篇，本文譯自第八篇。是將會(huì)用來(lái)取代命令的工具。準(zhǔn)備示例系統(tǒng)是，配置文件在。修改完畢后，重啟。列出所有容器創(chuàng)建新容器檢查容器用于獲取容器底層信息。進(jìn)程列表獲取容器內(nèi)運(yùn)行進(jìn)程的列表。下篇文章介紹的是用于鏡像操作的。 本系列教程翻譯自 Flux7 Docker Tutorial Series，系列共有九篇，本文譯自第八篇 Part 8: Docker Rem...

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

  • Flux7 Docker 系列教程（八）：Docker Remote API

    摘要：本系列教程翻譯自，系列共有九篇，本文譯自第八篇。是將會(huì)用來(lái)取代命令的工具。準(zhǔn)備示例系統(tǒng)是，配置文件在。修改完畢后，重啟。列出所有容器創(chuàng)建新容器檢查容器用于獲取容器底層信息。進(jìn)程列表獲取容器內(nèi)運(yùn)行進(jìn)程的列表。下篇文章介紹的是用于鏡像操作的。 本系列教程翻譯自 Flux7 Docker Tutorial Series，系列共有九篇，本文譯自第八篇 Part 8: Docker Rem...

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

  • Redux、Flux、Vuex

    摘要：結(jié)構(gòu)和數(shù)據(jù)流一個(gè)單向數(shù)據(jù)流是模式的核心，上面示圖應(yīng)該是程序員心中主要的模型圖。 前言 這篇文章不會(huì)用具體的代碼去闡述redux、flux或者vuex，因?yàn)槲矣X(jué)得它們所帶來(lái)的更是一種編程思想。 前端進(jìn)化和框架演變 在很久以前，前端沒(méi)有MVVM的概念，MVVM是對(duì)MVC細(xì)化的說(shuō)法（個(gè)人覺(jué)得兩者區(qū)別不大），MVC的模式一直在后臺(tái)使用，效果和優(yōu)點(diǎn)都很明顯。 后來(lái)前端工程師仿照MVC模式開(kāi)發(fā)了很...

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

  • Flux再進(jìn)化：Introducing Relay and GraphQL譯

    摘要：它的設(shè)計(jì)使得即使是大型團(tuán)隊(duì)也能以高度隔離的方式應(yīng)對(duì)功能變更。獲取數(shù)據(jù)數(shù)據(jù)變更性能，都是讓人頭痛的問(wèn)題。通過(guò)維護(hù)組件與數(shù)據(jù)間的依賴在依賴的數(shù)據(jù)就緒前組件不會(huì)被渲染為開(kāi)發(fā)者提供更加可預(yù)測(cè)的開(kāi)發(fā)環(huán)境。這杜絕了隱式的數(shù)據(jù)依賴導(dǎo)致的潛在。 關(guān)于Relay與GraphQL的介紹 原文：Introducing Relay and GraphQL 視頻地址（強(qiáng)烈建議觀看）：https://www.y...

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

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

0條評(píng)論

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