web開發(fā)步驟：理解分析需求，UI界面結(jié)構(gòu)拆解，功能邏輯分析實現(xiàn)
需求分析理解：
- 拿到新需求后，整體層面上去理解掌握所需開發(fā)界面跟功能。
- 一次版本迭代，無論需求多與少，都當成一個完整的項目，要對web端的當前版本的需求有全局的理解跟把控。首先要知道有哪些頁面，哪些功能要開發(fā)的；其次，這次需求采用什么架構(gòu)去實現(xiàn)，頁面適配跟網(wǎng)絡請求以及項目結(jié)構(gòu)應該怎么處理；然后，考慮界面功能之間有什么關(guān)聯(lián)，可以以什么樣的形式進行界面功能之間的數(shù)據(jù)傳遞或者關(guān)聯(lián)；
界面分析拆解
拿到UI設計圖后，在開發(fā)之前，可以現(xiàn)在對界面的結(jié)構(gòu)進行拆解分析，即將UI界面在腦中進行一次標簽化，將界面轉(zhuǎn)換成對應的標簽結(jié)構(gòu)以及布局實現(xiàn)，這樣可以做到在開發(fā)的時候，對界面有準確的把握。因為事先已經(jīng)分析過了如何將界面轉(zhuǎn)換成對應的標簽跟布局，所以在開發(fā)的時候，基本上是只需要調(diào)整部分細節(jié)即可，可以明顯的提高開發(fā)的效率。
需要注意的是：
- 在進行界面拆解的時候，結(jié)構(gòu)要合理，避免過多的嵌套跟浮動。盡量在自己的能力范圍內(nèi)縮減到最精簡，但是如果是必要的嵌套則不用刻意去精簡，從而增加布局難度。
- 在轉(zhuǎn)換成標簽的時候也要考慮布局，轉(zhuǎn)換成標簽后，下一步就是對布局樣式的分析跟實現(xiàn)。
- 要做到在開發(fā)的時候，對于布局的實現(xiàn)已經(jīng)事先掌握了具體的樣式，代碼編寫完成后基本上的布局已經(jīng)完成，只需要調(diào)整部分細節(jié)即可，而不是在開發(fā)的時候再去一個個的嘗試。
- 其實就是要實現(xiàn)在心中運行一次代碼，而這次代碼的運行是基于自身對布局樣式的理解，可以有效的提高對布局樣式的理解跟開發(fā)效率。
注：在布局上面，浮動，定位，彈性布局等都能按照需要去使用?？梢远嗨伎枷嗤季值牟煌瑢崿F(xiàn)方式，多對比不同實現(xiàn)方式的代碼情況跟兼容情況，可以靈活的去使用。
如：像這樣子的一個組件我們應該怎么去分析跟拆解？
功能邏輯分析
在界面布局靜態(tài)實現(xiàn)后，我們開始接入js去調(diào)用接口，添加事件，增加交互邏輯等工作。
最先可以先實現(xiàn)交互邏輯，因為交互邏輯可以跟接口數(shù)據(jù)進行解耦，所以在接口未完成的情況下可以先完成交互這一部分。
交互這一塊主要需要考慮如何實現(xiàn)交互效果跟數(shù)據(jù)之間的傳遞。
最簡單的例子就是點擊列表中的某一項進行頁面跳轉(zhuǎn)，此時我們需要考慮，點擊事件的綁定是要通過什么方式去實現(xiàn)，是onClick還是addEventListener或者以事件委托的形式。然后再結(jié)合數(shù)據(jù)的加載情況，是僅加載一次的有限項列表還是可多次加載的有限項列表。再結(jié)合列表項的渲染方式，是通過string的拼接然后渲染到對應的父標簽中，還是基于數(shù)據(jù)綁定的形式，或者其他方式。還有就是事件調(diào)用時，是否需要傳遞參數(shù)以及參數(shù)應該通過什么樣的形式去傳遞，是直接在onClick方法中去綁定參數(shù)還是說以屬性的形式綁定在對應的標簽上，然后在調(diào)用的時候去獲取。最后就是點擊事件的綁定范圍，應該將事件綁定在哪一個標簽上才合適，這個就取決于可點擊范圍的大小，是整項都可以點擊還是其中的某個標簽才可以點擊。
復雜一點的就是，點擊某一項會改變其他組件的狀態(tài)（顯示，數(shù)據(jù)）。除了上面提及到的部分，還需要考慮組件顯示隱藏，是通過jquery的hide or show方法去實現(xiàn)，還是通過切換class去實現(xiàn)。如果組件的display是flex等布局的話，不可以簡單的使用hide or show。應該結(jié)合隱藏顯示的方法跟組件布局去做合適的選擇。其次就是數(shù)據(jù)部分，非父子關(guān)系的組件在進行數(shù)據(jù)交叉改動的時候，應該確保改動只針對所需要的數(shù)據(jù)源，不會改動到其他數(shù)據(jù)源。然后數(shù)據(jù)的獲取，修改，重新渲染的過程要保證準確無誤，使用恰當?shù)姆椒ㄈヌ幚韺臄?shù)據(jù)。要求應該對number，array，string，object的方法有個全面的理解，應該知道有哪些方法可以選擇，采用最恰當?shù)姆椒ㄈ崿F(xiàn)。除去js本身的API的部分，在邏輯方面也應該多加鍛煉跟思考總結(jié)。對于常見需求的應該有自己的總結(jié)跟處理邏輯。再基于這些去優(yōu)化跟增加自己手上的方案跟套路。形象點說就是要知道并且擁有自己的武器，在對付不同需求的時候可以有得選擇，并且不斷地去增加跟優(yōu)化自己的武器。
然后就是接口部分，接口調(diào)用后的處理也是要養(yǎng)成一個習慣，要對成功跟失敗的情況都做了對應的處理。然后就是在數(shù)據(jù)處理部分，常見就是返回的數(shù)據(jù)是個數(shù)組或者對象，然后要基于數(shù)組去遍歷或者獲取對象中的某個值，渲染對應的數(shù)據(jù)到對應的標簽中。在處理數(shù)據(jù)方面應該多想想應該怎么去做，其實也就邏輯思維要多去強化，可以網(wǎng)上做一些邏輯思維的題目鍛煉下。然后就是處理完的數(shù)據(jù)要渲染到標簽中，是只渲染文本節(jié)點還是整個標簽包括文本節(jié)點都去渲染，選擇合適并且簡單的方式去做。
總結(jié)
加強邏輯思維，打造自己的武器，轉(zhuǎn)換思維，要把自己當成項目負責人去做項目，雖然不是全部模塊都是開發(fā)，但是應該知道整體項目是怎么樣的，不要等需求分配下來，多思考，多總結(jié)，要對項目有整體的把握，以及開發(fā)前進行分析，選擇合適的方式去開發(fā)，提高開發(fā)效率，把握開發(fā)進度跟時間，爭取提前完成，剩下的時間做測試跟優(yōu)化。
