毕业设计论文-基于jquery框架的原理分析与实例应用

基于jquery框架的原理分析与实例应用前言目录毕业设计任务书 Ⅰ开题报告 Ⅱ指导教师审查意见 Ⅲ评阅老师评语 Ⅳ中文摘要 Ⅴ外文摘要 ⅥTOC\o"1-3"\h\u146471前言 页基于J2EE新闻发布系统的原理分析与实例应用1前言 近年来，随着网络发展的普及，人们越来越容易接触接触大量的新闻信息，对新闻信息的接触需求也愈发强烈，如何更好地实现新闻信息的发布，越来越成为新世纪信息发展的潮流。特别是针对信息的海量更新和发布，随时发布最新、最热门的消息，做到即时发布、即时浏览的效果，对于无论身处何时何地的用户都能快捷接收信息，这是以往普通传播平台所不容易做到的。而一个好的新闻发布系统，一方面有利于管理者对信息流量和效率的管控，实现高效信息管理，另一方面对于信息接收者，无论是电脑客户端还是手机客户端，都能实现方便快捷登陆注册，获取信息的功能，这就是我们所要追求的趋势。选题背景选题背景2选题背景2.1、基于J2EE新闻发布系统如今，新闻信息越来越与人们生活息息相关了，生活中处处存在新闻，而对于媒体新闻管理信息化的研究很早就开始了。在美国，许多地区的都建立了为管理服务的计算机网络。这些网络既有综合性的，也有专业性的，它们专门负责对新闻信息的管理和运行，保证信息的及时发布和处理，在国外，对信息的管理专业化水准已达到一定水平。通过建立数据仓库，采用数据挖掘等技术，各种类型的媒体新闻信息管理共享系统在不同行业中应用。新世纪，新闻行业面临更为严峻的挑战，如何有效分配、利用资源，冲分发挥新闻管理系统的力量，成为日益重要的事情。网络技术正是一种有效的解决途径，早在上世纪60年代，网络的概念己被详细阐述过直到20世纪90年代网络的先驱们才给出了网络的具体形式，科学界一直领导着网络技术的发展，并利用这些先进的数据与信息技术，来创建和计算数据管理基础设施。在我国，新闻信息管理部门实现电子信息化、管理信息化已经是一种发展趋势，许多的地方部门已经进行网络化的管理信息服务与管理建设与实施【1】，数字化系统在信息管理部门的建设中也起到了一定的作用与效果。在此基础之上，中国的数字信息管理上的信息化建设已进入一个新时期，即从基础设施设计到整体应用的深刻革新的时期。党的十六大把加强电子信息化当做一项基本国策加入到新的五年计划当中，革命性的推动了新闻信息化管理。经过近20年的发展，我国新闻媒体在信息发展方面取得了长足的进步，虽然各地区因为技术和资金的局限，信息发展良莠不齐，但是发展前景是光明广阔的，相信随着技术的进步，我国的新闻信息化水平能更上一层楼。2.2、J2EE的优势首先J2EE是一套有别于传统应用开发的技术架构，它包含了很多组件，可以简化并且规范应用系统的开发与部署，从而更好的提高可移植性、安全性和再用价值。J2EE的各类组件、服务架构及技术层次是它的核心层面，正是因为这一组技术规范与标准，让各种遵循J2EE架构的不同平台之间，存在良好的兼容性，从而解决了以往后端使用的信息产品之间的兼容性问题。总结来说，J2EE具有以下优势：保留现存的IT资产作为一个需要实时发布新闻的信息系统，首先需要能“保存”已有资，J2EE架构就可以很好的做到这点，J2EE拥有广泛的“共有资源”每一个供应商都对现已有的客户提供了不用废弃已有投资，进入可移植的J2EE领域的升级途径。同时基于J2EE平台的产品几乎能够在任何操作系统和硬件配置上运行，现有的操作系统和硬件也能被保留使用。支持异构环境J2EE能够开发部署在异构环境中的可移植程序。基于J2EE的新闻发布系统可以不依赖任何特定操作系统、中间件和硬件，程序员只需开发一次就可部署到各种平台，从而节省了所需的相关费用。能高效的开发J2EE可以把发一些繁琐的、能通用的服务端任务交给供应商去完成，这样程序员就可以把更多的精力花到如何便捷方便客户使用体验的功能逻辑上。可伸缩性基于J2EE的应用程序具有很强的兼容性，可被部署到各种操作系统上，从而可以满足未来各种潜在商业应用。很强的稳定性一个服务器端平台，首先要能24小时满足客户的使用需求，服务器端平台的意外事故会直接导致用户无法使用相关应用程序。J2EE部署到可靠的操作环境中，能支持长期的可用性，从而有效保证用户需求。2.3、论文实践意义随着网络的普及和发展，人们对新闻信息的需求越来越大，这就需要一个完善的新闻发布系统，来满足人们日益增长的消息需求。基于J2EE的新闻发布系统，首先在伸缩新上满足了客户的基本要求，能够适用于各种操作系统。其次，信息的完善度上也非常出色，能够保已有的新闻资源，方便用户的使用。同时，基于J2EE的新闻发布系统具有很强的稳定性，能够保证用户全天候的完整用户体验，从而保证用户需求。目前对于新闻发布系统的研究还是具有很大的发展空间，随着用户对相关需求的越来越多，要求越来越高，开发者对系统的完善要求也愈发严格，该论文的实际意义在于进一步完成对新闻发布系统性能完善的探索。2.4、论文主要工作内容与组织结构2.4.1、论文主要工作内容论文工作主要以jQuery框架为基础，并在jQuery的基础上对一些项目中常用的js操作进行有效且合理的封装。主要工作内容包括：（1）研究jQuery的核心源码，学习jQuery框架的整体架构方式及代码编码风格。（2）基于jQuery框架，封装一套属于自己的js库。（3）测试该js库在不同应用、不同浏览器下的稳定性。2.4.2、论文组织结构：阐述论文工作背景与研究意义，并进行相关文献综述。：介绍jQuery的市场应用以及技术优势。：深入分析jQuery技术。：简要讲解自己封装后的js库。：对封装后的js库进行测试与总结。最后，对论文工作进行了全面总结与展望jQuery框架原理分析方案论证3关键技术介绍3.1、JQUERY框架3.1.1JQUERY概述JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE

6.0+,

FF1.5+,

Safari

2.0+,

Opera

9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。jQuery是一个兼容多浏览器的javascript库，核心理念是writeless,domore(写得更少,做得更多)。jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由DaveMethvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。3.1.2JQUERY特点3.2、J2EE介绍3.2.1J2EE发展历史3.2.2J2EE广泛应用4系统应用开发4.1、需求分析4.1.1需求分析流程4.1.2分析方法图3-1jQuery的模块分类jQuery框架原理分析在构建jQuery对象的模块中，如果我们在调用构造函数jQuery()对象时传入了选择器表达式，jQyery则会调用Sizzle选择器来遍历文档，然后查找与之匹配的DOM元素，并且创建一个包含了这些DOM元素引用的jQuery对象。jQuery的选择器Sizzle是一款全部由javacsript来实现的CSS选择器引擎，主要用于查找与选择器表达式所匹配的元素集合。jQuery的工具方法模块提供了很多编程辅助方法来用于简化对jQuery对象、DOM元素、字符串、对象、数组等相关的操作，例如，map()、.each()、jQuery.map()、jQuery.each()等，其他所有的模块都有用到工具方法模块。浏览器的功能测试模块提供了针对各种浏览器功能以及bug的测试结果，而其他模块则基于这些测试结果来解决浏览器之间令人讨厌的兼容性问题。在这些底层支持的模块中，回调函数列表主要用于增强对回调函数的相关管理，支持锁定、触发、移除、添加、禁用回调函数等功能；异步队列模块则用于解耦异步任务，回调函数，它在回调函数列表的基础上为回调函数增加了不同的状态，并且提供了多个回调函数列表，支持传播任意同步或者异步回调函数的成功以及失败状态；数据缓存模块则用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的出队和入队的操作，并确保了函数按顺序执行，它基于数据缓存模块的实现。在功能模块中，事件系统则提供了统一的事件响应、绑定、手动触发和移除机制，事实上它并没有将事件直接绑定到DOM元素上，而是以数据缓存模块来管理事件；Ajax模块则允许从服务器上来加载数据，而不用去刷新页面，它是基于异步队列模块来触发和管理回调函数；动画模块用于向网页中添加各种动画效果，它基于队列模块来执行和管理动画函数；属性操作模块用于对DOM属性和HTML属性来进行移除、读取和设置的操作；DOM遍历模块用于在DOM树中遍历父元素、子元素、兄弟元素；DOM操作模块用于替换、复制、移除和插入DOM元素；样式操作模块用于设置内联样式或获取计算样式；坐标模块用于设置或读取DOM元素的文档坐标；尺寸模块则用于获取DOM元素的宽度以及高度。下面是jQuery源码的总体结构：(function(window,undefined){

//构造jQuery对象

var

jQuery=(function(){

var

jQuery=function(selector,context){

return

new

jQuery.fn.init(selector,context,rootjQuery);

},

//一堆局部变量声明

jQuery.fn=jQtotype={

constructor:jQuery,

init:function(selector,context,rootJQuery){...},

//一堆原型属性及方法

};

jQtotype=jQuery.fn;

jQuery.extend=jQuery.fn.extend=function(){...};

jQuery.extend({

//一堆静态属性和方法

});

return

jQuery;

})();

//省略其他模块的代码

window.jQuery=window.$=jQuery;})(window);、jQuery对象不是通过

new

jQuery

创建的，而是通过

new

jQuery.fn.init

创建的。、jQuery对象就是jQuery.fn.init对象。、如果执行newjQeury(),生成的jQuery对象会被抛弃，最后返回

jQuery.fn.init对象；因此可以直接调用jQuery(selector,context)，没有必要使用new关键字。、先执行

jQuery.fn=jQtotype，再执行

jQtotype=jQuery.fn，合并后的代码如下：jQtotype=jQuery.fn=jQtotype所有调用jQuery.fn的方法，相当于调用了jQtotype，即调用了jQuery

函数上（一开始的

jQuery=

function(selector,context)

），但是最后都相当于调用了jQtotype，即相当于调用了一开始的jQuery

函数返回的对象上，即调用了我们最终使用的jQuery对象上。4.2、构造jQuery对象如果调用构造函数jQuery()时传入的参数不同，创建jQuery对象的逻辑也会随之不同。构造函数jQuery()有7种方式。如图3-2所示：图3-2构造函数jQuery()1.jQuery(selector[,context])在jQuery中，如果传入一个字符串的参数，jQuery则会去检查这个字符串是选择器表达式或者是HTML代码。如果是选择器表达式，则会去遍历文档，查找与之相匹配的DOM元素，并且创建一个包含了这些DOM元素引用的jQuery对象；如果没有元素与之相匹配，则会创建一个空的jQuery对象，当然，其中不会包含任何元素，其属性length等于0。在默认情况下，对匹配元素的相关查找将会从根元素document对象开始，即它的查找范围是整个文档树，当然，你也可以传入第二个参数context来限定查找范围。例如，在一个单击事件监听函数中，可以像下面这样来限制查找范围：

$('div.foo').click(function(){

$('span',this).addClass('bar');//限定查找范围

});

在上面的这个例子中，对选择器表达式“span”的查找将被限制在this的范围内，即只有被点击元素内的span元素才会被添加类样式“bar”。

如果选择器表达式selector是一个简单的“#id”，并且没有指定相关的上下文context，则调用浏览器原生方法document.getElementById()来查找属性id等指定值的元素；如果是一个比“#id”复杂的选择器表达式或者指定了上下文，则通过jQuery方法.find()来查找，因此$(“span”,this)是等价于$(this).find('span’)的。2.jQuery(html[,ownerDocument])、jQuery(html,props)如果传入的相关字符串参数看起来非常像一段HTML代码（如，传入的字符串字符串中含有<tag…>），jQuery则会尝试用这段HTML代码创建新的DOM元素，并且创建一个包含了这些DOM元素引用的jQuery对象。例如，下面的代码将把HTML代码转换成DOM元素并插入body节点的末尾：

$(‘<pid=“test”>My<em>new</em>text</p>’).appendTo(‘body’);

如果HTML代码是一个单独的标签，例如，$('<a></a>')或$('<img/>')，jQuery框架会使用浏览器原生的方法document.createElement()来创建DOM元素。如果是比单独标签更加复杂的HTML片段，例如上面例子中的$('<pid="test">My<em>new</em>text</p>')，则利用浏览器的innerHTML机制来创建DOM元素，这个过程由方法jQuery.clean()和方法jQuery.buildFragment()实现。第二个参数ownerDocument则用于指定创建新DOM元素的文档对象，如果不传入第二个参数，则会默认为当前的文档对象。

如果传入的HTML代码是一个单独的标签，那么第二个参数则还可以是props，props是一个包含了属性、事件的普通对象；在调用document.createElement()创建DOM元素后，参数props将会被传给jQuery的方法.attr()，然后由.attr()方法负责把参数props属性、事件设置到新创建的DOM元素上。参数props的属性可以设置成任意的事件类型（如“click”），此时的属性值应该是事件监听函数，它将被绑定到新创建的DOM元素上；参数props可以包含以下特殊属性：height、val、html、css、text、data、offset、width，相应的jQuery方法：.val()、css()、offset()、text()、data()、width()、height()、html()将被执行，并且属性值将会作为参数传入；其他类型的属性值则会被设置到新创建的DOM元素上，某些特殊的属性还会做跨浏览器兼容（如type、value、tabindex等）；可以通过属性名class来设置类样式，但记得要用引号把class包裹起来，因为class是JavaScript的保留字。例如，在下面例子中，创建一个div元素，并且设置类样式为“test”、设置文本内容为“Clickme!”、绑定一个单击事件，然后插入在body节点的末尾，当点击该div元素时，它还会切换类样式test：

$("<div/>",{

"class":"test",

text:"Clickme!",

click:function(){

$(this).toggleClass("test");

}

}).appendTo("body");3.jQuery(element)、jQuery(elementArray)

如果传入一个DOM元素数组或者DOM元素，则会把DOM元素封装到jQuery对象中并且返回。这个功能常用于事件监听函数，即把关键字this引用的DOM元素封装为一个jQuery对象，然后在该jQuery对象上调用jQuery方法。例如，在下面的例子中，先调用$(this)把被点击的div元素封装为一个jQuery对象，然后调用方法slideUp()以滑动动画来隐藏该div元素：

$('div.foo').click(function(){

$(this).slideUp();

});4.jQuery(object)

如果传入的是一个普通JavaScript对象，则把该对象封装到jQuery对象中并返回。这个功能可以方便地在普通JavaScript对象上实现自定义事件的绑定和触发，例如，执行下面的代码会在对象foo上绑定一个自定义事件custom，然后手动来触发这个事件，执行绑定的custom事件监听函数，如下所示：

//定义一个普通JavaScript对象

varfoo={foo:'bar',hello:'world'};

//封装成jQuery对象

var$foo=$(foo);

//绑定一个事件

$foo.on('custom',function(){

console.log('customeventwascalled');

});

//触发这个事件

$foo.trigger('custom');//在控制台打印"customeventwascalled"5.jQuery(callback)

如果传入的参数是一个函数，则在document上绑定一个ready事件监听函数，当DOM结构完全加载完成时执行。ready事件的触发是要早于load事件的。ready事件并不是浏览器的原生事件，而是doScrollCheck()、onreadystatechange事件和函数DOMContentLoaded事件的统称。jQuery(jQueryobject)

如果传入的参数是一个jQuery对象，则会创建该jQuery对象的一个副本并且返回，副本与传入的jQuery对象是引用完全相同的DOM元素。jQuery()

如果不传入任何参数，则返回一个空的jQuery对象，属性length为0。注意，在jQuery1.4之前，它会返回一个含有document对象的jQuery对象。这个功能常被用来复用jQuery对象，例如，创建一个空的jQuery对象，然后在需要的时候先手动修改其中的元素，然后调用jQuery方法，从而避免重复创建多个jQuery对象。4.3、选择器Sizzle为了准确描述Sizzle的实现，避免歧义，选择器Sizzle中的相关术语如表4-1：表4-1术语和约定序号术语说明和示例1选择器表达式CSS选择器表达式，例如，“div>p”2并列选择器表达式逗号分割的多个选择器表达式，例如，“div，p”3块表达式例如，“div>p”中的“div”、“p”4块表达式类型例如，“div”的类型是TAG，“.red”的类型是CLASS，“div.red”则是TAG+CLASS。共有8种块表达式类型：ID、CLASS、NAME、ATTR、TAG、CHILD、POS、PSEUDO5块间关系符表示块表达式之间关系的符号，例如，“div>p”中的“>”。共有4种块间关系符：“>”父子关系、“”祖先后代关系、“+”紧挨着的兄弟元素、“-”之后的所有兄弟元素选择器表达式由块表达式和块间关系符组成，如图4-3所示。其中，块表达式分为3种：简单表达式、属性表达式、伪类表达式：块间关系符分为4种：“>”父子关系、“”祖先后代关系、“+”紧挨着的兄弟元素、“-”之后的所有兄弟元素：块表达式和块间关系符组成了层级表达式。图4-3选择器表达式函数Sizzle(selector,context,results,seed)用于查找与选择表达式selector匹配的元素集合。该函数是选择器引擎的入口。函数Sizzle(selector,context,results,seed)执行的6个关键步骤如下：解析块表达式和块间关系符如果存在位置伪类，则从左向右查找：查找第一个块表达式匹配的元素集合，得到第一个上下文元素集合。遍历剩余的块表达式和块间关系符，不断缩小上下文元素集合。否则从右向左查找：查找最后一个块表达式匹配的元素集合，得到候选集、映射集。遍历剩余的块表达式和块间关系符，对映射集执行块间关系过滤。根据映射集筛选候选集，将最终匹配的元素放入结果集。如果存在并列选择器表达式，则递归调用 Sizzle(selector,context,results,seed)查找匹配的元素集合，并合并、排序、 去重。最后返回结果集4.4、属性操作AttributesjQuery的属性操作模块由四部分组成：html属性操作、DOM属性操作、类样式操作和值操作。如图4-4所示：图4-4属性操作Html属性操作指的是对文档中的属性进行读取、设置和移除操作，其中，属性名是小写的连词符式字符串，属性值也总是字符串：DOM属性操作则是指对DOM元素的属性进行读取、设置和移除操作，其中，属性名是驼峰式字符串，属性值则可以是任意类型：类样式操作是指对DOM属性className进行添加、移除操作，值操作值对DOM属性value进行读取和设置操作。5系统应用开发5.1、应用说明现在的信息时代，对于应用的架构无非大体上分为两种，一种是基于C/S的架构，即客户端、服务器；而另一种则是基于B/S的架构，即浏览器、服务器。现在最火的是哪种架构呢？毫无疑问，B/S是当之无愧的霸主，它相对于C/S开发而言，更加轻量快捷，而这些正是用户喜闻乐见的。虽然B/S的开发更加轻量、快捷，但是在应用程序的开发过程中，我们还是不得不编写大量的重复的代码，即使不是完全重复，但是这对一个对自己或者对项目有要求的程序员来说，还是一个很头疼的问题。好的程序员和差的程序员的区别在哪里？一个好的程序员往往是善于思考与总结的，他们能用更少的代码做更多的事，这时候要做的一件事那就是“封装”，这样就可以达到一劳永逸的效果。对于前端的js代码则更是如此，因此我决定自己封装一个js库，方便今后项目的开发，或许这称不上库，但是谁叫我想不到更好的名字去代替它呢？5.2、应用场景这里暂且将这个javascript库称为Smart.js，如果你需要一个js库来帮你处理一些数据，如base64加密解密，甚至是md5，你可以选择Smart.js；如果你需要正则表达式来帮你验证一些数据，如手机号、身份证号，密码，邮箱等，你可以选择Smart.js；如果你需要向后台服务端发送一些数据请求，如get或者post方式，你可以选择Smart.js；如果你需要对浏览器端的cookie做一系列的操作，那么你可以选择Smart.js。当然，Smart.js能做的事远远不止于此，它或许比你想象的要强大，包括一些常见的页面显示处理，数据处理等！为了测试Smart.js的功能与稳定性，我决定将Smart.js应用于一个完整的“项目”，当然，相比于真实的项目，这个项目还是过于简单，但是和经典的实例“helloworld”相比已经强大了太多，我将这个“项目”称之为“驾培管理系统”。整个项目的功能模块图如图5-1：系统应用开发系统应用开发图5-1项目功能模块界面模块图如图5-2：图5-2界面模块图5.3、核心源码分析整个Smart.js大体上分为两部分，一部分处理数据，另一部分则处理页面显示。整体架构则如下：$(function(){ var_Smart=window.Smart; varSmart=function(){ returnnewSmart.fn.init(); }; Smart.fn=Stotype={ constructor:Smart, init:function(){ returnthis; }, selector:"", length:0, }; Stotype=Smart.fn; Smart.extend=Smart.fn.extend=function(){ }; Smart.extend({//这部分则是封装的具体数据处理与页面处理部分 } });由于这个封装的js库可能会被应用于多个Web项目中，因此确保Smart.js的代码不会受到其他代码的干扰则显得尤为重要，并且不能破坏和污染全局变量以至于影响到其他js代码，这一点是任何一个js库所必须具备的最基本的功能。因此，我把整个js代码全部放置在一个立即执行的匿名函数中，这样既可达到以上的效果。5.3.1、数据处理部分数据处理部分整体模块如图5-3：图5-3数据处理模块图数据操作模块包括4个大的部分：加密模块、验证模块、http通信模块、cookie模块。其中，加密模块包括base64加密和base64解密方法；验证模块包括数据格式验证和表达验证等相关方法；http通信模块包括处理post和get请求的方法，以及获取url参数的方法；cookie模块包括对cookie的读取、设置、删除方法。正则表达式验证要进入我们的“驾培管理系统”，首先我们得进入系统的登录注册界面，这里我们就以登录流程为例进行讲解。登录界面如图5-4：图5-4登录界面这里的用户名就是用户的手机号，这时候就需要用到Smart.js的验证模块了，因为我们需要对用户的手机号进行有效的验证，这里的验证仅仅是验证手机格式，而不是经过数据库验证。验证模块整体模块图如图5-5：图5-5格式验证模块（1）核心代码： isPhone:function(phone){ if((/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))&&(phone.length==11)) }, isIDcard:function(IDcard){ if((/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/.test(IDcard))&& (IDcard.length==18)){ }, isPassword:function(password){ if((/^[0-9A-Za-z]{6,12}$/.test(password))) }, isEmail:function(email){ if((/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$ /.test(email))) }（2）核心代码分析该代码片段，主要是利用正则表达式对数据进行验证。只需要使用Smart.isEmail(参数)的代码，传入一个字符串参数，就可以得到一个布尔类型的值，这样就可以达到验证手机号、身份证号、邮箱等表单数据的效果了。http请求（包括get和post）因为要进入“驾培管理系统”，首先要进行登录，“登录”并不是表面上看上去那么简单，事实上，这是一个非常复杂的过程。当用户输入用户名和密码后，需要涉及到http请求，这里我们需要用到Smart.js的post方法，然后将密码进行base64加密处理后发送到后台进行处理，当然，后台又是一个极其复杂的过程，或许还得用到shiro框架。当后台成功验证登录后，这时候后台就会返回相关的用户信息给前台，这里我们假设该用户为管理员，用户信息中可能会包含管理员的时间戳的信息，因为登录成功后会跳转到“驾培管理系统”的主界面，这时候就会涉及到不同界面之间传值的问题，我们可以选择使用url传值或cookie传值的方式，将用户的时间戳信息通过url传递或者cookie传递到系统的主界面。（1）核心代码： post:function(url,data,success){ $.ajax({ type:"post", url:url, data:json_data, contentType:"application/json", dataType:"json", success:success, error:function(){ Smart.console("请求服务器出错!请检查网络连接"); } }); }, get:function(url,success){ varjson_data=JSON.stringify(data); $.ajax({ type:"get", url:url, success:success, error:function(){ Smart.console("请求服务器出错!请检查网络连接"); } }); }（2）核心代码分析该代码片段主要包含两部分，一个是http请求的post方式，一个是http请求的get方式。代码片段是以jQuery的ajax模块为基础，然后进行了再一次的“封装”。当需要请求后台数据的时候，只需要调用类似Smart.post(url地址，请求数据，回调函数)的方法，即可成功向后台发送ajax异步数据请求。请求的url地址是该方法的第一个参数，请求的数据则是该方法的第二个参数，第三个参数则是当成功请求后台后的回调函数，里面通常包含一些处理后台返回数据的代码。当请求后台失败时，浏览器的控制台会打印“请求服务器出错！请检查网络连接”字样的信息。相对于原生的javascript以及jQuery的ajax请求代码，显而易见，经过二次封装后的代码，在使用时会更加方便和简洁。post方法：if((typeof(data)!="object")||(jQuery.isEmptyObject(data)))首先进行入参检测，对传入的第二个参数进行判断，判断参数是否不是对象或者是否是空对象，当满足条件时，打印相关的错误提示信息。varjson_data=JSON.stringify(data);然后，利用jQuery的方法JSON.stringify()将json对象转化为json字符串。get方法：如上。base64加密与解密（1）Base64加密核心代码： while(i<len){ c1=str.charCodeAt(i++)&0xff; if(i==len){ out+=base64EncodeChars.charAt(c1>>2); out+=base64EncodeChars.charAt((c1&0x3)<<4); out+="=="; break; } c2=str.charCodeAt(i++); if(i==len){ out+=base64EncodeChars.charAt(c1>>2); out+=base64EncodeChars.charAt(((c1&0x3)<<4) |((c2&0xF0)>>4)); out+=base64EncodeChars.charAt((c2&0xF)<<2); out+="="; break; } c3=str.charCodeAt(i++); out+=base64EncodeChars.charAt(c1>>2); out+=base64EncodeChars.charAt(((c1&0x3)<<4) |((c2&0xF0)>>4)); out+=base64EncodeChars.charAt(((c2&0xF)<<2) |((c3&0xC0)>>6)); out+=base64EncodeChars.charAt(c3&0x3F); }（2）核心代码分析如果需要对数据进行基本的数据加密，只需要调用Smart.base64encode(参数)方法，传入一个字符串参数，既可得到一个按一定加密方式得到的加密数据。例如，传入一个参数为：helloworld，返回参数为：aGVsbG93b3JsZA==。base64encode()方法：charCodeAt()方法可返回指定位置的字符的Unicode编码。这个返回值是0-65535之间的整数。一个“&”表示运算符按位与，就是把两个二进制数按每一位比较，两个都为1则为1，否则为0。“0xff”则表示十六进制数。（3）Base64解密核心代码： while(i<len){ do{ c1=base64DecodeChars[str.charCodeAt(i++)&0xff]; }while(i<len&&c1==-1); if(c1==-1) break; do{ c2=base64DecodeChars[str.charCodeAt(i++)&0xff]; }while(i<len&&c2==-1); if(c2==-1) break; out+=String.fromCharCode((c1<<2)|((c2&0x30)>>4)); do{ c3=str.charCodeAt(i++)&0xff; if(c3==61) returnout; c3=base64DecodeChars[c3]; }while(i<len&&c3==-1); if(c3==-1) break; out+=String.fromCharCode(((c2&0XF)<<4) |((c3&0x3C)>>2)); do{ c4=str.charCodeAt(i++)&0xff; if(c4==61) returnout; c4=base64DecodeChars[c4]; }while(i<len&&c4==-1); if(c4==-1) break; out+=String.fromCharCode(((c3&0x03)<<6)|c4); }（4）核心代码分析如果需要对经过base64机密的数据进行解密，只需调用Smart.base64decode(参数)方法，传入字符串参数，既可得到相应的解密数据。例如，传入参数“aGVsbG93b3JsZA==”，相应的会得到一个“hellworld”的字符串返回值。处理cookie因为http协议是一种无状态的协议，所以为了判断用户的登录状态，这时候就不得不需要用到cookie了。读取cookie（1）核心代码如下：getCookie:function(objName){ vararrStr=document.cookie.split(";"); for(vari=0;i<arrStr.length;i++){ vartemp=arrStr[i].split("="); if(temp[0]==objName){ varvalue=Smart.utf8to16(Smart.base64decode(temp[1])); returnUrl.decode(value); } } }（2）核心代码分析只需要调用Smart.getCookie(参数)方法，传入一个与cookie相对应的key值，既可以得到相应的cookie值。例如：如图5-6所示，图5-6浏览器cookie当浏览器中存在一个name为“username”的cookie时，调用Smart.getCookie(“username”)方法，即可得到一个返回值为“yi”的值。Cookie的value值在存储时一般需要经过加密处理。因此在获取cookie值时，就会相应的进行解密处理。getCookie（）方法：首先用document.cookie方法来获取所有的cookie值，然后利用split()方法将获取的值进行分割得到一个数组，然后遍历数组，得到与传入的参数值相对应的value值。写cookie：（1）核心代码：setCookie:function(key,value){ vard=newDate(); d.setTime(d.getTime()+(1*24*60*60*1000)); varexpires="expires="+d.toUTCString(); varvalue_1=Url.encode(value); varvalue_2=Smart.utf8to16(Smart.base64encode(value_1)); document.cookie=key+"="+value_2+";"+expires +";path=/"; }（2）核心代码分析：如果需要进行写入cookie的操作，只需要调用Smart.setCookie(key,value)即可写入cookie，如Smart.setCookie(“username”,“yi”)。setCookie()方法：首先，获取当前的系统的时间，精确到毫秒，然后在当前系统时间的基础上，设置cookie的默认失效时间为一天，默认路径为根路径。删除cookie：（1）核心代码：deleteCookie:function(key){ vardate=newDate(); date.setTime(date.getTime()-10000); document.cookie=key+"=a;expires="+date.toGMTString() +";path=/"; }（2）核心代码分析如果需要删除某个cookie值，只需要调用Smart.deleteCookie(key)方法，传入一个与cookie对应的key值，即可删除对应的cookie值。如：Smart.deleteCookie(“username”)；deleteCookie()方法：首先获取当前的系统时间，精确到毫秒，然后设置cookie失效时间为当前系统时间之前。验证json数据格式（1）核心代码：isJSONObject:function(obj){ varisjson=typeof(obj)=="object" &&Ototype.toString.call(obj) .toLowerCase()=="[objectobject]" &&!obj.length; returnisjson; }（2）核心代码分析：在这里，如果需要验证某个数据是否为json数据，只需要调用Smart.isJSONObject(obj)方法，传入一个数据对象，即可得到一个布尔类型的返回值，当返回true时，则证明传入的数据为json数据，否则，则不是json数据。isJSONObject（）方法：首先判断传入的参数是否为object对象，然后判断对象的长度是否大于0。获取url请求的参数（1）核心代码：getRequestParameter:function(){ varurl=location.search; varret={}; varRequest=newObject(); if(url.indexOf("?")!=-1){ varstr=url.substr(1); strs=str.split("&"); for(vari=0;i<strs.length;i++){ Request[strs[i].split("=")[0]]= unescape(strs[i].split("=")[1]); } ret=Request; } returnret; }（2）核心代码分析：在Web项目中，常常会遇到不同页面传值的问题，这时候往往就需要用到URL传值了，如：请求地址为：“/index.html?username=admin&password=123456”，只需要调用Smart.getRequestParameter()方法，即可得到一个包含请求参数的json格式的对象，返回数据为{“admin”：“admin”,“password”：“123456”}。getRequestParameter()方法：首先，利用location.search获取地址栏url的字符串信息，然后利用indexOf()方法来判断字符串中是否存在“?”，然后调用split()来对“&”进行分割，得到一个类似包含“username=admin”和“password=123456”信息的数组，然后对数组进行遍历，再次调用split()方法对“=”进行分割，得到类似包含“username”和“admin”信息的数组，然后取数组的第一个元素为key值，第二个元素为value值，存入一个json对象中，并返回json对象。5.3.2、UI处理部分当用户成功登陆后，会进入到“人员权限管理”界面，该界面包含两个子界面，即“账户管理”和“角色管理”界面，这里我们以“角色管理”界面为例，进行相关讲解。角色管理界面如图5-7所示：图5-7角色管理界面“角色管理”界面主要涉及到关于表格、对话框的一些操作，下面对这些功能进行一一赘述。UI处理部分整体模块如图5-8：图5-8UI处理部分模块图UI处理部分包括三个模块：表格模块、对话框模块、多选下拉框模块。其中，表格模块包括创建表格、数据绑定、分页处理、数据获取等方法；对话框模块包括对对话框的操作；多选下拉框模块包括对多选下拉框的读取和设置的方法。表格创建表格（1）核心代码：createTable:function(id,jsonObj){ if(!id||!jsonObj){ $.error("请传入完整参数"); }else{ varjsonObj=jsonObj||{}; if(jsonObj.length!==0){ if(Smart.isJSONObject(jsonObj)){ varjsonObj=jsonObj; if(jsonObj.hasOwnProperty("header") &&jsonObj.hasOwnProperty("width")){ $("#"+id).append( '<tbody><trid=_headerTr' +id+'><tdstyle="text-align:center"></td>' +'<tdstyle="text-align:center"><inputtype="checkbox" name=_select' +id+'></td></tr></tbody>'); $("#_headerTr"+id).css({ "backgroundColor":"#D9EDFA" }); varheader=jsonObj.header; headerGlobalObj[id]=header; //将表头信息存入全局变量中 $.each(header,function(){ for(keyinthis){ $("#_headerTr"+id).append( '<tdstyle="text-align:center;"name=' +key+'>'+this[key]+'</td>'); } }); varwidths=jsonObj.width; vartds=$("#_headerTr"+id+"td"); for(vari=0;i<widths.length;i++){ $(tds[i]).attr("width",widths[i]); }else{ $.error("参数错误");}（2）核心代码分析在Web项目中，表格常常被许多地方用到，只需要写如下代码即可生成一个漂亮的表格：html代码：<tableid=“MyTable”></table>js代码：vardata={“header”：[“phone”：“电话”，“username”：“姓名”，“mail”：“邮箱”,“role”:“角色权限”],“width”：[100,100]}；Smart.createTable(“MyTable”，data)；这里我们向createTable()方法中传入两个参数，一个是html中表格的id，一个是json格式的表格数据，“header”数组里面包含的表格的头部信息，“width”里面包含的是表头每一列的宽度。createTable()方法：因为该方法的两个参数为必要参数，所以首先对方法的入参进行检测，判断是否传入了两个参数，否则提示相应的错误信息。然后调用内部方法isJSONObject()方法来判断传入的第二个参数是否是一个json对象。满足条件后，利用js的hasOwnProperty()方法来判断第二个参数中是否包含“header”和“width”两个属性，当这两个属性存在时，循环遍历取这个属性对应的value值，生成相应的表头信息。绑定数据到表格（1）核心代码：loadData:function(id,jsonObj){省略部分代码$.each(rows,function(){tableBody.append('<trid=_bodyTr'+id+i+'><td>'+(i+1)+ '</td><td><inputtype="checkbox"name=_select'+id+'></td></tr>');for(varj=0;j<$("#_headerTr"+id+"td").length;j++){var_headerTrName=$("#_headerTr"+id+td").eq(j).attr("name");if(this.hasOwnProperty(_headerTrName)){$("#_bodyTr"+id+i).append('<tdtitle='+ this[_headerTrName]+'>'+this[_headerTrName]+'</td>'); }}省略部分代码if(i%2==0){tableBody.children().eq(i).attr("class","danger");}else{tableBody.children().eq(i).attr("class","success");}$("#_bodyTr"+id+i).click(function(e){if($(e.target).attr("type")!="checkbox"){varrow=$(this).children().eq(0).text();varisChecked=inputs[row].checked;if(isChecked){inputs[row].checked=false;}else{inputs[row].checked=true;}}});});只需要调用Smart.loadData(“MyTable”,data)方法，即可将数据绑定到表格，第一个参数为表格的id，第二个参数为绑定到表格的数据，格式为json。如：vardata={“total”：“1”，“rows”：[{“username”：“易泽坤”，“phone”：}]}；表格的样式如图5-9：图5-9表格loadData()方法：因为该方法包含两个参数，第一个参数为表格的id，第二个参数为要绑定到表格的json数据对象，该json对象必须包含total和rows两个key值，total表示绑定到表格的数据条数，rows为要绑定到表格的具体数据，所以rows的value值为一个json数组，该数组包含了与表格的表头字段相对应的数据信息。首先，对传入的两个参数进行参数检测，判断第一个参数是否为字符串，第二个参数是否为json对象，否则提示相关的错误信息。当满足条件时，使用javascript的forin关键字来对传入的json对象进行遍历，并动态生成相应的表格信息。然后，为了让表格的样式显示得更加美观，通过判断表格信息的奇偶行来添加不同的样式信息。最后，给表格添加相应的单击事件，即当单击表格的某一行数据时，让单击的那一行数据处于选中状态，并且表格第二列的复选框处于勾选状态。获取选中行的数据：正如图中所示，该表格还具有获取选中表格数据的功能。（1）核心代码如下：getSelected:function(id){varret=[];vartempObj={};for(vark=0;k<globalObj.length;k++){for(varkeyinglobalObj[k]){if(key==id){tempObj=globalObj[k][key];}}}if(tempObj.hasOwnProperty("rows")){varrows=tempObj.rows;}if(id!=null&&typeofid==="string"){varinputs=document.getElementsByName("_select"+id);for(vari=0;i<inputs.length;i++){if(inputs[i].type=="checkbox"&&inputs[0].checked){ret=rows;}elseif(inputs[i].type=="checkbox"&&i!=0&&inputs[i].checked){varj=i-1;ret.push(rows[j]);}}}returnret;}如果需要获取表格选中行的数据，只需要调用方法Smart.getSelected(id)方法，传入表格的id值，即可得到一个json对象的数据，里面包含选中行的数据。核心代码分析getSelected（）方法：for(vark=0;k<globalObj.length;k++){for(varkeyinglobalObj[k]){if(key==id){tempObj=globalObj[k][key];}}}该代码片段中存在一个globalObj的字段，globalObj为一个全局的数组变量，在将数据绑定到表格同时，便将相应的数据存到globalObj变量中，表格的id为key值，表格的所有数据为value值。首先，对globalObj变量进行遍历，遍历的每一条数据为一个表格对应的数据信息，然后，用forin方法对该条数据信息进行遍历，当getSelected方法传入参数id在globalObj中存在与之对应的key值时，则取出该key值对应的value值，并将value值存在一个临时的变量tempObj中。然后，遍历要获取数据的表格，获取处于选中状态的表格数据，将数据存入ret变量中并返回该变量。④分页：一个表格数据往往不止一页，这时候就需要对表格进行分页处理，点击不同的页或者设置每页显示的数据条数，显示不同的表格。（1）核心代码：getPager:function(id,callback){if(id!=null&&typeofid==="string"){pagerObj.pagination=pagination;pagerObj.pageNum=pageNum;varpager=document.getElementsByName("_pager"+id);$(pager).click(function(){switch(this.id){case"_first"+id:Table.pagerInit();pagination=1;break;case"_previous"+id:Table.pagerInit();if(pagination>1){pagination--;}break;case"_next"+id:Table.pagerInit();if(pagination<totalPage){pagination++;}break;case"_last"+id:Table.pagerInit();pagination=totalPage;break;}pagerObj.pagination=pagination;pagerObj.pageNum=pageNum;callback(pagerObj);});$("#_pageNum"+id).change(function(){pageNum=$(this).find("option:selected").text();Table.pagerInit();pagination=1;pagerObj.pagination=pagination;pagerObj.pageNum=pageNum;callback(pagerObj);});}}想得到不同的分页数据，只需要调用Smart.getPager(id,callback)方法，传入相应参数即可得到相应的数据，第一个参数“id”为表格的id，第二个参数为回调函数。单击分页按钮前的样式如图5-10所示：图5-11单击分页前的表格样式单击“下一页”或“尾页”分页按钮时，将得到如下图5-12样式：图5-12单击分页后的表格样式核心代码分析：因为该分页包含“首页”、“上一页”、“下一页”、“尾页”以及“页码容量”几个变量，前面四个变量对应着click事件，最后一个变量对应着change事件，这里我们用到了switch方法，switch里面的case分别对应以上5个事件。“pagination”为表格的当前页码，“pageNum”为表格的页码容量，即每一页显示的数据条数。当单击“首页”时，令pagination=1；当单击“上一页”时，先判断pagination是否大于1，当满足条件时，执行pagination--；当单击“下一页”时，先判断pagination是否小于总页码数，当满足条件时，执行pagination++；当单击“尾页”时，将令pagination等于总页码数。对话框：（1）核心代码：dialog:function(id,args){省略if($.inArray(i