工做那些事兒（10）- 前端

    雖然我一直強調不是前端工程師，但這裏仍是要好好說前端的框架，由於這也是我得意的一個做品。

    EIP的前端一開始只是單純地使用jquery。jquery被稱爲神器不爲過，由於真的很好入手，擴展又多，能夠實現的效果又好。我之前寫過dephi，寫過action script，相似這種事件驅動的動態語言再容易上手不過了。可是jquery用得多了，代碼開始失控了，一段又一段的事件驅動回調函數，並且很差複用，有不少重複代碼，想抽象，發現又凌亂了，總之，代碼整體的邏輯結構性不強。若是隻是一個jsp實現一些簡單特效就沒問題，但重前端應用中，這很容易混亂，代碼的質量變得低下，可維護性大大下降。

    我想找一個幫助我將代碼模塊化結構化的框架，但必定要輕，要儘可能低的遷入成本。而後找到了backboneJS，那時候backboneJS才0.9.1，什麼AngularJS 都還沒浦頭，能夠選擇的很少，看到說不少國外網站都用backbone，包括linkined，因而就用了。這傢伙，確實是好傢伙。他封裝了簡單的OO方式，無需再用js那拗口的面向對象語法，這讓我更好地封裝了代碼，並使用簡單的方式實現繼承複用。而backboneJS核心的MVC模式，也很好幫助我將邏輯分層，經過對頁面的切割，模塊化更清晰。並且它的一個好是，我對原代碼的改動並非很大，就實現了遷入，當時代碼量大概有4000行JS的樣子，一週時間就完成了升級並測試經過。

    網上後來不少在討論，到底backbone是否是MVC框架，由於它很壞，它的C是Collection，而它並無Controller類，這跟傳統意義的MVC相差太大了。但我是這樣理解的，其實backbone的View纔是MVC裏面的C，控制者，在View裏實際上是實現邏輯的，而模板引擎+CSS纔是真正的V層，這裏描述了html佈局和樣式，是真正的顯示層，M層則是Model + Collection。其實，有時候，無須要過多去爭論一些字眼上的定義概念問題，關鍵是，用它帶來什麼好處，是否知足獲得本身的須要，有沒有多餘的東西。如今backbone就是很能知足個人需求，其餘後來的MVC也沒見到有特別的東西讓我感受須要替換，因此也一直用下來了。

    還要說說模板引擎，由於一開始在用jquery，因此就用了jquery-template這個官方庫，沒想到它這麼沒生命力了，沒過多久就宣佈再也不升級維護了，NND，而backbone自己建議用underscore的tmpl，但我實在不想所有模板又寫一次(二者語法不一致)，因此，也一直用jq-template了，這不能不說是一個遺留的痛。

    當時作着個前端，頗有衝勁，想作得極致，參考了不少優化建議，後面還採起了合併代碼並壓縮的作法，就是將全部js合併到一個js文件，css也合到一個，tmpl文件又合到一個，最後html中要加載的資源除了第三方庫，就只有另外三個all.min.js, all.min.css, all.min.tmpl文件，這樣下來html合共請求的資源數從50+降到了30+，進一步減輕了http服務器的壓力，而因爲企業內網網速無壓力，因此下載大致積的資源文件，也是很快的。

    前端另外一個特別的地方就是，我當時想參考spring Ioc的思想，將類的構造放到運行時來決定，實現配置化的策略模式。這是有需求的，不是爲作而作。需求源於我想代碼更漂亮一點，其實簡單的實現就是不斷地if else，可是我有必定潔癖，我不想這樣if else，因此我想作相似Ioc的東西。JS不是Java，沒有class loader，這麼搞呢？這個當時花了至關時間去找資料研究，最後的實現方法確很是簡單：JS是一個動態語言，原來他自己就具有了這種Ioc的動態性質。簡單講，舉個例子，執行一個function，代碼中能夠寫成

myFunc();

來調用，也能夠將函數放到一個變量中，而後調用：

myArray = [];
func = 'myFunc';
myArray.push(func);
myArray[func]();

    如此下來，前端基本構建起來了。