Java程序猿的JavaScript学习笔记（6——面向对象模拟）
计划按例如以下顺序完毕这篇笔记：
- Java程序猿的JavaScript学习笔记（1——理念）
- Java程序猿的JavaScript学习笔记（2——属性复制和继承）
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
- Java程序猿的JavaScript学习笔记（4——this/闭包/getter/setter）
- Java程序猿的JavaScript学习笔记（5——prototype）
- Java程序猿的JavaScript学习笔记（6——面向对象模拟）
- Java程序猿的JavaScript学习笔记（7——jQuery基本机制）
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
- Java程序猿的JavaScript学习笔记（9——jQuery工具方法）
- Java程序猿的JavaScript学习笔记（10——jQuery-在“类”层面扩展）
- Java程序猿的JavaScript学习笔记（11——jQuery-在“对象”层面扩展）
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
- Java程序猿的JavaScript学习笔记（13——jQuery UI）
- Java程序猿的JavaScript学习笔记（14——扩展jQuery UI）
这是笔记的第6篇，对前面5篇做一个总结。聊聊JavaScript在面向大型复杂任务时候，怎样有效组织程序结构，怎样实现代码清晰可读，怎样实现开闭原则。
我们设计一个应用场景。并尝试解决这个场景中面临的问题。
作者博客：http://blog.csdn.net/stationxp
作者微博：http://weibo.com/liuhailong2008
转载请取得作者允许
1、任务
我要设计一个偏数据轻样式的前端UI的框架，实现：
- 数据到控件的自己主动绑定，格式化。
- 表单提交时，自己主动获取输入项的值。
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——面向对象模拟）的更多相关文章
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（1——理念）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（5——prototype和Object内置方法）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 《Java程序性能优化》学习笔记 设计优化
豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...
随机推荐
- Windows下Python2.7配置OpenCV2.4.10
所需文件: 1 Python2.7.13 链接: https://www.python.org/downloads/release/python-2713/ 这里选Windows 64位的安装包. 2 ...
- Everedit软件下载、安装和运行（免注册）
不多说,最近,无意中,留意到这款软件. 前言 1.这是免注册版本 (推荐,这个是别人开发做出来的,放心!) 2.这是需注册版本 (这个是去官网) EverEdit是专门为国人设计的一流文本 ...
- Intellij使用"easyexplore"
刚开始接触Intellij,里面有很多东西还不太会用,平时在eclipse里面用的很方便的easyexplore能帮助快速打开文件目录,Intellij中本身就有这样的功能,只是默认没有开启,需要我们 ...
- Nordic Collegiate Programming Contest 2015(第七场)
A:Adjoin the Networks One day your boss explains to you that he has a bunch of computer networks tha ...
- 51Nod 独木舟（贪心）
n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...
- ubuntu重启网络报错
执行:gw@ubuntu:/$ /etc/init.d/networking restart 报错:stop: Rejected send message, 1 matched rules; type ...
- MySql系列之初识
数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运 ...
- 云服务器 ECS Linux 系统下使用 dig 命令查询域名解析
云服务器 ECS Linux 系统可以使用通常自带的 dig 命令来查询域名解析情况.本文对此进行简要说明. 查询域名 A 记录 命令格式: dig <域名> 比如,查询域名 www.al ...
- COGS——T1588. [USACO FEB04]距离咨询
http://cogs.pro/cogs/problem/problem.php?pid=1588 ★★ 输入文件:dquery.in 输出文件:dquery.out 简单对比时间限制:1 ...
- FZOJ 2176 easy problem ( 树链剖分 )
pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...