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时间: 内存分配: 磁盘吞吐量: 网络吞 ...
随机推荐
- BZOJ 3130 二分+网络流
思路: 不被题目忽悠就是思路 二分一下max 判一下等不等于最大流 搞定 7 9 1 1 2 3 1 3 3 2 3 3 3 4 2 3 5 2 3 6 1 4 7 2 5 7 2 6 7 2 这里有 ...
- BZOJ 1379 模拟退火
模拟退火的第一题~ //By SiriusRen #include <cmath> #include <cstdio> #include <algorithm> u ...
- 从C到OCblocks语法的声明
在过去的一段时间,我开始从C的一些简单声明到更复杂的学习直到我开始学习了Objective-C中的blocks.我花了很长的一段时间去理解他并且认识到一旦你理解它是怎样组织的并且是怎样产 ...
- bzoj3252: 攻略 优先队列 并查集 贪心
考场上自己yy出来的做法..... Code: #include<cstdio> #include<algorithm> #include<queue> #incl ...
- NOIP 2017 逛公园 记忆化搜索 最短路 好题
题目描述: 策策同学特别喜欢逛公园.公园可以看成一张N个点MM条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,N号点是公园的出口,每条边有一个非负权值, 代表策策经过这条边所要花的时间. ...
- opencv——图像的灰度处理（线性变换/拉伸/直方图/均衡化）
实验内容及实验原理: 1.灰度的线性变换 灰度的线性变换就是将图像中所有的点的灰度按照线性灰度变换函数进行变换.该线性灰度变换函数是一个一维线性函数:f(x)=a*x+b 其中参数a为线性函数的斜率, ...
- 认识Vue组件
前言 Vue.js是一套构建用户界面的渐进式框架(官方说明).通俗点来说,Vue.js是一个轻量级的,易上手易使用的,便捷,灵活性强的前端MVVM框架.简洁的API,良好健全的中文文档,使开发者能够较 ...
- 浅析[分块]qwq
首先说明这篇博客写得奇差无比 让我们理清一下为什么要打分块,在大部分情况下,线段树啊,splay,treap,主席树什么的都要比分块的效率高得多,但是在出问题的时候如果你和这些数据结构只是混的脸熟的话 ...
- Unity 设置窗体透明
设置窗口透明.窗口置顶.鼠标穿透 方法一. 缺点:边缘不平滑,有毛边 参考博客: 1.https://alastaira.wordpress.com/2015/06/15/creating-wi ...
- C# 快捷使用自定义配置节点
C#除了appSettings和connectionStrings默认配置外还允许用户自定义使用配置.C# 提供3中简单的自定义配置,配置文件如下 <?xml version="1.0 ...