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

資訊專欄INFORMATION COLUMN

狀態(tài)決定視圖——基于狀態(tài)的前端開發(fā)思考

miya / 2100人閱讀

摘要：前端與狀態(tài)現(xiàn)在的前端開發(fā)中，對(duì)于狀態(tài)的管理是重中之重。有限狀態(tài)機(jī)那么如何更好的管理前端軟件的復(fù)雜度的狀態(tài)機(jī)思想給出了自己的答案。有限狀態(tài)機(jī)并不是一個(gè)復(fù)雜的概念簡(jiǎn)單說(shuō)，它有三個(gè)特征狀態(tài)總數(shù)是有限的。

前提

在現(xiàn)在的前端社區(qū)，關(guān)于MVVM、Model driven view 之類的概念，已經(jīng)算是非常普及了。React/Vue 這類框架可以算是代表。
而自己雖然有 React/Vue 的使用經(jīng)驗(yàn)，也了解 MVVM，狀態(tài)機(jī)等核心概念，但是卻一直沒有很好的應(yīng)用。

直到前幾天接手一個(gè)組件開發(fā)的需求，寫之前嘗試細(xì)細(xì)分析時(shí)，才突然想通這之間的聯(lián)系。
Emmm……內(nèi)容比較淺，并不是什么了不得的神兵利器。更多的是個(gè)人的感悟。

個(gè)人困惑

自己在前一段時(shí)間里，陷入了如何寫好代碼的困惑之中，在學(xué)習(xí)了《重構(gòu)》、《代碼整潔之道》等知識(shí)之后，確實(shí)有一些好轉(zhuǎn)。但是寫代碼總是要重構(gòu)才能好一些些，也是很麻煩的事情，于是就有了如下的思考。

前端與狀態(tài)

現(xiàn)在的前端開發(fā)中，對(duì)于狀態(tài)的管理是重中之重。
而使用 React/Vue 這類 MVVM 框架，通過(guò)組件化、自動(dòng)綁定等方式，能有效降低前端開發(fā)時(shí)的復(fù)雜度。

MVVM

提到狀態(tài)就不得不提到MVVM框架，而MVVM的框架的核心，并不是雙向綁定或者依賴收集什么的，而是：狀態(tài)決定視圖。
用代碼描述就是：

View = ViewModel(Model)

理想情況下，ViewModel是純函數(shù)，給定相同的Model，產(chǎn)出相同的View。

隨著前端的發(fā)展，Web應(yīng)用的狀態(tài)管理愈發(fā)復(fù)雜，然而由于前端的一些特性：

代碼開源

請(qǐng)求透明

不保存用戶數(shù)據(jù)

...

也決定了前端只負(fù)責(zé)整個(gè)Web應(yīng)用上的視覺和交互層，凡是涉及到數(shù)據(jù)的，后端必然要做嚴(yán)謹(jǐn)?shù)男ｒ?yàn)，不相信任何前端的請(qǐng)求。
所以前端的核心工作，就是提供一個(gè)友善的人機(jī)交互的操作界面。當(dāng)然，這也符合廣義上的前端定義。

而 MVVM 的出現(xiàn)，能有效的提高前端開發(fā)的效率和品質(zhì)，從而得到了大規(guī)模的發(fā)展與應(yīng)用。

復(fù)雜度

在《代碼大全2》這本書中，有句讓我印象深刻的話：

軟件工程的本質(zhì)即是管理復(fù)雜度。

細(xì)細(xì)想來(lái)，也確實(shí)是如此。
前端開發(fā)自然也屬于軟件開發(fā)，管理復(fù)雜度恰恰也是前端目前的核心問(wèn)題。

有限狀態(tài)機(jī)

那么如何更好的管理前端軟件的復(fù)雜度？ React 的狀態(tài)機(jī)思想給出了自己的答案。
狀態(tài)機(jī)是我在學(xué)習(xí)計(jì)算機(jī)中，時(shí)常聽到的一個(gè)概念，比如學(xué) React 時(shí)，會(huì)提到 React 就是個(gè)狀態(tài)機(jī)，聽團(tuán)隊(duì)關(guān)于編譯原理的分享時(shí)，也會(huì)聽到狀態(tài)機(jī)。所以就去專門補(bǔ)習(xí)了這個(gè)概念。

有限狀態(tài)機(jī)在維基百科上的描述如下：

有限狀態(tài)機(jī)（英語(yǔ)：finite-state machine，縮寫：FSM）又稱有限狀態(tài)自動(dòng)機(jī)，簡(jiǎn)稱狀態(tài)機(jī)，是表示有限個(gè)狀態(tài)以及在這些狀態(tài)之間的轉(zhuǎn)移和動(dòng)作等行為的數(shù)學(xué)模型。

有限狀態(tài)機(jī)并不是一個(gè)復(fù)雜的概念

簡(jiǎn)單說(shuō)，它有三個(gè)特征：



狀態(tài)總數(shù)（state）是有限的。


任一時(shí)刻，只處在一種狀態(tài)之中。


某種條件下，會(huì)從一種狀態(tài)轉(zhuǎn)變（transition）到另一種狀態(tài)。
它對(duì)JavaScript的意義在于，很多對(duì)象可以寫成有限狀態(tài)機(jī)。
啟示

隨著對(duì)狀態(tài)決定視圖與狀態(tài)機(jī)兩個(gè)概念的學(xué)習(xí)與思考，于是有了新的思路：

狀態(tài)決定視圖，Action則負(fù)責(zé)完成狀態(tài)間的轉(zhuǎn)移，那么寫好代碼的核心在于，用最恰當(dāng)?shù)臓顟B(tài)去描述界面，用最恰當(dāng)?shù)膭?dòng)作去完成狀態(tài)間的轉(zhuǎn)移。

Emmm……很簡(jiǎn)單的概念，但是自己之前一直沒有想的很清楚。

總結(jié)

隨著對(duì)這個(gè)概念的了解，自己在開發(fā)時(shí)的思路也愈發(fā)的清晰化。
自己現(xiàn)在寫代碼之前，會(huì)思考一系列問(wèn)題，想清楚再下手：

這個(gè)頁(yè)面有幾種狀態(tài)（初始化狀態(tài)？成功狀態(tài)？失敗狀態(tài)？出錯(cuò)狀態(tài)？）

描述這些狀態(tài)需要什么參數(shù)

在什么時(shí)候轉(zhuǎn)變狀態(tài)，需要改變哪些部分

把這些問(wèn)題想清楚了，剩下的工作就是跟著思路，完成數(shù)據(jù)與UI部分。
以上就是自己的思路了，如果各位有什么建議的話，歡迎和我交流呀 ? ~

參考資料

有限狀態(tài)機(jī) - 維基百科

JavaScript與有限狀態(tài)機(jī)

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

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

相關(guān)文章

  • 頁(yè)面搭建工具總結(jié)及架構(gòu)思考

    摘要：在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁(yè)面工具的需求剛開始其實(shí)并不想接項(xiàng)目因?yàn)閺臍v史以及現(xiàn)實(shí)原因來(lái)看個(gè)性化及動(dòng)態(tài)渲染都是很難解決的痛點(diǎn)各種頁(yè)面搭建工具的不溫不火早已說(shuō)明了這條路并沒有這么好走但從另一個(gè)方面來(lái)說(shuō)既然有了這樣的需求那 在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁(yè)面工具的需求,剛開始其實(shí)并不想接項(xiàng)目,因?yàn)閺臍v史以及現(xiàn)實(shí)原因來(lái)看,個(gè)性化及動(dòng)態(tài)渲染都是很難解決的痛...

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

  • 重新設(shè)計(jì) Redux

    摘要：相關(guān)狀態(tài)父組件傳遞給子組件的狀態(tài)。外部狀態(tài)狀態(tài)是可以從視圖庫(kù)中移出來(lái)的，然后可以使用提供者消費(fèi)者模式把狀態(tài)重新連接回視圖庫(kù)。重新設(shè)計(jì)在我看來(lái)，重寫是有其必要性的，至少有以下個(gè)方面可以改進(jìn)得更友好。 Redux 學(xué)習(xí)起來(lái)很困難？寫起代碼來(lái)很啰嗦？一起來(lái)看看 Rematch 的作者對(duì) Redux 的思考和簡(jiǎn)化吧~ 原文：《Redesigning Redux》, Shawn McKay 都過(guò)...

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

  • 前端框架這么多，該如何抉擇？

    摘要：在引起狀態(tài)變化的時(shí)刻，框架自動(dòng)觸發(fā)臟檢查，也可以手動(dòng)執(zhí)行臟檢查，直接操作更新視圖。最后，說(shuō)了這么多，大家在具體選型時(shí)還是要首先分析自己的需求和現(xiàn)狀，然后再做選擇。 作為一個(gè)軟件開發(fā)者，最大的挑戰(zhàn)就是在不斷涌現(xiàn)的新技術(shù)中進(jìn)行取舍，持續(xù)學(xué)習(xí)是從事這一行業(yè)的必備技能。在這個(gè)領(lǐng)域里，技術(shù)更新最快地又非前端莫屬了。各種框架的出現(xiàn)、版本的更新此起彼伏，呈現(xiàn)出一派欣欣向榮之景。 在項(xiàng)目中必不可少的便...

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

  • 前端框架這么多，該如何抉擇？

    摘要：在引起狀態(tài)變化的時(shí)刻，框架自動(dòng)觸發(fā)臟檢查，也可以手動(dòng)執(zhí)行臟檢查，直接操作更新視圖。最后，說(shuō)了這么多，大家在具體選型時(shí)還是要首先分析自己的需求和現(xiàn)狀，然后再做選擇。 作為一個(gè)軟件開發(fā)者，最大的挑戰(zhàn)就是在不斷涌現(xiàn)的新技術(shù)中進(jìn)行取舍，持續(xù)學(xué)習(xí)是從事這一行業(yè)的必備技能。在這個(gè)領(lǐng)域里，技術(shù)更新最快地又非前端莫屬了。各種框架的出現(xiàn)、版本的更新此起彼伏，呈現(xiàn)出一派欣欣向榮之景。 在項(xiàng)目中必不可少的便...

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

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

0條評(píng)論

miya

男|高級(jí)講師

TA的文章

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