web開發(fā)步驟：理解分析需求咆耿，UI界面結(jié)構(gòu)拆解慰技，功能邏輯分析實(shí)現(xiàn)
需求分析理解：
- 拿到新需求后糟红，整體層面上去理解掌握所需開發(fā)界面跟功能。
- 一次版本迭代，無論需求多與少今野，都當(dāng)成一個完整的項(xiàng)目蛔外，要對web端的當(dāng)前版本的需求有全局的理解跟把控。首先要知道有哪些頁面隅要，哪些功能要開發(fā)的董济；其次步清，這次需求采用什么架構(gòu)去實(shí)現(xiàn)，頁面適配跟網(wǎng)絡(luò)請求以及項(xiàng)目結(jié)構(gòu)應(yīng)該怎么處理感局；然后尼啡，考慮界面功能之間有什么關(guān)聯(lián)暂衡，可以以什么樣的形式進(jìn)行界面功能之間的數(shù)據(jù)傳遞或者關(guān)聯(lián)；
界面分析拆解
拿到UI設(shè)計圖后崖瞭，在開發(fā)之前狂巢，可以現(xiàn)在對界面的結(jié)構(gòu)進(jìn)行拆解分析，即將UI界面在腦中進(jìn)行一次標(biāo)簽化书聚，將界面轉(zhuǎn)換成對應(yīng)的標(biāo)簽結(jié)構(gòu)以及布局實(shí)現(xiàn)唧领，這樣可以做到在開發(fā)的時候，對界面有準(zhǔn)確的把握雌续。因?yàn)槭孪纫呀?jīng)分析過了如何將界面轉(zhuǎn)換成對應(yīng)的標(biāo)簽跟布局斩个，所以在開發(fā)的時候，基本上是只需要調(diào)整部分細(xì)節(jié)即可驯杜，可以明顯的提高開發(fā)的效率受啥。
需要注意的是：
- 在進(jìn)行界面拆解的時候，結(jié)構(gòu)要合理鸽心，避免過多的嵌套跟浮動滚局。盡量在自己的能力范圍內(nèi)縮減到最精簡，但是如果是必要的嵌套則不用刻意去精簡顽频，從而增加布局難度藤肢。
- 在轉(zhuǎn)換成標(biāo)簽的時候也要考慮布局，轉(zhuǎn)換成標(biāo)簽后糯景，下一步就是對布局樣式的分析跟實(shí)現(xiàn)嘁圈。
- 要做到在開發(fā)的時候，對于布局的實(shí)現(xiàn)已經(jīng)事先掌握了具體的樣式蟀淮，代碼編寫完成后基本上的布局已經(jīng)完成最住，只需要調(diào)整部分細(xì)節(jié)即可，而不是在開發(fā)的時候再去一個個的嘗試怠惶。
- 其實(shí)就是要實(shí)現(xiàn)在心中運(yùn)行一次代碼温学，而這次代碼的運(yùn)行是基于自身對布局樣式的理解，可以有效的提高對布局樣式的理解跟開發(fā)效率甚疟。
注：在布局上面，浮動逃延，定位览妖，彈性布局等都能按照需要去使用±肯椋可以多思考相同布局的不同實(shí)現(xiàn)方式讽膏，多對比不同實(shí)現(xiàn)方式的代碼情況跟兼容情況，可以靈活的去使用拄丰。
如：像這樣子的一個組件我們應(yīng)該怎么去分析跟拆解府树？
功能邏輯分析
在界面布局靜態(tài)實(shí)現(xiàn)后俐末，我們開始接入js去調(diào)用接口，添加事件奄侠，增加交互邏輯等工作卓箫。
最先可以先實(shí)現(xiàn)交互邏輯，因?yàn)榻换ミ壿嬁梢愿涌跀?shù)據(jù)進(jìn)行解耦垄潮，所以在接口未完成的情況下可以先完成交互這一部分烹卒。
交互這一塊主要需要考慮如何實(shí)現(xiàn)交互效果跟數(shù)據(jù)之間的傳遞。
最簡單的例子就是點(diǎn)擊列表中的某一項(xiàng)進(jìn)行頁面跳轉(zhuǎn)弯洗，此時我們需要考慮旅急，點(diǎn)擊事件的綁定是要通過什么方式去實(shí)現(xiàn)，是onClick還是addEventListener或者以事件委托的形式牡整。然后再結(jié)合數(shù)據(jù)的加載情況藐吮，是僅加載一次的有限項(xiàng)列表還是可多次加載的有限項(xiàng)列表。再結(jié)合列表項(xiàng)的渲染方式逃贝，是通過string的拼接然后渲染到對應(yīng)的父標(biāo)簽中谣辞，還是基于數(shù)據(jù)綁定的形式，或者其他方式秋泳。還有就是事件調(diào)用時潦闲，是否需要傳遞參數(shù)以及參數(shù)應(yīng)該通過什么樣的形式去傳遞，是直接在onClick方法中去綁定參數(shù)還是說以屬性的形式綁定在對應(yīng)的標(biāo)簽上迫皱，然后在調(diào)用的時候去獲取歉闰。最后就是點(diǎn)擊事件的綁定范圍，應(yīng)該將事件綁定在哪一個標(biāo)簽上才合適卓起，這個就取決于可點(diǎn)擊范圍的大小和敬，是整項(xiàng)都可以點(diǎn)擊還是其中的某個標(biāo)簽才可以點(diǎn)擊。
復(fù)雜一點(diǎn)的就是戏阅，點(diǎn)擊某一項(xiàng)會改變其他組件的狀態(tài)（顯示昼弟，數(shù)據(jù)）。除了上面提及到的部分奕筐，還需要考慮組件顯示隱藏舱痘，是通過jquery的hide or show方法去實(shí)現(xiàn)，還是通過切換class去實(shí)現(xiàn)离赫。如果組件的display是flex等布局的話芭逝，不可以簡單的使用hide or show。應(yīng)該結(jié)合隱藏顯示的方法跟組件布局去做合適的選擇渊胸。其次就是數(shù)據(jù)部分旬盯，非父子關(guān)系的組件在進(jìn)行數(shù)據(jù)交叉改動的時候，應(yīng)該確保改動只針對所需要的數(shù)據(jù)源，不會改動到其他數(shù)據(jù)源胖翰。然后數(shù)據(jù)的獲取接剩，修改，重新渲染的過程要保證準(zhǔn)確無誤萨咳，使用恰當(dāng)?shù)姆椒ㄈヌ幚韺?yīng)的數(shù)據(jù)懊缺。要求應(yīng)該對number，array某弦，string桐汤，object的方法有個全面的理解，應(yīng)該知道有哪些方法可以選擇靶壮，采用最恰當(dāng)?shù)姆椒ㄈ?shí)現(xiàn)怔毛。除去js本身的API的部分，在邏輯方面也應(yīng)該多加鍛煉跟思考總結(jié)腾降。對于常見需求的應(yīng)該有自己的總結(jié)跟處理邏輯拣度。再基于這些去優(yōu)化跟增加自己手上的方案跟套路。形象點(diǎn)說就是要知道并且擁有自己的武器螃壤，在對付不同需求的時候可以有得選擇抗果，并且不斷地去增加跟優(yōu)化自己的武器。
然后就是接口部分奸晴，接口調(diào)用后的處理也是要養(yǎng)成一個習(xí)慣冤馏，要對成功跟失敗的情況都做了對應(yīng)的處理。然后就是在數(shù)據(jù)處理部分寄啼，常見就是返回的數(shù)據(jù)是個數(shù)組或者對象逮光，然后要基于數(shù)組去遍歷或者獲取對象中的某個值，渲染對應(yīng)的數(shù)據(jù)到對應(yīng)的標(biāo)簽中墩划。在處理數(shù)據(jù)方面應(yīng)該多想想應(yīng)該怎么去做涕刚，其實(shí)也就邏輯思維要多去強(qiáng)化，可以網(wǎng)上做一些邏輯思維的題目鍛煉下乙帮。然后就是處理完的數(shù)據(jù)要渲染到標(biāo)簽中杜漠，是只渲染文本節(jié)點(diǎn)還是整個標(biāo)簽包括文本節(jié)點(diǎn)都去渲染，選擇合適并且簡單的方式去做察净。
總結(jié)
加強(qiáng)邏輯思維驾茴，打造自己的武器，轉(zhuǎn)換思維氢卡，要把自己當(dāng)成項(xiàng)目負(fù)責(zé)人去做項(xiàng)目沟涨，雖然不是全部模塊都是開發(fā)，但是應(yīng)該知道整體項(xiàng)目是怎么樣的异吻，不要等需求分配下來，多思考，多總結(jié)诀浪，要對項(xiàng)目有整體的把握棋返，以及開發(fā)前進(jìn)行分析，選擇合適的方式去開發(fā)雷猪，提高開發(fā)效率睛竣，把握開發(fā)進(jìn)度跟時間，爭取提前完成求摇，剩下的時間做測試跟優(yōu)化射沟。
