计划按例如以下顺序完毕这篇笔记：

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

Java程序猿的JavaScript学习笔记（6——面向对象模拟）的更多相关文章

  1. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿的JavaScript学习笔记（1——理念）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿的JavaScript学习笔记（5——prototype和Object内置方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. 《Java程序性能优化》学习笔记 设计优化

    豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...

随机推荐

  1. Pure functions

    In the next few sections, we’ll write two versions of a function called add_time, which calculates t ...

  2. 页面出现AXURE RP EXTENSION，怎么办？

    (可参考百度经验,地址:https://jingyan.baidu.com/article/54b6b9c0c1cb762d583b4706.html) 本文以强大如斯的谷歌浏览器来说明,怎么查看Ax ...

  3. Python对象的循环引用问题

    目录 Python对象循环引用 循环引用垃圾回收算法 容器对象 生成容器对象 追踪容器对象 结束追踪容器对象 分代容器对象链表 何时执行循环引用垃圾回收 循环引用的垃圾回收 循环引用中的终结器 pyt ...

  4. 紫书 例题 10-20 UVa 10900（连续概率）

    分两类,当前第i题答或不答 如果不回答的话最大期望奖金为2的i次方 如果回答的话等于p* 下一道题的最大期望奖金 那么显然我们要取最大值 所以就要分类讨论 我们设答对i题后的最大期望奖金为d[i] 显 ...

  5. springboot实现热部署，修改代码不用重启服务

    1.引入热部署依赖 <!-- 热部署模块 --> <dependency> <groupId>org.springframework.boot</groupI ...

  6. Java Web学习总结（20）——基于ZooKeeper的分布式session实现

    1．   认识ZooKeeper ZooKeeper-- "动物园管理员".动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始 ...

  7. ECNUOJ 2143 端午节快乐

    端午节快乐 Time Limit:1000MS Memory Limit:65536KBTotal Submit:1720 Accepted:868 Description  有一段有趣的传说.公元前 ...

  8. centos7 安装rsyslog

    http://blog.csdn.net/u011630575/article/details/50896781 http://blog.chinaunix.net/uid-21142030-id-5 ...

  9. 国庆 day 6 上午

    1. 角谷猜想(kakutani.pas/c/cpp)(kakutani.in/out)时间限制:1s/空间限制:256M[题目描述] 某个名字末尾是 654321 的小 A 同学是个大家眼中公认的学 ...

  10. CSS3绘制砖墙-没实用不论什么图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...