计划按如下顺序完成这篇笔记:
- 理念。
- 属性复制和继承。
- this/call/apply。
- 闭包/getter/setter。
- prototype。
- 面向对象模拟。
- jQuery基本机制。
- jQuery选择器。
- jQuery工具方法。
- jQuery-在“类”层面扩展。
- jQuery-在“对象”层面扩展。
- jQuery-扩展选择器。
- jQuery UI。
- 扩展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本身的语言特性,而不是硬往自己习惯的语言习惯上拧 。
分享到:
相关推荐
java8 Stream API及常用方法,java初级程序员面试(csdn)————程序
Java程序员应该了解的10个面向对象设计原则,对你对面向对象设计思想有更好的了解和掌握。
程序员晋升.doc————电子版_doc版
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
本书是本人目前所看到的国内最好的jquery学习指导书,通俗易懂,深入浅出,一切都从实际开发出发,让大家很快就能上手做ajax开发!因为本书比较大,只能分为多个分卷,请大家谅解!
菜鸟成长之路 Java程序员职场全攻略笔记
我招了个“水货”程序员(csdn)————程序
java程序员2016最新面试题ssm面向对象.pdf,这是一份不错的文件
最重要的面向对象基础,不可不读
Java程序员面试笔试宝典-何昊pdf版,高清,带有书签。
软考程序员历年真题2004上——2009下 很全的,也很清晰
观黑马程序员JAVA学习笔记