Java程序员的JavaScript学习笔记（6——面向对象模拟）

计划按如下顺序完成这篇笔记：

1. Java程序员的JavaScript学习笔记（1——理念）
2. Java程序员的JavaScript学习笔记（2——属性复制和继承）
3. Java程序员的JavaScript学习笔记（3——this/call/apply）
4. Java程序员的JavaScript学习笔记（4——this/闭包/getter/setter）
5. Java程序员的JavaScript学习笔记（5——prototype）
6. Java程序员的JavaScript学习笔记（6——面向对象模拟）
7. Java程序员的JavaScript学习笔记（7——jQuery基本机制）
8. Java程序员的JavaScript学习笔记（8——jQuery选择器）
9. Java程序员的JavaScript学习笔记（9——jQuery工具方法）
10. Java程序员的JavaScript学习笔记（10——jQuery-在“类”层面扩展）
11. Java程序员的JavaScript学习笔记（11——jQuery-在“对象”层面扩展）
12. Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）
13. Java程序员的JavaScript学习笔记（13——jQuery UI）
14. Java程序员的JavaScript学习笔记（14——扩展jQuery UI）

这是笔记的第6篇，对前面5篇做一个总结，聊聊JavaScript在面向大型复杂任务时候，如何有效组织程序结构，如何实现代码清晰可读，如何实现开闭原则。

我们设计一个应用场景，并尝试解决这个场景中面临的问题。

作者博客：http://blog.csdn.net/stationxp

作者微博：http://weibo.com/liuhailong2008

转载请取得作者同意

1、任务

我要设计一个偏数据轻样式的前端UI的框架，实现：

1. 数据到控件的自动绑定，格式化。
2. 表单提交时，自动获取输入项的值。
   

2、分析

2.1、页面代码设计如下：

	
	


	

	

		hoby:
	
	

		wife:
		

		

			

				

					name:
				
				

					birthday:
					
				
			
		
	

	

	

		

			

				
				(
					
				)
			
		
	

开发UI库，在如上html代码和数据格式基础上，实现数据自动绑定显示。

2.2、表单提交页面代码设计如下：

		

			Your Name : 
		
		

			Message:
		
	
	 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本身的语言特性，而不是硬往自己习惯的语言习惯上拧 。