亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

單頁應(yīng)用開發(fā)總結(jié)

zzbo / 1444人閱讀

摘要：本文想通過自己這一年的單頁應(yīng)用開發(fā)經(jīng)驗，來對的開發(fā)做一個總結(jié)。但是要知道，現(xiàn)如今頁面都比較復(fù)雜，一般的單頁應(yīng)用都需要一個可靠的數(shù)據(jù)流去處理，否則在日后維護方面會難度巨大。

本文想通過自己這一年的單頁應(yīng)用開發(fā)經(jīng)驗，來對SPA的開發(fā)做一個總結(jié)。

頁面開發(fā)模式

通常我們在開發(fā)頁面時，都會拿到一份設(shè)計圖，假設(shè)我們拿到一份這樣的設(shè)計圖


對于頁面的開發(fā)，我總是遵循自上而下的設(shè)計模式去開發(fā)。在這里首先會把頁面分為兩部分，頭部導(dǎo)航，和內(nèi)容主體。內(nèi)容主體又分為兩部分左側(cè)關(guān)注信息以及右側(cè)的動態(tài)列表。如果按照這樣分，我們的組件編寫會像如下這樣

這樣寫其實沒什么問題，把所有的細節(jié)全部隱藏在組件內(nèi)部，每個組件只要處理好自己就OK。但是要知道，現(xiàn)如今頁面都比較復(fù)雜，一般的單頁應(yīng)用都需要一個可靠的數(shù)據(jù)流去處理，否則在日后維護方面會難度巨大。這里假設(shè)我們使用了redux，在redux中，我們的數(shù)據(jù)都是從頂層往下傳，一般以route頁面為維度，去做connect，然后route頁面將所需的store以及action以props的形式分發(fā)。那就相當于，整個頁面只有route組件是智能組件，其他組件盡可能寫成木偶組件。如果按照這樣的開發(fā)模式去開發(fā)左側(cè)關(guān)注列表組件，應(yīng)該是這樣的

//BodyLeft

而list組件應(yīng)該可能是這樣的

//List

  {data.map(item=>(
    {item.name}
  ))}

這時如果route頁面想傳遞什么信息給左側(cè)列表，每次都要層層傳遞，少了一層，多了可能會有兩三層，這樣會寫很多沒用的信息，并且很不利于日后的維護，因為每次有更改，都要去改許多無用的地方（那些中間層）。
而我個人更傾向一種扁平化的組件設(shè)計風(fēng)格。
還是原來的頁面，如果采用扁平化的設(shè)計模式，設(shè)計出來的組件結(jié)構(gòu)是這樣的

//ps：組件命名隨便取的

首先最外層的布局是可以復(fù)用的。這也就意味著如果之后還有頁面是這樣，上下布局，下面又是左右布局的時候，可以拿來用。其次是數(shù)據(jù)的傳遞不需要像之前那樣層層傳遞，可以直接傳給想要的組件。

有人說route頁面為什么不能這樣寫

也就是說把之前的那些組件換成div不就好了。但是在組件設(shè)計哲學(xué)里，通常在connect的組件，也就是智能組件里，是不處理與view有關(guān)的東西，智能組件只處理數(shù)據(jù)和邏輯。而于視圖相關(guān)的東西全放在木偶組件去處理。好處是只要是邏輯處理，就會去找智能組件，而界面樣式之類，就會去找木偶組件，思路清晰，更低耦合高內(nèi)聚。

組件

很多人對組件的理解是復(fù)用。其實組件化開發(fā)還有一個好處就是模塊化。模塊化可以將一個復(fù)雜的問題劃分為多個，簡單的問題去處理。打個比方你的能力一次只能處理一個七十分的問題，現(xiàn)在來了一個八十分的問題，你一次性很難處理，經(jīng)常需要寫一寫，停頓一下，思考一會，然后再寫一寫，直至完成；相反如果你采用模塊化的方式去解決，直接將這個八十分的問題劃分為四個二十分的問題，此時，你只需要先搭建一個架子，讓這個四個二十分的模塊加起來能等于八十分，接著再去處理每個二十分的問題就OK了。這其實也秉承了自上而下的設(shè)計風(fēng)格。
我通常將組件分為四類

智能組件

木偶組件

容器組件

高階組件

項目如果使用redux，智能組件通常是作為connect的那個組件，他只處理該組件下所有子組件的數(shù)據(jù)邏輯；而樣式，真實的dom結(jié)構(gòu)，由木偶組件來負責(zé)，他通常是stateless function，偶爾也有自己的state，但即使是state，也只處理與頁面展示有關(guān)的邏輯；容器組件很簡單，如果把一個頁面比作一個人，容器組件就是人的頭，身體，和四肢。將頁面大致分類，通常的寫法是這樣的

//Body

{this.props.children}

ps：為什么容器組件不直接寫成div上文說過了。

如果說前三類組件都在為頁面服務(wù)，那么最后一個組件就是專門為組件服務(wù)的組件。高階組件就像高階函數(shù)一樣，將被修飾的組件作為參數(shù)，同時也可以傳入其他配置參數(shù)，最后返回一個被增強的組件，redux的connect就是一個高階組件，通常寫法是這樣的：

//高階組件
const Hoc = props => WrapComponent => {
  return class extends Component {
    render() {
      return ;
    }
  };
};
// 使用
class WrapComponent extends Component{
  render(){
    return 

  }
}
export default Hoc()(WrapComponent)
redux數(shù)據(jù)流

在redux數(shù)據(jù)流管理里，行業(yè)里有很多最佳實踐，我這里就當拋磚引玉。
我認為一般頁面邏輯不是很復(fù)雜的項目，簡單的使用redux redux-thunk redux-action就夠了，如果需要處理的請求很復(fù)雜，為了避免回調(diào)地獄，可以使用redux-saga。通常我們在對數(shù)據(jù)從頂部往下分發(fā)的時候，需要以一個維度為基點來做connect，這個維度一般是route頁面。對于router，現(xiàn)在也基本達成了共識，那就是router的數(shù)據(jù)狀態(tài)也是redux數(shù)據(jù)的一種，它與view無關(guān)，因此使用react-redux-router將router與redux結(jié)合在一起是一個比較好的做法。
在redux里，有一個比較有爭議的點是，關(guān)于頁面的狀態(tài)，是否要放在redux里。有人認為redux就應(yīng)該只放數(shù)據(jù)，即后臺的數(shù)據(jù)和部分前臺自己存儲的數(shù)據(jù)；但是我認為，我們頁面在開發(fā)過程中，頁面的展示邏輯通常與后臺的數(shù)據(jù)是非常耦合的，可能一個按鈕的狀態(tài)，一個icon的顏色，都與后臺的數(shù)據(jù)有關(guān)，那么如果強行拆分，就會變成對于一個流程，我們要先去redux里處理后臺數(shù)據(jù)，處理好之后，再去智能組件里根據(jù)redux數(shù)據(jù)處理內(nèi)部state（頁面的狀態(tài)），這樣很麻煩，也很難維護。我自己的做法是，每一個流程，只對應(yīng)一個action，這個action內(nèi)部再去根據(jù)不同的參數(shù)去處理不同的數(shù)據(jù)，直至頁面正常反應(yīng)這個操作為止。

總結(jié)

總的來說，我們中很多人包括我自己，給view層賦予了太多的職能和責(zé)任，造成redux的價值沒有發(fā)揮出來，view里跑著各種state，后期難以維護，這無疑是本末倒置的。寫這篇總結(jié)也是對我最近寫項目的一些反思，希望能有更多的人一起討論，謝謝。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83327.html

相關(guān)文章

  • Vue.js SSR 內(nèi)容總結(jié)

    摘要：本文只是對官方文檔和對官方的個人學(xué)習(xí)總結(jié)，說得不夠完整的請見諒本文主要對以下幾方面內(nèi)容對的內(nèi)容進行分析總結(jié)出現(xiàn)的原因的總體原理當中的數(shù)據(jù)預(yù)取在編寫代碼時候的限制的構(gòu)建原理出現(xiàn)的原因單頁應(yīng)用有一個很大的缺點就是問題，搜索引擎目前只能對同步的進 本文只是對Vue.js官方SSR文檔和對官方hackernews demo的個人學(xué)習(xí)總結(jié)，說得不夠完整的請見諒 本文主要對以下幾方面內(nèi)容對Vue....

    曹金海 評論0 收藏0

  • 在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

    摘要：單頁應(yīng)用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應(yīng)用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

    leap_frog 評論0 收藏0

  • 在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

    摘要：單頁應(yīng)用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應(yīng)用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

    姘存按 評論0 收藏0

  • 在單頁應(yīng)用中，如何優(yōu)雅的監(jiān)聽url的變化

    摘要：單頁應(yīng)用的原理從早起的根據(jù)的變化，到根據(jù)的的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽的變化呢，本文將總結(jié)一下，如何在單頁頁面中優(yōu)雅的監(jiān)聽的變化。在下幾章中，重點介紹一下如何監(jiān)聽的改變。 ??單頁應(yīng)用的原理從早起的根據(jù)url的hash變化，到根據(jù)H5的history的變化，實現(xiàn)無刷新條件下的頁面重新渲染。那么在單頁應(yīng)用中是如何監(jiān)聽url的變化呢，本文將總結(jié)一下，...

    zhkai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<