- 浏览: 291152 次
- 性别:
- 来自: 昆明
文章分类
最新评论
-
wwangchenyu:
这个工具相当牛逼,太好用了~
Dash:程序员的的好帮手 -
woshi555bin:
...
原创:基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) -
cosmo1987:
赞
Dash:程序员的的好帮手 -
jofy1004:
很强大的工具
Dash:程序员的的好帮手 -
riseliang:
高大上!高大上!高大上!
Dash:程序员的的好帮手
在上一篇文章中,我们用静态页面的方式,设计出了分页模板的表现形式,接下来让我们利用javascript这个强大的操盘手来粘合其余的部分吧。
第一步,我们需要设计一个抽象的基类,来实现代码复用(js的OO,不就是为了这个么,还有就是方便管理代码而已)。
首先,我们搞个命名空间来管理基类及其子类:
为啥叫“Tbi”?就不要问了,项目组的名称而已,呵呵:)接下来考虑我们的模板基类,他有什么特征呢?
1、需要持有一个到页面容器的引用,以便将自身加入页面流;
2、需要保存用户设定的每页显示条目数;
3、需要保存获取分页数据的服务器端地址(URL);
这些成员可以通过构造器来初始化,除此之外,为了避免数据更新发生混乱(这个在异步非缓存的时候需要注意),还要有一个全局异步对象来获取数据,但不需要通过参数提供。
定义了成员变量,模板对象还需要有可操作的方法:
1、构造函数:initialize,这个方法在构建Prototype风格构建类,实例化对象的时候会自动调用。另外有一些技巧下面会提到;
2、在数据获取过程中,显示等待信息的方法:_showMessage,这里只是简单显示一句话,可以按需替换成显示图片等;
3、显示模板初始页面的show方法(其中有两个故意设计的事件入口,供今后扩展使用):
A、调用beforeShow,默认为空方法,什么也不做,可按需设定;
B、调用_display方法,显示模板初始页面:
a、调用2中的方法显示等待信息;
b、调用_catchContent方法异步获取服务器数据。此方法可由所有模板共用,因此放到基类中达到代码重用。可 以看到, 我们为了细粒度的控制Prototype的ajax封装,使用了transport属性。
c、在成功返回服务器数据之后,addContent方法将把分页内容添加到容器中,分两步来做:
(1) addPage方法作为回调函数添加模板主体——抽象方法,由子类实现。
(2) addNavigation方法根据实际情况生成并添加分页导航——抽象方法,我将它在一个子类中实现然后演示
混入(mixin),其实完全可以在基类中提供达到同样的代码复用效果。
一些技巧:
为了实现在子类中覆盖initialize构造函数,我们只需要将基类的成员初始化工作委托给_init方法即可,下面会看到他的作用。
模仿事件处理机制,我们留下了两个事件入口beforeShow和afterShow,分别可以设置显示前事前和显示后事件。
Prototype为Function对象扩展了一个bind方法和bindAsEventListener方法,可以很方便的将函数上下文(this)切换为别的对象,这里,我们切换为模板对象。bind和bindAsEventListener的功用相似,但是有一点区别,用bind切换的方法,如果有自动传入的参数,比如事件对象event,那么这个参数将被自动传入函数参数列表的最后,而后者则是自动传入函数参数列表的最前面,这个技巧很常用。比如改写一下上面的代码,我给onComplete事件传入一个自定义参数tmyArg,使用两种不同的绑定方法(xmlhttp是Prototype自动传入回调函数的参数):
第二步,实现静态模板类StaticTemplate。对于静态模板,其显示过程是这样的:向服务器发起一次异步请求,返回所有分页数据,服务器按照客户设定的每页显示数量来生成所有页,一次新传回客户端。每一页由一对tbody元素定义,然后通过css类名来讲所有的页面隐藏,最后由客户端js来控制显示页面,初始显示第一页。服务器返回的数据格式如下(只要结构一样就可以了,没有行、列数目的限制,这可以参看前一篇文章中的css设定了解,是可以随表格大小伸缩的),总条目数为6,分了两页:
StaticTemplate类中,addPage方法统计table中tbody元素的个数来确定总页数,并附加到对象上。以供addNavigation方法成分页导航信息:
在addNavigation方法中,又一次用到了前面提过的bindAsEventListener技巧,并通过切换css类名来达到突出显示当前页码以及显示页面。
具体的StaticTemplate代码实现如下:
这样,我们就完成了静态分页模板的设计和实现,下一步是实现动态异步的两种获取方式模板。
接下来的内容,请参看:
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(下)
推荐帖子里面简要介绍下内容,具体代码作为附件上传,省时省力,呵呵。
第一步,我们需要设计一个抽象的基类,来实现代码复用(js的OO,不就是为了这个么,还有就是方便管理代码而已)。
首先,我们搞个命名空间来管理基类及其子类:
js 代码
- var Tbi = new Object(); //全局命名空间
为啥叫“Tbi”?就不要问了,项目组的名称而已,呵呵:)接下来考虑我们的模板基类,他有什么特征呢?
1、需要持有一个到页面容器的引用,以便将自身加入页面流;
2、需要保存用户设定的每页显示条目数;
3、需要保存获取分页数据的服务器端地址(URL);
这些成员可以通过构造器来初始化,除此之外,为了避免数据更新发生混乱(这个在异步非缓存的时候需要注意),还要有一个全局异步对象来获取数据,但不需要通过参数提供。
定义了成员变量,模板对象还需要有可操作的方法:
1、构造函数:initialize,这个方法在构建Prototype风格构建类,实例化对象的时候会自动调用。另外有一些技巧下面会提到;
2、在数据获取过程中,显示等待信息的方法:_showMessage,这里只是简单显示一句话,可以按需替换成显示图片等;
3、显示模板初始页面的show方法(其中有两个故意设计的事件入口,供今后扩展使用):
A、调用beforeShow,默认为空方法,什么也不做,可按需设定;
B、调用_display方法,显示模板初始页面:
a、调用2中的方法显示等待信息;
b、调用_catchContent方法异步获取服务器数据。此方法可由所有模板共用,因此放到基类中达到代码重用。可 以看到, 我们为了细粒度的控制Prototype的ajax封装,使用了transport属性。
c、在成功返回服务器数据之后,addContent方法将把分页内容添加到容器中,分两步来做:
(1) addPage方法作为回调函数添加模板主体——抽象方法,由子类实现。
(2) addNavigation方法根据实际情况生成并添加分页导航——抽象方法,我将它在一个子类中实现然后演示
混入(mixin),其实完全可以在基类中提供达到同样的代码复用效果。
js 代码
- /*
- * 模板基类
- */
- Tbi.Template = Class.create();
- Tbi.Template.prototype = {
- initialize: function(){
- this._init.apply(this,arguments);
- },
- _init: function(wrap,items,catchUrl) {
- this.wrap = $(wrap);
- this.items = items;
- this.catchUrl = catchUrl;
- this.ajax = null; //全局异步对象
- },
- // 显示等待信息
- _showMessage: function(text){
- this.wrap.innerHTML = text;
- },
- // 显示模板默认页面
- show: function(){
- this.beforeShow(); //显示前事件处理入口
- this._display();
- this.afterShow(); //显示后时间处理入口
- },
- // 显示前事件处理入口
- beforeShow: function(){},
- _display: function(){
- this._showMessage("正在获取数据,请稍等……");
- this._catchContent();
- },
- //取得默认页面内容,由两个模板公用
- _catchContent: function(){
- if(this.ajax){
- this.ajax.transport.abort();
- }
- this.ajax = new Ajax.Request(
- this.catchUrl,
- {
- method: "get",
- parameters: {"mode":this.mode,"items":this.items},
- onComplete: this.addContent.bind(this)
- }
- );
- },
- // 添加页面内容
- addContent: function(xmlhttp){
- this.addPage(xmlhttp); //抽象方法,添加页面内容
- this.addNavigation(); //抽象方法,添加分页导航
- },
- // 显示后事件处理入口
- afterShow: function(){}
- }
一些技巧:
为了实现在子类中覆盖initialize构造函数,我们只需要将基类的成员初始化工作委托给_init方法即可,下面会看到他的作用。
模仿事件处理机制,我们留下了两个事件入口beforeShow和afterShow,分别可以设置显示前事前和显示后事件。
Prototype为Function对象扩展了一个bind方法和bindAsEventListener方法,可以很方便的将函数上下文(this)切换为别的对象,这里,我们切换为模板对象。bind和bindAsEventListener的功用相似,但是有一点区别,用bind切换的方法,如果有自动传入的参数,比如事件对象event,那么这个参数将被自动传入函数参数列表的最后,而后者则是自动传入函数参数列表的最前面,这个技巧很常用。比如改写一下上面的代码,我给onComplete事件传入一个自定义参数tmyArg,使用两种不同的绑定方法(xmlhttp是Prototype自动传入回调函数的参数):
js 代码
- //用bind方法
- this.addContent.bind(this,myArg)
- //调用方式
- this.addContent(myArg,xmlhttp)
- //用bindAsEventListener方法
- this.addContent.bindAsEventListener(this,myArg)
- //调用方式
- this.addContent(xmlhttp,myArg)
第二步,实现静态模板类StaticTemplate。对于静态模板,其显示过程是这样的:向服务器发起一次异步请求,返回所有分页数据,服务器按照客户设定的每页显示数量来生成所有页,一次新传回客户端。每一页由一对tbody元素定义,然后通过css类名来讲所有的页面隐藏,最后由客户端js来控制显示页面,初始显示第一页。服务器返回的数据格式如下(只要结构一样就可以了,没有行、列数目的限制,这可以参看前一篇文章中的css设定了解,是可以随表格大小伸缩的),总条目数为6,分了两页:
xml 代码
- <table id='pages'>
- <caption>静态分页模板</caption>
- <thead>
- <tr>
- <th>标题一</th>
- <th>标题二</th>
- <th>标题三</th>
- <th>标题四</th>
- <th>标题五</th>
- <th>标题六</th>
- </tr>
- </thead>
- <tbody class='hidden'>
- <tr>
- <td>1</td>
- <td>1</td>
- <td>1</td>
- <td>1</td>
- <td>1</td>
- <td>1</td>
- </tr>
- <tr>
- <td>2</td>
- <td>2</td>
- <td>2</td>
- <td>2</td>
- <td>2</td>
- <td>2</td>
- </tr>
- <tr>
- <td>3</td>
- <td>3</td>
- <td>3</td>
- <td>3</td>
- <td>3</td>
- <td>3</td>
- </tr>
- <tr>
- <td>4</td>
- <td>4</td>
- <td>4</td>
- <td>4</td>
- <td>4</td>
- <td>4</td>
- </tr>
- </tbody>
- <tbody class='hidden'>
- <tr>
- <td>5</td>
- <td>5</td>
- <td>5</td>
- <td>5</td>
- <td>5</td>
- <td>5</td>
- </tr>
- <tr>
- <td>6</td>
- <td>6</td>
- <td>6</td>
- <td>6</td>
- <td>6</td>
- <td>6</td>
- </tr>
- </tbody>
- </table>
StaticTemplate类中,addPage方法统计table中tbody元素的个数来确定总页数,并附加到对象上。以供addNavigation方法成分页导航信息:
js 代码
- this.pageTotal = this.wrap.getElementsByTagName("tbody").length;
在addNavigation方法中,又一次用到了前面提过的bindAsEventListener技巧,并通过切换css类名来达到突出显示当前页码以及显示页面。
具体的StaticTemplate代码实现如下:
js 代码
- /*
- * 静态模板,一次请求全部数据
- */
- Tbi.StaticTemplate = Class.create();
- Tbi.StaticTemplate.prototype = Object.extend(new Tbi.Template(),
- {
- /*
- * 构造函数,实例化静态模板
- * 参数:父容器,每页显示条目数,数据获取地址
- */
- initialize: function(wrap,items,catchUrl){
- this._init(wrap,items,catchUrl);
- this.mode = "static";
- },
- // 实现父类抽象方法,向页面添加默认分页
- addPage: function(xmlhttp){
- this.wrap.innerHTML = xmlhttp.responseText;
- this.pageTotal = this.wrap.getElementsByTagName("tbody").length;
- var table = $("pages");
- var pages = $A(table.getElementsByTagName("tbody"));
- displayPage = pages[0];
- displayPage.className = "";
- },
- // 实现父类抽象方法,向页面添加分页导航
- addNavigation: function(){
- if(this.pageTotal>1){
- var navigation = document.createElement("div");
- navigation.id = "navigation";
- var context = this;
- $R(1,this.pageTotal,false).each(
- function(item){
- var link = document.createElement("a");
- link.href = "#";
- link.onclick = context._changePage.bindAsEventListener(context,link);
- link.appendChild(document.createTextNode(item));
- if(item==1){
- link.className = "active";
- }
- navigation.appendChild(link);
- }
- );
- this.wrap.appendChild(navigation);
- }
- },
- // 导航链接点击事件处理函数,切换页面内容,同时改变导航链接样式(突出显示当前页)
- _changePage: function(event,link){
- var activeLink = $$('#TMPwrap div a[class="active"]')[0];
- if(activeLink != link){
- var pages = $$("#TMPwrap tbody");
- var oldPage = pages.find(
- function(item){
- return item.className == "";
- }
- );
- var newPage = pages[link.firstChild.nodeValue-1]; //inner系列属性不兼容ff
- oldPage.className = "hidden";
- newPage.className = "";
- activeLink.className = "";
- link.className = "active";
- }
- Event.stop(event);
- }
- }
- );
这样,我们就完成了静态分页模板的设计和实现,下一步是实现动态异步的两种获取方式模板。
接下来的内容,请参看:
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(下)
评论
9 楼
vito_fh
2007-06-12
学习一下
8 楼
agile_boy
2007-05-29
在OO的包装方面,我觉得mootools挺不错的
7 楼
笨笨狗
2007-05-29
to jiangzhen1984:
之所以这么写,就是为了探讨Prototype风格的OO特性。其实如此包装的话,是可以提高可维护性的,增加命名空间,封装成类、对象。
dwr,个人对那种数据通信方式不是很感冒。相反,自己定义好数据传输格式,可以更灵活,比如支持REST架构。
之所以这么写,就是为了探讨Prototype风格的OO特性。其实如此包装的话,是可以提高可维护性的,增加命名空间,封装成类、对象。
dwr,个人对那种数据通信方式不是很感冒。相反,自己定义好数据传输格式,可以更灵活,比如支持REST架构。
6 楼
jiangzhen1984
2007-05-29
我觉得你写的代码太复杂了,当然如果是为了功能强大,那就没什么好说的了 你的支持DWR吗?
我个人认为JS代码 越简单越好 因为JS代码可维护性太低了
我个人认为JS代码 越简单越好 因为JS代码可维护性太低了
5 楼
InnocentBoy
2007-05-18
好东西,共欣赏。
4 楼
simohayha
2007-05-16
呵呵,有bug可以给ouc jj报告呀。
3 楼
leondu
2007-05-16
笨笨狗 写道
抱怨一句,je的代码编辑工具真的是太难用了啊,老是显示有问题,怎么回事?好影响心情,为了正确显示html代码,我都改了无数的次了,不知道是什么bug……
推荐帖子里面简要介绍下内容,具体代码作为附件上传,省时省力,呵呵。
2 楼
agile_boy
2007-05-16
不错的学习示例
1 楼
笨笨狗
2007-05-16
抱怨一句,je的代码编辑工具真的是太难用了啊,老是显示有问题,怎么回事?好影响心情,为了正确显示html代码,我都改了无数的次了,不知道是什么bug……
发表评论
-
Javascript数组类型检测:编写更强壮的isArray函数
2009-01-19 13:17 11447在日常开发中,我们经 ... -
我看《Ajax企业级开发》
2008-12-03 15:55 3705Ajax从2005年 ... -
原创:基于Prototype,利用Canvas绘图实现的web流程图设计器(原型)
2008-04-16 10:18 15823刚才在首页看到这么个 ... -
发布一个基于Prototype和Canvas实现的仿Google导航条
2008-04-15 11:42 11138前几天在一个叫做友财 ... -
Prototype1.6以下Element.setStyle()的bug
2007-12-01 11:40 2159问题:如果在frame、iframe页面中使用了setStyl ... -
最值得期待的好书:《Pro CSS and HTML Design Patterns》
2007-05-28 17:24 9442没事上Apress的网站闲逛,偶然发现这本新书 ... -
AJAX表格分页模板(续):服务器端实现
2007-05-23 17:08 8741AJAX表格分页模板:探讨基于Prototype框架的java ... -
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(下)
2007-05-18 13:10 11479AJAX表格分页模板:探讨基于Prototype框架的java ... -
为aptana增加firefox预览tab
2007-05-17 14:09 6607一直以来,aptana都是我首选的AJAX前台 ... -
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(上)
2007-05-14 19:16 12415数据分页显示,是很普遍的需求,传统的实现大多是 ... -
我看《javascript dom编程艺术(dom scripting)》
2007-01-31 02:49 2815这本书在刚出版的时候,编辑就送了一本给我,可惜那段时间出差在外 ... -
腾讯,我无言了
2007-03-14 10:11 2185今天看到一个python群公告上显示有新的文章,好奇点进去想到 ... -
初学者的良师益友——写在《Ajax与Java高级程序设计》出版之际
2007-03-29 02:22 1919最近有朋友向我询问如 ...
相关推荐
火龙果软件工程技术中心 数据分页显示,是很普遍的需求,传统的实现大多是基于服务器端导航的,这种设计采用同步方式进行数据传输,用户体验很差。下面是我在学习ajax的过程中,实现的一个解决方案,不知道设计得...
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
程序描述:本章将利用开源框架Prototype,讲述如何在网页中实现Windows关机效果,使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章...
原书附带光盘文件 第2章 02/ 基于Ajax的留言板示例 第3章 03/3.1.3.html JavaScript在Ajax中的作用范例 03/3.4.6.html 加入注释,实现九九乘法表 03/3.4.11.html 使用逻辑表达式...
与DotNet数据对象结合的自定义数据对象设计 (一) 数据对象与DataRow ASP.NET中大结果集的分页[翻译] .net 2.0 访问Oracle --与Sql Server的差异,注意事项,常见异常 Ado.net 与NHibernate的关系? 动态创建数据库...
在随后的“Rails框架“部分中,作者深入介绍了Rails框架的各个组件。 除了上述两部分外,对Rails缺乏了解的读者应该首先阅读“起步”部分,通过一个最简单的应用示例感性了解这个时下热门的web框架。不熟悉Ruby的...
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用...
1、面向对象的特征有哪些方面? 8 2、作用域public,private,protected,以及不写时的区别? 8 3、String 是最基本的数据类型吗? 8 4、float 型float f=3.4是否正确? 8 5、语句float f=1.3;编译能否通过? 8 6、short ...
116、JavaScript中的对象. 25 117、function的用法 26 118、对象的继承 27 119、this的用法 29 120、Array in JavaScript 29 121、jsp有哪些内置对象?作用分别是什么? 31 122、jsp有哪些动作?作用分别是什么? 31 123...