我的做業week7——前端開發感想總結

我的做業week7——前端開發感想總結

---

 

1. 反思

首先要談談在此次團隊項目的工做中，我這邊出現過的較爲嚴重的一個問題：
我和HoerWing (後端擔當)合做時，最初由於我沒有使用github(始終連不上，最後才確認是宿舍有線網的問題，沒錯就我那一個位置這樣= =)，因此致使我和後端這塊對於代碼進展的狀況嚴重不一樣步，由於咱們要同時寫一個網頁，同時又由於是敏捷的工做模式，因此常常會須要作一些小的修飾，而在這個時候就會沖掉對方先前寫的一些邏輯。整個項目中先後端對接是比較後期的一件事兒，因此這個問題最後才暴露出來，不過好在後端這邊封裝得很好，所以沒有拖延整個工做流程過久，用無線連上github並和後端使用了一個共同的分支以後這個問題基本已經解決。

---

 

2. 網頁開發中的‘大泥球’

我最初理解的是對於前端應該不須要過多考慮這方面的問題，但後來整個頁面的繪製加前端邏輯寫下來也是上千行的東西，結構和功能邏輯都會比較複雜，好比不一樣的操做時頁面元素的改變，用戶保存實驗數據，發送XML格式化的數據，後端處理完畢後返回正確結果或異常時按鈕的響應狀況是不一樣的，相應的也會伴隨着一些頁面元件的樣式變化，所以後端要作代碼複審工做就會變成一件很是捉急的事情，這個在先後端對接的初期成爲了一個相似於‘Big Ball of Mud’的東西，不過好在我跟後端溝通後結果了這個問題，那就是我來複審後端添加的邏輯代碼，並將純前端的內容分離拷貝出來以便本地查看實際效果，相比較前端的內容，後端添加的邏輯很精簡也很易讀，畢竟我這邊沒有配置事後端框架的環境(事實上也很差去在linux系統下作這些設計的事情，至於虛擬機，我可能會在年末考慮換硬盤的事兒，可是如今沒有錢)，因此沒有辦法作到所見即所得，只能採起這麼個這種的方案，不過好在對於一個小項目，這一點的影響不算很大。

---

 

3. 交易頻繁的集市

對於集市和大教堂，我以爲整個軟件的項目能夠從總體上視爲一個大教堂，可是同一個部門(好比網頁交互，計算核心開發)內部採起的是集市的模式，那麼就會難免經常有兩我的修改同一部分，結果出現各類代碼上的衝突。對於學生時代的咱們而言，將這些衝突經過PM合理分配工做來化解實在是太難了，儘管PM很負責，可是我也能看到，更多時候他是經過本身重寫有問題的部分來解決這些問題，相比較歸咎於經驗不足，我以爲這多是軟件工程中的廣泛現象？所以我提倡若是要求敏捷，則對於一個獨立出來的負責部門而言，或由一人負責，或由有良好交流的兩我的結對編程來完成。這樣對於敏捷開發過程當中的頻繁更新狀況，在作代碼修正時的內部溝通成本也能夠有效下降。

---

 

4. 代碼優化與軟件工程

每一個軟件在開發的過程當中，都會不停地去考慮代碼優化，或者說代碼可擴展性以及兼容性的問題，所以這就增長了每次代碼調整的成本（這要求咱們必須從新審視以前全部優化過的地方，可是更常見的場景是你有可能不知作別人所作的那一部分優化），好比爲了不冗餘我經常會採用jquery綁定的方式來爲一組DOM對象綁定事件函數，但對於單一DOM對象的事件則迴歸JS的寫法；對於中文字體的顯示，考慮到網速問題，就放棄用下載來的中文字體去渲染而是經過創建合適的font-family順序，針對不一樣的用戶調用其系統內置的優化字體去顯示（將mac的冬青黑列在win的雅黑以前等等）；爲了更好的兼容各類瀏覽器而放棄一些H5的新特性之類；因而當我須要改動的時候我本身都經常會忘記有哪些地方須要重構（在沒有用戶反饋的前提下），因此我發現果真最好的解決辦法仍是迴歸PS（笑

---

 

5. Agile 敏捷

考慮到敏捷的要求，咱們使用了一些框架，而且參考了一些模板（如se7en）中一些css的寫法，並提取出來放到網頁的樣式表中，此外也在codepen社區上摘了一些HTML+CSS的動態樣式（LOADING動畫），不過因爲bootstrap定義了大量的類名使得作這種事兒命名衝突會比較難於處理，因此能本身寫的樣式部分我就全都本身寫了，對於一些批量使用的樣式（好比實驗數據表格模態框），就集成到本身定義的樣式表裏，我以爲這也是一個很好的前端初學者工做模式，用框架去保證兼容性和響應式佈局的問題（雖然實際上仍是本身寫了一些響應式的東西去應付較爲特殊的狀況），而後不去動框架，手寫本身的自定義樣式，並在它們反覆出現的時候去作集成的工做，對於JS這邊我想也是如此，即便引入jquery，一些簡單的邏輯，或者較爲基礎的一些（如AJAX）仍是本身用JS原生的方式所有過一遍比較好，一方面有助於深刻理解前端開發，另外一方面在跟後端對接時也會比較有幫助。

開發時參考過的博客：
網頁開發中的中文字體：http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
JS中的面向對象：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html