資訊專欄INFORMATION COLUMN
摘要：之前談到過很多次數(shù)據(jù)驅(qū)動(dòng)的理解，這次通過實(shí)際項(xiàng)目檢驗(yàn)了一下自己的想法。對(duì)于數(shù)據(jù)驅(qū)動(dòng)這種模式，至少從數(shù)據(jù)層，可以規(guī)避，做一層數(shù)據(jù)變化的效驗(yàn)這個(gè)和寫服務(wù)端單側(cè)差不多。數(shù)據(jù)驅(qū)動(dòng)和有點(diǎn)類似，只是借用在單頁面上實(shí)現(xiàn)了。
之前談到過很多次數(shù)據(jù)驅(qū)動(dòng)的理解，這次通過實(shí)際項(xiàng)目檢驗(yàn)了一下自己的想法。
相關(guān)文件《前端數(shù)據(jù)驅(qū)動(dòng)的價(jià)值》
《前端數(shù)據(jù)驅(qū)動(dòng)的陷阱》
項(xiàng)目詳設(shè) 詳設(shè)的重要性對(duì)于復(fù)雜一點(diǎn)的項(xiàng)目，做一個(gè)詳細(xì)設(shè)計(jì)非常重要。有人會(huì)疑惑，前端還需要詳設(shè)嗎？
根據(jù)我的經(jīng)驗(yàn)，詳設(shè)非常重要，非常體現(xiàn)能力。
對(duì)于一個(gè)新人，詳設(shè)能夠給開發(fā)做一些提前準(zhǔn)備。
對(duì)于一個(gè)老手，詳設(shè)可以提前預(yù)見一些隱藏的坑。
對(duì)于一個(gè)高手，詳設(shè)需要達(dá)到隨便給一個(gè)有點(diǎn)經(jīng)驗(yàn)的人，都能直接寫代碼。
在某種程度上，開發(fā)者詳設(shè)在整個(gè)開發(fā)周期中占得比重越大，能力就越強(qiáng)。
新人可能只占5%，高手肯能占到50%以上（架構(gòu)完全想清楚了，然后剩下用代碼去實(shí)踐設(shè)計(jì)）。
吃透業(yè)務(wù)，這個(gè)不管用什么選型都很重要
頂層數(shù)據(jù)結(jié)構(gòu)，model必須梳理清晰，model需要能夠完整的覆蓋業(yè)務(wù)
業(yè)務(wù)React Component中每一個(gè)的props，state布局，props，state中每一項(xiàng)的用處，計(jì)算方式，與頂層數(shù)據(jù)結(jié)構(gòu)的映射函數(shù)
業(yè)務(wù)React Component中每一個(gè)的Action對(duì)于的model改變
model上面添加和后端的關(guān)聯(lián)
基本上上面梳理清楚了，后面就可以直接寫代碼了。
道和術(shù)網(wǎng)上看到很多講解redux+react的實(shí)踐思路，設(shè)計(jì)模型。感覺都是實(shí)踐方式上面的講解。
比較經(jīng)典的一張圖：
今天我這邊想換一種思路去解釋他。
數(shù)據(jù)驅(qū)動(dòng)+react實(shí)踐的一個(gè)前提相信react的性能！
相信react的性能！
相信react的性能！
model能力超級(jí)強(qiáng)大，請(qǐng)記住，每個(gè)model都必須能夠?qū)?yīng)一種頁面狀態(tài)（能夠像恢復(fù)快照一樣）。model和頁面狀態(tài)存在一種一一對(duì)應(yīng)的關(guān)系。
如下圖：
每一個(gè)M都和下面的頁面對(duì)應(yīng)，用M1可以render出第一個(gè)頁面，M2可以render第二個(gè)頁面。
當(dāng)用戶有交互行為時(shí)，通過action改變M1到M2，這時(shí)大家注意了
慢動(dòng)作：
用戶對(duì)M1的頁面一做了一個(gè)操作（action）讓M1產(chǎn)生了改變M",這時(shí)M1變成了M2,對(duì)應(yīng)的頁面也由頁面一刷新成了M2對(duì)應(yīng)的頁面二。同理，M2通過交互變成了M3,頁面也會(huì)刷新成M3對(duì)應(yīng)的頁面三。
注意我強(qiáng)調(diào)了刷新兩個(gè)字。
核心就是頁面的行為使得數(shù)據(jù)改變，數(shù)據(jù)渲染出數(shù)據(jù)改變后相應(yīng)的頁面。
這個(gè)就是我所理解的數(shù)據(jù)驅(qū)動(dòng)。
為了達(dá)到上面目的，其實(shí)我們有意忽略了性能問題。就是用戶每次操作都會(huì)重新渲染數(shù)據(jù)，生成對(duì)應(yīng)的新頁面。
那么性能問題如何解決，這時(shí)react就出場(chǎng)了，性能上，我們需要借助react的虛擬dom，去比較每一次頁面修改的最小diff，然后重新渲染diff部分。所以我上面提到，你需要相信react的性能。
說實(shí)話，如果沒有這種最小diff的處理能力，這種完全的數(shù)據(jù)驅(qū)動(dòng)性能問題非常大。
從上面看，代碼其實(shí)可以分為兩大部分：
render: 根據(jù)model寫渲染邏輯，這部分就交給react,大家仔細(xì)看看react的生命周期，都是圍繞render的
change model: 根據(jù)用戶的action，修改model的數(shù)據(jù)，這部分交給redux的模式
數(shù)據(jù)驅(qū)動(dòng)副產(chǎn)物 單元測(cè)試某種程度上，前端是非常難去寫單側(cè)的，因?yàn)樯婕暗絛om，哪怕是時(shí)間允許，單側(cè)的使用度也不是很高。
對(duì)于數(shù)據(jù)驅(qū)動(dòng)這種模式，至少從數(shù)據(jù)層，可以規(guī)避dom，做一層數(shù)據(jù)變化的效驗(yàn)（這個(gè)和寫服務(wù)端單側(cè)差不多）。然后有精力和時(shí)間，可以加一層model-to-dom邏輯的測(cè)試。
回答上面那個(gè)圖片，通過model可以記錄一個(gè)頁面的快照，那么如果對(duì)于單個(gè)用戶，單個(gè)終端，按照時(shí)間軸記錄一連串的model，我們就可以回放用戶的操作行為。
以及利用大數(shù)據(jù)去批量分析用戶行為數(shù)據(jù)。
這種模式某種程度上，是為了提高開發(fā)效率，減少頁面的復(fù)雜度（參考《前端數(shù)據(jù)驅(qū)動(dòng)的價(jià)值》），減少開發(fā)的復(fù)雜度。
想想5-6年前，還是多頁面時(shí)代，每個(gè)模塊都是一個(gè)頁面，數(shù)據(jù)都由后端去套模板。然后用戶每個(gè)操作基本上都會(huì)觸發(fā)一些刷新。數(shù)據(jù)驅(qū)動(dòng)和有點(diǎn)類似，只是借用react在單頁面上實(shí)現(xiàn)了。前端也承擔(dān)了更多的數(shù)據(jù)處理工作。
博客地址http://tangguangyao.github.io/
微信公眾號(hào)文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79204.html
摘要：上例的功能塊定義了如下節(jié)點(diǎn)樹入口節(jié)點(diǎn)是面板，結(jié)合該節(jié)點(diǎn)的函數(shù)書寫特點(diǎn)，我們接著介紹最佳實(shí)踐如何處理功能塊之內(nèi)的編程。 本文介紹 React + Shadow Widget 應(yīng)用于通用 GUI 開發(fā)的最佳實(shí)踐，只聚焦于典型場(chǎng)景下最優(yōu)開發(fā)方法。分上、下兩篇講解，上篇概述最佳實(shí)踐，介紹功能塊劃分。 showImg(https://segmentfault.com/img/bVWu3d?w=6...
摘要：是前端開發(fā)領(lǐng)域新興的方法論體系，它繼承了與編程理念，在技術(shù)上有不少創(chuàng)新。但專利與開源協(xié)議是平行的兩個(gè)世界，改底層也不大容易解決問題。此外，要求在中結(jié)合各屬性的是否變化，判斷是否該觸發(fā)更新。 ReRest (Reactive Resource State Transfer) 是前端開發(fā)領(lǐng)域新興的方法論體系，它繼承了 MVVM 與 FRP 編程理念，在技術(shù)上有不少創(chuàng)新。本文從專利稿修改而來...
摘要：目前，網(wǎng)易云輕舟微服務(wù)平臺(tái)已經(jīng)應(yīng)用于銀行證券視頻監(jiān)控物流工業(yè)等行業(yè)不少中大型企業(yè)，幫助其實(shí)施微服務(wù)化改造，建設(shè)符合行業(yè)特點(diǎn)的業(yè)務(wù)中臺(tái)，支撐企業(yè)數(shù)字化戰(zhàn)略的落地。 微服務(wù)技術(shù)由于天生支持快速迭代、彈性擴(kuò)展的特點(diǎn)，使企業(yè)能夠在不確定性下提升發(fā)展速度及抗風(fēng)險(xiǎn)能力，受到了越來越多的關(guān)注。當(dāng)前，云服務(wù)商紛紛試水微服務(wù)產(chǎn)品，最為典型的，當(dāng)屬推出輕舟微服務(wù)平臺(tái)、劍指整個(gè)微服務(wù)應(yīng)用生命周期的網(wǎng)易云。 ...
摘要：因?yàn)槁酚蓪用媸軜I(yè)務(wù)影響很大，經(jīng)常修改一些功能的行為，所以后來大部分測(cè)試都是針對(duì)層面的單元測(cè)試。在我了解的過程中，我發(fā)現(xiàn)中文網(wǎng)絡(luò)上對(duì)的討論非常分散，于是我創(chuàng)建了中文社區(qū)，到年末已經(jīng)有個(gè)注冊(cè)用戶和個(gè)帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發(fā)的一個(gè)互聯(lián)網(wǎng)金融項(xiàng)目終于在今年三月份上線了，這是一個(gè) Node...
閱讀 1911·2021-11-22 14:44
閱讀 1676·2021-11-02 14:46
閱讀 3664·2021-10-13 09:40
閱讀 2604·2021-09-07 09:58
閱讀 1611·2021-09-03 10:28
閱讀 1663·2019-08-29 15:30
閱讀 982·2019-08-29 15:28
閱讀 1474·2019-08-26 12:20
