Java程式員的JavaScript學習筆記（6——物件導向類比）

Java程式員的JavaScript學習筆記（6——物件導向類比）
計劃按如下順序完成這篇筆記：
理念。 屬性複製和繼承。 this/call/apply。 閉包/getter/setter。 prototype。 物件導向類比。 jQuery基本機制。 jQuery選取器。 jQuery工具方法。 jQuery-在“類”層面擴充。 jQuery-在“對象”層面擴充。 jQuery-延伸選取器。 jQuery UI。 擴充jQuery UI。

這是筆記的第6篇，對前面5篇做一個總結，聊聊JavaScript在面向大型複雜任務時候，如何有效組織程式結構，如何?代碼清晰可讀，如何?開閉原則。

我們設計一個應用情境，並嘗試解決這個情境中面臨的問題。

1、任務

我要設計一個偏資料輕樣式的前端UI的架構，實現：

資料到控制項的自動綁定，格式化。表單提交時，自動擷取輸入項的值。
2、分析

2.1、頁面代碼設計如下：

<script type='text/javascript'>var _data = {"name": 'liuhailong',hobby: 'programming',family:{wife:{"name":'Yi'},"children":[{"name":'Xuan',birthday:'2011-07-08';}]},skills : [{"name":'data mining',level:'specialist'},{"name":'project management',level:'specialist'}]};</script>
hoby:
wife:

 

  
name:
birthday:
 

 

  
()
 

開發UI庫，在如上html代碼和資料格式基礎上，實現資料自動綁定顯示。

2.2、表單提交頁面代碼設計如下：

 Send Message 

在如上代碼基礎上，UI庫實現：指定提交form的name（可以多個），即可自動收集form中輸入框的值，並通過ajax提交到指定的url。
3、設計

說到設計，忍不住畫類圖了。需要考慮，幾個模組，每個模組幾個介面/類，每個類什麼職責，哪些方法，調用次序，資料流向，各視角視圖，...。

首先是模組劃分，4個：ui.control、ui.data.adapter.render、ui.data.adapter.collector和ui.utils。

ui.control中對頁面dom結構再次封裝（組合模式有木有？），方便render和collector工作。

ui.data.adapter.render中包含：PageRender。

ui.data.adapter.collector中包含：FormCollector

ui.utils中包含：DataUtils。

JavaScript愛好者看到這裡可能已經忍不住了，感覺：搞Java的事兒真多，兩個方法可以搞定的搞出這麼多東西來。

的確是哦。這個例子主要目的是檢驗JavaScript的物件導向能力，所以可以理解為：上面過渡設計的行為是故意為之的。

4、實現想想，代碼量好大。

先說namespace的實現吧：使用對象。

var ui = {};ui.control= {};ui.data = {};ui.util= {};ui.data.adapter = {};ui.data.adapter.render = {};ui.data.adapter.collector = {};

上面代碼中只定義了一個ui變數，並分層次了屬性，用作命名空間。

UI架構中的”類“都附加到相應的對象上，從而實現了類似namespace和package的功能，隔離模組，避免命名衝突。

ui.data.adapter.render.PageRender = function (){ }var myPageRender = new ui.data.adapter.render.PageRender();

代碼量好大...我要先去看jQuery了。

5、小結

JavaScript對物件導向的支援是足夠的，構建中型以上架構的話，適當的使用物件導向的技巧是可以的。

但在什麼山頭上什麼歌，要適度、剋制。

多讀別人寫的JavaScript代碼，充分利用JavaScript本身的語言特性，而不是硬往自己習慣的語言習慣上擰 。