H5 開發小感

最近這一個星期從 iOS 開發轉向了網頁前端（就是我很久沒有碰過的那一塊東西＋不想碰的那一塊東西）。即使有些不爽，但是這一週開發做下來給自己感覺的進步和提升還是很明顯的。下面來談談 H5 前端開發的感受。

學會復用：做語音彈幕和 233 遊戲的時候考慮了一下彈幕從右往左飄過和小球從上往下掉的邏輯基本是相同的。所以設計刷新的方法邏輯也應該基本相同，只不過維護的對象不同罷了。iOS 上基本也是一個套路，不過容易很多。
function refresh() {
```
 	// move
     // do something here...
     // remove
     // do something here...
     // add
     // do something here...
 }
```
做前思考：涉及以下幾個方面。
- 「設計」是很重要的一點，週四晚上在單位也是做了一個關於「工程師眼中的字體和設計」這麼一個話題的分享。
- 其次是「分層」，網頁的不同元素的疊加考慮好它們的層次結構（尤其是寫樣式表）。
- 最後是「優化」。實現完成後考慮幾個問題：js 中的方法有沒有封裝好，每個調用邏輯有沒有各司其職，是否有可以優化的地方等等等等。舉一個比較簡單的例子就是 Canvas 上的 Button Listener（使用了 CreateJS）：
```
  // ...
  btn.addEventListener("click", handleBtnClick);
  // ...
  function handleBtnClick() {
  	// Tell stage to update frame
      // But the button doesn't know things that the stage does
      stage.updateGameFrame();
  }
```
莫慌：再怎麼急也沒！有！用！尤其是當自己接觸從來沒有接觸過的東西的時候。做 233 小遊戲的時候一開始的確很茫然，在開動前問了很多前端菊苣們用什麼框架、怎麼去寫代碼等等問題，但是因為給的答案實在是太多了所以根本無法繼續。後來冷靜下來後從 Cocoas-2d、CreateJS、Kissy 等框架中選了 CreateJS 下面的 EaselJS 進行開發，再去看 API Documentation，再去編碼就輕鬆多了。

再讓我說 H5 前端開發的話，絕對是一件很蛋疼的事情。不同的手機適配就是讓人炸掉的一件事。還有對於我這種強迫症工程師，設計稿不好的敵方都會去和設計師去交流改進，所以接觸設計師的時間也比之前做 iOS 更多了（這是件好事，因為新來了個設計師超級 Nice 的說）。與此同時還得接觸後端的內容，也算是對新領域的一種新的嘗試吧。