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

27 篇文章 0 订阅
16 篇文章 0 订阅
计划按如下顺序完成这篇笔记:
  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、页面代码设计如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<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>
</head>
<body>
	<h1 datapath='name'></h1>
	<p>
		<label>hoby:</label><span datapath='hobby' ></span>
	</p>
	<p>
		<label>wife:</label><span datapath='family.wife' ></span>
		<p>
		<ul>
			<li datapath='family.children' loopvar='child'>
				<p>
					<label>name:</label><span datapath='child.name' ></span>
				</p>
				<p>
					<label>birthday:</label>
					<span datapath='child.birthday' format='yyyy年MM月dd日' ></span>
				</p>
			</li>
		</ul>
	</p>
	</p>
	<p>
		<ul>
			<li datapath='skills' loopvar='skill'>
				<span datapath='skill.name' ></span>
				(
					<span datapath='skill.level' ></span>
				)
			</li>
		</ul>
	</p>
</body>
</html>

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

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

<form name='msgForm'>
		<p>
			Your Name : <input id='myname' name='myname' />
		</p>
		<p>
			Message:<textarea id='msg'></textarea>
		</p>
	</form>
	<button οnclick="sendMsg()"> Send Message </button>
在如上代码基础上,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本身的语言特性,而不是硬往自己习惯的语言习惯上拧 。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值