毕业设计-互连系统中的同步误差理论

目录毕业设计任务书开题报告指导教师审查意见评阅老师评语中文摘要外文摘要1前言12选题背景221、基于JQUERY的WEB项目222、JQUERY的优势223、论文实践意义224、论文主要工作内容与组织结构3241、论文主要工作内容3242、论文组织结构33方案论证431、什么是封装432、JS可以封装吗44JQUERY框架原理分析541、JQUERY总体架构542、构造JQUERY对象943、选择器SIZZLE1344、属性操作ATTRIBUTES155系统应用开发1651、应用说明1652、应用场景1653、核心源码分析18531、数据处理部分19532、UI处理部分306论文总结与展望45参考文献46致谢47附录48基于JQUERY框架的原理分析与实例应用1前言在这个21世纪的信息时代，开发者在近10年间的开发项目过程中，不得不面对这三大主要的平台浏览器、服务器和本地/手机应用。现实是JAVASCRIPT已经成为事实上的WEB标准语言。而一部分认为JAVASCRIPT正在把手伸向服务器端开发，比如说NODEJS。在2012年9月份，行业分析公司REDMONK就公布了JAVASCRIPT在开发语言里已经处于遥遥领先的地位。这主要得意于JAVASCRIPT所提供的丰富的、动态的网页内容的能力，以及JAVASCRIPT的轻便性和高易用性。正因为如此，基于JAVASCRIPT的库也如雨后春笋般涌现出来，其中不乏许多优秀的、应用广泛的JAVASCRIPT库，如JQUERY、PROTOTYPE、ZEPTO、YUILIBRARY等，这些优秀的库给我们带来了更加便捷的项目开发。2选题背景21、基于JQUERY的WEB项目JQUERY库在2006年1月由美国人JOHNRESIG在纽约发布，吸引了来自世界各地的众多JAVASCRIPT爱好者及高手加入，由DAVE率领团队进行开发。如今，JQUERY框架已经成为最流行的JAVASCRIPT库，在世界前10000多个访问最多的网站中，有超过55的网站在使用JQUERY。22、JQUERY的优势在众多的JAVASCRIPT库中，最受程序员喜爱莫过于JQUERY了，JQUERY是一个兼容多种浏览器的JAVASCRIPT库，核心理念是WRITELESS,DOMORE，即写得更少,做得更多，多么美妙的理念。JQUERY框架是免费、开源的，使用MIT许可协议。JQUERY的语法设计使得开发更加方便，快捷，例如操作各种文档对象、选择DOM元素、制作动画效果、事件处理、使用AJAX以及其他功能。除此以外，JQUERY框架提供API让开发者可以方便的编写插件。其模块化的使用方式受到广大开发者的追捧与喜爱，使得开发者可以很轻松的开发出功能强大的静态、动态网页。JQUERY的主要优势可以总结为1兼容主流浏览器，支持IE60、CHROME、FIREFOX36、SAFARI50、OPERA等。2具有独特的链式语法和短小清晰的多功能接口3具有高度灵活的CSS选择器，并且可对CSS选择器进行扩展。4拥有便捷的插件扩展和丰富的插件。23、论文实践意义在WEB项目中，常常因为某些项目需求而不得不写大量重复的JS代码，这对一个前段开发人员来说是非常痛苦和乏味的，毕竟谁也不喜欢日复一日的去做同一件事。但是，如果能将一些常用的方法进行合理的封装与应用，并能兼容各种应用环境和浏览器环境，那么，我们就能够在一定程度减少代码量，增加代码的复用率，减少项目的开发周期，可以有效的减少项目的维护难度，这对一个项目甚至是一个团队来说是至关重要的。24、论文主要工作内容与组织结构241、论文主要工作内容论文工作主要以JQUERY框架为基础，并在JQUERY的基础上对一些项目中常用的JS操作进行有效且合理的封装。主要工作内容包括（1）研究JQUERY的核心源码，学习JQUERY框架的整体架构方式及代码编码风格。（2）基于JQUERY框架，封装一套属于自己的JS库。（3）测试该JS库在不同应用、不同浏览器下的稳定性。242、论文组织结构第1章阐述论文工作背景与研究意义，并进行相关文献综述。第2章介绍JQUERY的市场应用以及技术优势。第3章深入分析JQUERY技术。第4章简要讲解自己封装后的JS库。第5章对封装后的JS库进行测试与总结。最后，对论文工作进行了全面总结与展望3方案论证31、什么是封装在面向对象编程中，封装（ENCAPSULATION）是将对象运行所需的资源封装在程序对象中基本上，是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的，只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。隐藏对象的属性和实现细节，仅对外公开接口，控制在程序中属性的读取和修改的访问级别。封装就是将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成“类”，其中数据和函数都是类的成员。封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员。32、JS可以封装吗JS是一门面向对象的语言，它是通过一种叫做原型（PROTOTYPE）的方式来实现面向对象编程的，通过这个机制，我们完全可以得到跟基于类的语言相当程度的对象复用能力但是当然我们还需要函数。在JS中，函数仅仅是一种特殊的对象，JS设计了运算符和FUNCTION关键字让JS的函数看起来更像是传统的语言。只要实现了私有方法CALL的对象都被认为是函数对象，类似PROTOTYPE，CALL也是语言使用者完全无法访问的JS的面向对象已经很完整了，但是JS为了让自己的语法看起来更像是JAVA之类的语言，又引入了NEW关键字，在上面大部分语言中NEW都是针对类来做的，而JS没有类，甚至没有声明域，所以这个NEW还是要在对象上做文章，NEW会调用私有方法CONTRUCT，任何实现了CONSTRUCT的对象都可以被NEW接受。然而如何才能让一个对象可以被NEW呢JS并没有额外提供构造这种对象方法，所以所有通过FUNCTION关键字构造的函数对象被设计成实现了CONSTRUCT方法。这也就是JS的NEW很奇怪地针对函数的原因。值得一提的是，并非只有函数可以被NEW,JS的宿主环境可能提供一些其它对象，典型的例子是IE中的ACTIVEXOBJECT。所有函数的CONSTRUCT方法都是类似的创建一个新的对象，将它的PROTOTYPE设为函数对象的共有属性PROTOTYPE，以新对象做为THIS指针的值，执行函数对象。这样对同一函数的NEW运算实际上创建了相似的对象拥有共同的原型PROTOTYPE，被同一函数处理过。这样的NEW运算就很类似CLASS了，同时由于JS的动态性，所有的“类“在运行时任你宰割，想要模拟继承之类的行为也就很容易了，由于是弱类型且是动态函数，不存在需要多态的问题，JS完全可以做到基于类的面向对象，所以说JS是可以进行封装的。4JQUERY框架原理分析41、JQUERY总体架构JQUERY的模块总体上可以分为3个部分入口模块、底层支持模块、功能模块。如图31所示。图31JQUERY的模块分类在构建JQUERY对象的模块中，如果我们在调用构造函数JQUERY对象时传入了选择器表达式，JQYERY则会调用SIZZLE选择器来遍历文档，然后查找与之匹配的DOM元素，并且创建一个包含了这些DOM元素引用的JQUERY对象。JQUERY的选择器SIZZLE是一款全部由JAVACSRIPT来实现的CSS选择器引擎，主要用于查找与选择器表达式所匹配的元素集合。JQUERY的工具方法模块提供了很多编程辅助方法来用于简化对JQUERY对象、DOM元素、字符串、对象、数组等相关的操作，例如，MAP、EACH、JQUERYMAP、JQUERYEACH等，其他所有的模块都有用到工具方法模块。浏览器的功能测试模块提供了针对各种浏览器功能以及BUG的测试结果，而其他模块则基于这些测试结果来解决浏览器之间令人讨厌的兼容性问题。在这些底层支持的模块中，回调函数列表主要用于增强对回调函数的相关管理，支持锁定、触发、移除、添加、禁用回调函数等功能；异步队列模块则用于解耦异步任务，回调函数，它在回调函数列表的基础上为回调函数增加了不同的状态，并且提供了多个回调函数列表，支持传播任意同步或者异步回调函数的成功以及失败状态；数据缓存模块则用于为DOM元素和JAVASCRIPT对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的出队和入队的操作，并确保了函数按顺序执行，它基于数据缓存模块的实现。在功能模块中，事件系统则提供了统一的事件响应、绑定、手动触发和移除机制，事实上它并没有将事件直接绑定到DOM元素上，而是以数据缓存模块来管理事件；AJAX模块则允许从服务器上来加载数据，而不用去刷新页面，它是基于异步队列模块来触发和管理回调函数；动画模块用于向网页中添加各种动画效果，它基于队列模块来执行和管理动画函数；属性操作模块用于对DOM属性和HTML属性来进行移除、读取和设置的操作；DOM遍历模块用于在DOM树中遍历父元素、子元素、兄弟元素；DOM操作模块用于替换、复制、移除和插入DOM元素；样式操作模块用于设置内联样式或获取计算样式；坐标模块用于设置或读取DOM元素的文档坐标；尺寸模块则用于获取DOM元素的宽度以及高度。下面是JQUERY源码的总体结构FUNCTIONWINDOW,UNDEFINED/构造JQUERY对象VARJQUERYFUNCTIONVARJQUERYFUNCTIONSELECTOR,CONTEXTRETURNNEWJQUERYFNINITSELECTOR,CONTEXT,ROOTJQUERY,/一堆局部变量声明JQUERYFNJQUERYPROTOTYPECONSTRUCTORJQUERY,INITFUNCTIONSELECTOR,CONTEXT,ROOTJQUERY,/一堆原型属性及方法JQUERYFNINITPROTOTYPEJQUERYFNJQUERYEXTENDJQUERYFNEXTENDFUNCTIONJQUERYEXTEND/一堆静态属性和方法RETURNJQUERY/省略其他模块的代码WINDOWJQUERYWINDOWJQUERYWINDOW1、JQUERY对象不是通过NEWJQUERY创建的，而是通过NEWJQUERYFNINIT创建的。2、JQUERY对象就是JQUERYFNINIT对象。3、如果执行NEWJQEURY,生成的JQUERY对象会被抛弃，最后返回JQUERYFNINIT对象；因此可以直接调用JQUERYSELECTOR,CONTEXT，没有必要使用NEW关键字。4、先执行JQUERYFNJQUERYPROTOTYPE，再执行JQUERYFNINITPROTOTYPEJQUERYFN，合并后的代码如下JQUERYFNINITPROTOTYPEJQUERYFNJQUERYPROTOTYPE所有调用JQUERYFN的方法，相当于调用了JQUERYPROTOTYPE，即调用了JQUERY函数上（一开始的JQUERYFUNCTIONSELECTOR,CONTEXT），但是最后都相当于调用了JQUERYFNINITPROTOTYPE，即相当于调用了一开始的JQUERY函数返回的对象上，即调用了我们最终使用的JQUERY对象上。42、构造JQUERY对象如果调用构造函数JQUERY时传入的参数不同，创建JQUERY对象的逻辑也会随之不同。构造函数JQUERY有7种方式。如图32所示图32构造函数JQUERY1JQUERYSELECTOR,CONTEXT在JQUERY中，如果传入一个字符串的参数，JQUERY则会去检查这个字符串是选择器表达式或者是HTML代码。如果是选择器表达式，则会去遍历文档，查找与之相匹配的DOM元素，并且创建一个包含了这些DOM元素引用的JQUERY对象；如果没有元素与之相匹配，则会创建一个空的JQUERY对象，当然，其中不会包含任何元素，其属性LENGTH等于0。在默认情况下，对匹配元素的相关查找将会从根元素DOCUMENT对象开始，即它的查找范围是整个文档树，当然，你也可以传入第二个参数CONTEXT来限定查找范围。例如，在一个单击事件监听函数中，可以像下面这样来限制查找范围DIVFOOCLICKFUNCTIONSPAN,THISADDCLASSBAR/限定查找范围在上面的这个例子中，对选择器表达式“SPAN”的查找将被限制在THIS的范围内，即只有被点击元素内的SPAN元素才会被添加类样式“BAR”。如果选择器表达式SELECTOR是一个简单的“ID”，并且没有指定相关的上下文CONTEXT，则调用浏览器原生方法DOCUMENTGETELEMENTBYID来查找属性ID等指定值的元素；如果是一个比“ID”复杂的选择器表达式或者指定了上下文，则通过JQUERY方法FIND来查找，因此“SPAN”,THIS是等价于THISFINDSPAN的。2JQUERYHTML,OWNERDOCUMENT、JQUERYHTML,PROPS如果传入的相关字符串参数看起来非常像一段HTML代码（如，传入的字符串字符串中含有），JQUERY则会尝试用这段HTML代码创建新的DOM元素，并且创建一个包含了这些DOM元素引用的JQUERY对象。例如，下面的代码将把HTML代码转换成DOM元素并插入BODY节点的末尾MYNEWTEXTAPPENDTOBODY如果HTML代码是一个单独的标签，例如，或，JQUERY框架会使用浏览器原生的方法DOCUMENTCREATEELEMENT来创建DOM元素。如果是比单独标签更加复杂的HTML片段，例如上面例子中的MYNEWTEXT，则利用浏览器的INNERHTML机制来创建DOM元素，这个过程由方法JQUERYCLEAN和方法JQUERYBUILDFRAGMENT实现。第二个参数OWNERDOCUMENT则用于指定创建新DOM元素的文档对象，如果不传入第二个参数，则会默认为当前的文档对象。如果传入的HTML代码是一个单独的标签，那么第二个参数则还可以是PROPS，PROPS是一个包含了属性、事件的普通对象；在调用DOCUMENTCREATEELEMENT创建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“,“CLASS“TEST“,TEXT“CLICKME“,CLICKFUNCTIONTHISTOGGLECLASS“TEST“APPENDTO“BODY“3JQUERYELEMENT、JQUERYELEMENTARRAY如果传入一个DOM元素数组或者DOM元素，则会把DOM元素封装到JQUERY对象中并且返回。这个功能常用于事件监听函数，即把关键字THIS引用的DOM元素封装为一个JQUERY对象，然后在该JQUERY对象上调用JQUERY方法。例如，在下面的例子中，先调用THIS把被点击的DIV元素封装为一个JQUERY对象，然后调用方法SLIDEUP以滑动动画来隐藏该DIV元素DIVFOOCLICKFUNCTIONTHISSLIDEUP4JQUERYOBJECT如果传入的是一个普通JAVASCRIPT对象，则把该对象封装到JQUERY对象中并返回。这个功能可以方便地在普通JAVASCRIPT对象上实现自定义事件的绑定和触发，例如，执行下面的代码会在对象FOO上绑定一个自定义事件CUSTOM，然后手动来触发这个事件，执行绑定的CUSTOM事件监听函数，如下所示/定义一个普通JAVASCRIPT对象VARFOOFOOBAR,HELLOWORLD/封装成JQUERY对象VARFOOFOO/绑定一个事件FOOONCUSTOM,FUNCTIONCONSOLELOGCUSTOMEVENTWASCALLED/触发这个事件FOOTRIGGERCUSTOM/在控制台打印“CUSTOMEVENTWASCALLED“5JQUERYCALLBACK如果传入的参数是一个函数，则在DOCUMENT上绑定一个READY事件监听函数，当DOM结构完全加载完成时执行。READY事件的触发是要早于LOAD事件的。READY事件并不是浏览器的原生事件，而是DOSCROLLCHECK、ONREADYSTATECHANGE事件和函数DOMCONTENTLOADED事件的统称。6JQUERYJQUERYOBJECT如果传入的参数是一个JQUERY对象，则会创建该JQUERY对象的一个副本并且返回，副本与传入的JQUERY对象是引用完全相同的DOM元素。7JQUERY如果不传入任何参数，则返回一个空的JQUERY对象，属性LENGTH为0。注意，在JQUERY14之前，它会返回一个含有DOCUMENT对象的JQUERY对象。这个功能常被用来复用JQUERY对象，例如，创建一个空的JQUERY对象，然后在需要的时候先手动修改其中的元素，然后调用JQUERY方法，从而避免重复创建多个JQUERY对象。43、选择器SIZZLE为了准确描述SIZZLE的实现，避免歧义，选择器SIZZLE中的相关术语如表41表41术语和约定序号术语说明和示例1选择器表达式CSS选择器表达式，例如，“DIVP”2并列选择器表达式逗号分割的多个选择器表达式，例如，“DIV，P”3块表达式例如，“DIVP”中的“DIV”、“P”4块表达式类型例如，“DIV”的类型是TAG，“RED”的类型是CLASS，“DIVRED”则是TAGCLASS。共有8种块表达式类型ID、CLASS、NAME、ATTR、TAG、CHILD、POS、PSEUDO5块间关系符表示块表达式之间关系的符号，例如，“DIVP”中的“”。共有4种块间关系符“”父子关系、“”祖先后代关系、“”紧挨着的兄弟元素、“”之后的所有兄弟元素选择器表达式由块表达式和块间关系符组成，如图43所示。其中，块表达式分为3种简单表达式、属性表达式、伪类表达式块间关系符分为4种“”父子关系、“”祖先后代关系、“”紧挨着的兄弟元素、“”之后的所有兄弟元素块表达式和块间关系符组成了层级表达式。图43选择器表达式函数SIZZLESELECTOR,CONTEXT,RESULTS,SEED用于查找与选择表达式SELECTOR匹配的元素集合。该函数是选择器引擎的入口。函数SIZZLESELECTOR,CONTEXT,RESULTS,SEED执行的6个关键步骤如下1）解析块表达式和块间关系符2）如果存在位置伪类，则从左向右查找A查找第一个块表达式匹配的元素集合，得到第一个上下文元素集合。B遍历剩余的块表达式和块间关系符，不断缩小上下文元素集合。3）否则从右向左查找A查找最后一个块表达式匹配的元素集合，得到候选集、映射集。B遍历剩余的块表达式和块间关系符，对映射集执行块间关系过滤。4）根据映射集筛选候选集，将最终匹配的元素放入结果集。5）如果存在并列选择器表达式，则递归调用SIZZLESELECTOR,CONTEXT,RESULTS,SEED查找匹配的元素集合，并合并、排序、去重。最后返回结果集44、属性操作ATTRIBUTESJQUERY的属性操作模块由四部分组成HTML属性操作、DOM属性操作、类样式操作和值操作。如图44所示图44属性操作HTML属性操作指的是对文档中的属性进行读取、设置和移除操作，其中，属性名是小写的连词符式字符串，属性值也总是字符串DOM属性操作则是指对DOM元素的属性进行读取、设置和移除操作，其中，属性名是驼峰式字符串，属性值则可以是任意类型类样式操作是指对DOM属性CLASSNAME进行添加、移除操作，值操作值对DOM属性VALUE进行读取和设置操作。5系统应用开发51、应用说明现在的信息时代，对于应用的架构无非大体上分为两种，一种是基于C/S的架构，即客户端、服务器；而另一种则是基于B/S的架构，即浏览器、服务器。现在最火的是哪种架构呢毫无疑问，B/S是当之无愧的霸主，它相对于C/S开发而言，更加轻量快捷，而这些正是用户喜闻乐见的。虽然B/S的开发更加轻量、快捷，但是在应用程序的开发过程中，我们还是不得不编写大量的重复的代码，即使不是完全重复，但是这对一个对自己或者对项目有要求的程序员来说，还是一个很头疼的问题。好的程序员和差的程序员的区别在哪里一个好的程序员往往是善于思考与总结的，他们能用更少的代码做更多的事，这时候要做的一件事那就是“封装”，这样就可以达到一劳永逸的效果。对于前端的JS代码则更是如此，因此我决定自己封装一个JS库，方便今后项目的开发，或许这称不上库，但是谁叫我想不到更好的名字去代替它呢52、应用场景这里暂且将这个JAVASCRIPT库称为SMARTJS，如果你需要一个JS库来帮你处理一些数据，如BASE64加密解密，甚至是MD5，你可以选择SMARTJS；如果你需要正则表达式来帮你验证一些数据，如手机号、身份证号，密码，邮箱等，你可以选择SMARTJS；如果你需要向后台服务端发送一些数据请求，如GET或者POST方式，你可以选择SMARTJS；如果你需要对浏览器端的COOKIE做一系列的操作，那么你可以选择SMARTJS。当然，SMARTJS能做的事远远不止于此，它或许比你想象的要强大，包括一些常见的页面显示处理，数据处理等为了测试SMARTJS的功能与稳定性，我决定将SMARTJS应用于一个完整的“项目”，当然，相比于真实的项目，这个项目还是过于简单，但是和经典的实例“HELLOWORLD”相比已经强大了太多，我将这个“项目”称之为“驾培管理系统”。整个项目的功能模块图如图51图51项目功能模块界面模块图如图52图52界面模块图53、核心源码分析整个SMARTJS大体上分为两部分，一部分处理数据，另一部分则处理页面显示。整体架构则如下FUNCTIONVAR_SMARTWINDOWSMARTVARSMARTFUNCTIONRETURNNEWSMARTFNINITSMARTFNSMARTPROTOTYPECONSTRUCTORSMART,INITFUNCTIONRETURNTHIS,SELECTOR“,LENGTH0,SMARTFNINITPROTOTYPESMARTFNSMARTEXTENDSMARTFNEXTENDFUNCTIONSMARTEXTEND/这部分则是封装的具体数据处理与页面处理部分由于这个封装的JS库可能会被应用于多个WEB项目中，因此确保SMARTJS的代码不会受到其他代码的干扰则显得尤为重要，并且不能破坏和污染全局变量以至于影响到其他JS代码，这一点是任何一个JS库所必须具备的最基本的功能。因此，我把整个JS代码全部放置在一个立即执行的匿名函数中，这样既可达到以上的效果。531、数据处理部分数据处理部分整体模块如图53图53数据处理模块图数据操作模块包括4个大的部分加密模块、验证模块、HTTP通信模块、COOKIE模块。其中，加密模块包括BASE64加密和BASE64解密方法；验证模块包括数据格式验证和表达验证等相关方法；HTTP通信模块包括处理POST和GET请求的方法，以及获取URL参数的方法；COOKIE模块包括对COOKIE的读取、设置、删除方法。5311正则表达式验证要进入我们的“驾培管理系统”，首先我们得进入系统的登录注册界面，这里我们就以登录流程为例进行讲解。登录界面如图54图54登录界面这里的用户名就是用户的手机号，这时候就需要用到SMARTJS的验证模块了，因为我们需要对用户的手机号进行有效的验证，这里的验证仅仅是验证手机格式，而不是经过数据库验证。验证模块整体模块图如图55图55格式验证模块（1）核心代码ISPHONEFUNCTIONPHONEIF/13|4|5|809D4,8/TESTPHONE,GETFUNCTIONURL,SUCCESSVARJSON_DATAJSONSTRINGIFYDATAAJAXTYPE“GET“,URLURL,SUCCESSSUCCESS,ERRORFUNCTIONSMARTCONSOLE“请求服务器出错请检查网络连接“（2）核心代码分析该代码片段主要包含两部分，一个是HTTP请求的POST方式，一个是HTTP请求的GET方式。代码片段是以JQUERY的AJAX模块为基础，然后进行了再一次的“封装”。当需要请求后台数据的时候，只需要调用类似SMARTPOSTURL地址，请求数据，回调函数的方法，即可成功向后台发送AJAX异步数据请求。请求的URL地址是该方法的第一个参数，请求的数据则是该方法的第二个参数，第三个参数则是当成功请求后台后的回调函数，里面通常包含一些处理后台返回数据的代码。当请求后台失败时，浏览器的控制台会打印“请求服务器出错请检查网络连接”字样的信息。相对于原生的JAVASCRIPT以及JQUERY的AJAX请求代码，显而易见，经过二次封装后的代码，在使用时会更加方便和简洁。POST方法IFTYPEOFDATA“OBJECT“|JQUERYISEMPTYOBJECTDATA首先进行入参检测，对传入的第二个参数进行判断，判断参数是否不是对象或者是否是空对象，当满足条件时，打印相关的错误提示信息。VARJSON_DATAJSONSTRINGIFYDATA然后，利用JQUERY的方法JSONSTRINGIFY将JSON对象转化为JSON字符串。GET方法如上。5133BASE64加密与解密（1）BASE64加密核心代码WHILEI2OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC2OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC2OUTBASE64ENCODECHARSCHARATC3（2）核心代码分析如果需要对数据进行基本的数据加密，只需要调用SMARTBASE64ENCODE参数方法，传入一个字符串参数，既可得到一个按一定加密方式得到的加密数据。例如，传入一个参数为HELLOWORLD，返回参数为AGVSBG93B3JSZA。BASE64ENCODE方法CHARCODEAT方法可返回指定位置的字符的UNICODE编码。这个返回值是065535之间的整数。一个“DOC3STRCHARCODEATIIFC361RETURNOUTC3BASE64DECODECHARSC3WHILEI2DOC4STRCHARCODEATIIFC461RETURNOUTC4BASE64DECODECHARSC4WHILEI“_HEADERTR“IDCSS“BACKGROUNDCOLOR“D9EDFA“VARHEADERJSONOBJHEADERHEADERGLOBALOBJIDHEADER/将表头信息存入全局变量中EACHHEADER,FUNCTIONFORKEYINTHIS“_HEADERTR“IDAPPENDTHISKEYVARWIDTHSJSONOBJWIDTHVARTDS“_HEADERTR“ID“TD“FORVARI0IJS代码VARDATA“HEADER”“PHONE”“电话”，“USERNAME”“姓名”，“MAIL”“邮箱”,“ROLE”“角色权限”,“WIDTH”100,100；SMARTCREATETABLE“MYTABLE”，DATA；这里我们向CREATETABLE方法中传入两个参数，一个是HTML中表格的ID，一个是JSON格式的表格数据，“HEADER”数组里面包含的表格的头部信息，“WIDTH”里面包含的是表头每一列的宽度。CREATETABLE方法因为该方法的两个参数为必要参数，所以首先对方法的入参进行检测，判断是否传入了两个参数，否则提示相应的错误信息。然后调用内部方法ISJSONOBJECT方法来判断传入的第二个参数是否是一个JSON对象。满足条件后，利用JS的HASOWNPROPERTY方法来判断第二个参数中是否包含“HEADER”和“WIDTH”两个属性，当这两个属性存在时，循环遍历取这个属性对应的VALUE值，生成相应的表头信息。绑定数据到表格（1）核心代码LOADDATAFUNCTIONID,JSONOBJ省略部分代码EACHROWS,FUNCTIONTABLEBODYAPPENDI1FORVARJ0JTHIS_HEADERTRNAME省略部分代码IFI20TABLEBODYCHILDRENEQIATTR“CLASS“,“DANGER“ELSETABLEBODYCHILDRENEQIATTR“CLASS“,“SUCCESS“_BODYTR“IDICLICKFUNCTIONEIFETARGETATTR“TYPE“CHECKBOX“VARROWTHISCHILDRENEQ0TEXTVARISCHECKEDINPUTSROWCHECKEDIFISCHECKEDINPUTSROWCHECKEDFALSEELSEINPUTSROWCHECKEDTRUE只需要调用SMARTLOADDATA“MYTABLE”,DATA方法，即可将数据绑定到表格，第一个参数为表格的ID，第二个参数为绑定到表格的数据，格式为JSON。如VARDATA“TOTAL”“1”，“ROWS”“USERNAME”“易泽坤”，“PHONE”；表格的样式如图59图59表格LOADDATA方法因为该方法包含两个参数，第一个参数为表格的ID，第二个参数为要绑定到表格的JSON数据对象，该JSON对象必须包含TOTAL和ROWS两个KEY值，TOTAL表示绑定到表格的数据条数，ROWS为要绑定到表格的具体数据，所以ROWS的VALUE值为一个JSON数组，该数组包含了与表格的表头字段相对应的数据信息。首先，对传入的两个参数进行参数检测，判断第一个参数是否为字符串，第二个参数是否为JSON对象，否则提示相关的错误信息。当满足条件时，使用JAVASCRIPT的FORIN关键字来对传入的JSON对象进行遍历，并动态生成相应的表格信息。然后，为了让表格的样式显示得更加美观，通过判断表格信息的奇偶行来添加不同的样式信息。最后，给表格添加相应的单击事件，即当单击表格的某一行数据时，让单击的那一行数据处于选中状态，并且表格第二列的复选框处于勾选状态。获取选中行的数据正如图中所示，该表格还具有获取选中表格数据的功能。（1）核心代码如下GETSELECTEDFUNCTIONIDVARRETVARTEMPOBJFORVARK0K1PAGINATIONBREAKCASE“_NEXT“IDTABLEPAGERINITIFPAGINATION“ARGSARRI“SELECTPICKER“SELECTPICKER“REFRESH“ELSEERROR“参数错误“（2）核心代码分析HTML中自带的下拉框控件，往往只支持单选操作，要实现多选下拉操作，只需调用方法SMARTSETSELECTVALUEID,ARGSARR方法，传入相应的参数，即可生成多选下拉框。第一个参数为下拉列表的ID，第二个参数为包含下拉列表值的数组对象。如传入以下参数VARARR“测试1”，“测试2”，“测试3”；SMARTSETSELECTVALUE“AA”，ARR；效果如图514图514设置多选下拉框SETSELECTVALUE（）方法因为该方法有两个必要参数，所以首先对方法参数进行入参检测，判断传入的第一个参数是否是字符串，第二个参数是否存在且是否原型为数组，当满足条件时，遍历数组，动态给下拉框赋值。获取多选下拉框的值（1）核心代码GETSELECTVALUEFUNCTIONIDIFIDVARVALUE“IDNEXT“DIV“CHILDREN“BUTTON“ATTR“TITLE“REPLACE/S/G,IFVALUENULLRETURNVALUEARRELSEERROR“参数错误“（2）核心代码分析想要获取多选下拉框的值，只需要调用方法SMARTGETSELECTVALUEID方法，传入多选下拉框的ID值，即可得到一个包含选中值的数组对象。如传入以下参数SMARTGETSELECTVALUE“AA”；/“测试1”，“测试2”如图515所示图516获取多选下拉框的值GETSELECTVALUE方法该方法包含一个必要的