毕业设计-基于jquery的封装与应用

基于JQUERY的封装与应用1前言12选题背景13技术介绍与分析231、JQUERY框架2311、JQUERY总体架构2312、构造JQUERY对象5313、选择器SIZZLE10314、数据缓存DATA11315、属性操作ATTRIBUTES12316、DOM操作MANIPULATION14317、异步请求AJAX1732、JSON20321、语法规则20322、基础结构204系统应用开发2141、应用说明2142、应用场景2143、核心源码分析225论文总结与展望43基于JQUERY的封装与应用1前言在这个21世纪的信息时代，开发者在近10年间的开发项目过程中，不得不面对这三大主要的平台浏览器、服务器和本地/手机应用。现实是JAVASCRIPT已经成为事实上的WEB标准语言。而一部分认为JAVASCRIPT正在把手伸向服务器端开发，比如说NODEJS。在2012年9月份，行业分析公司REDMONK就公布了JAVASCRIPT在开发语言里已经处于遥遥领先的地位。这主要得意于JAVASCRIPT所提供的丰富的、动态的网页内容的能力，以及JAVASCRIPT的轻便性和高易用性。正因为如此，基于JAVASCRIPT的库也如雨后春笋般涌现出来，其中不乏许多优秀的、应用广泛的JAVASCRIPT库，如JQUERY、PROTOTYPE、ZEPTO、YUILIBRARY等，这些优秀的库给我们带来了更加便捷的项目开发。2选题背景在众多的JAVASCRIPT库中，最受程序员喜爱莫过于JQUERY了，JQUERY是一个兼容多种浏览器的JAVASCRIPT库，核心理念是WRITELESS,DOMORE，即写得更少,做得更多，多么美妙的理念。JQUERY库在2006年1月由美国人JOHNRESIG在纽约发布，吸引了来自世界各地的众多JAVASCRIPT爱好者及高手加入，由DAVE率领团队进行开发。如今，JQUERY框架已经成为最流行的JAVASCRIPT库，在世界前10000多个访问最多的网站中，有超过55的网站在使用JQUERY。JQUERY框架是免费、开源的，使用MIT许可协议。JQUERY的语法设计使得开发更加方便，快捷，例如操作各种文档对象、选择DOM元素、制作动画效果、事件处理、使用AJAX以及其他功能。除此以外，JQUERY框架提供API让开发者可以方便的编写插件。其模块化的使用方式受到广大开发者的追捧与喜爱，使得开发者可以很轻松的开发出功能强大的静态、动态网页。在这众多的JQUERY爱好者当中，毫无疑问，我也是其中的一员，喜欢它的简单、快速、轻量。但是JQUERY框架也有自己的局限性，虽然它在WEB项目里面能帮助我们解决大量的问题，节省大量的代码，但是为了更进一步的优化项目代码，提高WEB项目的开发进度，所以我打算在JQUERY的基础上，做更深层次的二次封装，方便今后项目的开发与维护。3技术介绍与分析31、JQUERY框架311、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/省略其他模块的代码WINDOWJQUERYWINDOWJQUERYWINDOW312、构造JQUERY对象JQUERY对象是一个类数组对象，一般来说，含有连续的LENGTH属性、整型属性以及大量的JQUERY方法。JQUERY对象的构造函数由JQUERY创建，则是JQUERY的缩写。如果在调用构造函数JQUERY时传入的参数不同，则创建的JQUERY对象的逻辑也会随之不同。构造函数JQUERY有包括7种用法，如图33所示。图33构造函数JQUERY（）1JQUERYSELECTOR,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对象。313、选择器SIZZLE选择器表达式是由块表达式以及块间关系符组成的。块表达式分为总体上分为3种伪类表达式、简单表达式、属性表达；块间关系符则分为4种“父子关系、“祖先后代关系、“紧挨着的兄弟元素、“之后的所有兄弟元素；块表达式和块间关系符共同组成了层级表达式。SIZZLESELECTOR,CONTEXT,RESULTS,SEED用于查找与选择器表达式SELECTOR相匹配的元素集合。如果当前浏览器支持原生方法QUERYSELECTORALL，则会调用该方法去查找元素，如果不支持，则会模拟该方法的行为。SIZZLEFINDEXPR,CONTEXT,ISXML负责查找与块表达式相匹配的元素集合。该方法会按照表达式类型数组SIZZLESELECTORSORDER规定的查找顺序（ID、CLASS、NAME、TAG）逐个尝试查找，如果未找到，则会查找上下文的所有后代元素（）。SIZZLEFILTEREXPR,SET,INPLACE,NOT负责用块表达式过滤元素集合。该方法通过调用过滤函数集SIZZLESELECTORSFILTER中的过滤函数来执行过滤操作。SIZZLESELECTORS包含了SIZZLE在查找和过滤过程中用到的正则、查找函数、过滤函数。SIZZLESELECTORSORDER中定义了查找单个块表达式时的查找顺序，依次是ID、CLASS、NAME、TAG。其中，CLASS需要浏览器支持方法GETELEMENTSBYCLASSNAME。SIZZLESELECTORSMATCH/LEFTMATCH中则存放了表达式类型和正则的映射，正则用于确定块表达式的类型，并解析其中的参数。SIZZLESELECTORSFIND中则定义了ID、CLASS、NAME、TAG所对应的查找函数。其中，CLASS需要浏览器的支持方法GETELEMENTSBYCLASSNAME。查找函数则会返回数组或UNDEFINED，内部则通过调用相应的原生方法来查找相关元素。SIZZLESELECTORSRELATIVE中存放了块间关系符和对应的块间关系过滤函数。块间关系过滤函数则用于检查映射集CHECKSET中的元素是否匹配块间关系符左侧的块表达式。SIZZLESELECTORSPREFILTER中定义了POS、CHILD、TAG、ID、ATTR、PSEUDO、CLASS所对应的预过滤函数。预过滤函则用于在过滤函数之前修正与过滤操作相关的参数。SIZZLESELECTORSFILTERS中则定义了一组伪类和对应的伪类过滤函数。伪类过滤函数负责检查元素是否匹配伪类，返回一个布尔值。SIZZLESELECTORSSETFILTERS中则定义了一组位置伪类和对应的伪类过滤函数。位置伪类过滤函数通过比较下标来确定元素在集合中的位置，它会返回一个布尔类型的值。SIZZLESELECTORSFILTER中定义了ID、CHILD、CLASS、TAG、ATTR、POS、PSEUDO对应的过滤函数。过滤函数则负责检查元素是否匹配过滤表达式，返回一个布尔类型的值。314、数据缓存DATA对于DOM元素，常通过分配一个唯一的关联ID把DOM元素和该DOM元素相关的数据缓存对象关联起来，关联ID则会被附加到以JQUERYEXPANDO的值来命名的属性上，数据存储在全局缓存对象的JQUERYCACHE中。在设置、读取、移除数据时，将通过关联ID从全局缓存对象JQUERYCACHE中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除等相关操作。对于JAVASCRIPT对象，数据则直接存储在该JAVASCRIPT对象的JQUERYEXPANDO上。当设置、读取、移除数据时，实际上是在对JAVASCRIPT对象的数据缓存进行设置、读取、移除等相关操作。为了避免JQUERY框架内部使用的数据和用户自己定义的数据发生冲突，数据缓存模块则把内部数据存储在数据缓存的对象上，把自定义数据存储在数据缓存对象的DATA属性上。JQUERYDATAELEM,NAME,DATA,PVT用于为DOM元素或JAVASCRIPT对象设置任意类型的数据，或者返回指定名称的数据，或者返回关联的数据缓存对象，该方法的功能主要取决于参数的个数和类型。JQUERY_DATAELEM,NAME,DATA,PVT用于为DOM元素或者JAVASCRIPT对象设置或者读取内部数据，通过调用方法JQUERYELEM,NAME,DATA,PVT实现，调用时设置第四个参数PVT为TRUE。在JQUERY框架内部，该方法主要负责为队列模块、动画模块。样式操作模块、事件系统设置或者读取运行时的内部数据。DATAKEY,VALUE主要用于为匹配元素设置或者读取自定义数据，解析HTML5属性DATA，并且触发相应的自定义事件CHANGEDATA、SETDATA、GETDATA，该方法的功能取决于参数的类型和个数。JQUERYREMOVEDATAELEM,NAME,PVT主要用于移除通过JQUERYDATA设置的数据，该方法的功能则取决于参数的类型和个数。REMOVEDATAKEY主要用于移除匹配元素的自定义数据，通过在每个匹配元素上调用方法JQUERYREMOVEDATAELEM,NAME,PVT来实现。JQUERYCLEANDATAELEMS则用于移除多个DOM元素关联的全部数据和事件，仅在JQUERY框架内部使用。315、属性操作ATTRIBUTES1HTML属性操作JQUERYATTRELEM,NAME,VALUE,PASS则用于获取DOM元素的HTML属性值，或者为DOM元素设置一个HTML属性。该方法则为方法ATTRNAME,VALUE提供了最的基础功能，是对原生方法GETATTRIBUTE和SETATTRIBUTE进行了大量的封装和简化，并解决了浏览器兼容性问题。ATTRNAME,VALUE用于获取匹配元素集合中第一个元素的HTML属性值，或者为匹配元素集合中的每个元素设置一个或者多个HTML属性。该方法则通过调用方法JQUERYACCESS和JQUERYATTR实现。JQUERYREMOVEATTRELEM,VALUE用于从DOM元素上移除一个或者多个HTML属性，多个HTML属性之间通常用用空格分隔。该方法为方法REMOVEATTRNAME提供了基础功能，它是对原生方法REMOVEATTRIBUTE的封装和扩展，并解决了大量浏览器兼容性问题。REMOVEATTRNAME用于从匹配元素集合中的每个元素上移除一个或者多个HTML属性，多个HTML属性之间用空格分隔。该方法通过在每个匹配元素上调用方法JQUERYREMOVEATTR来实现。2DOM属性操作JQUERYPROPELEM,NAME,VALUE主要用于获取DOM元素的DOM属性值，或者为DOM元素设置一个DOM属性。该方法为方法PROPNAME,VALUE提供了许多基础功能，是对DOM属性元素的读取、设置操作进行的封装和简化，并解决了大量浏览器兼容性问题。PROPNAME,VALUE则主要用于获取匹配元素集合中第一个元素的DOM属性值，或者为匹配元素集合中的每个元素设置一个或者多个DOM属性。该方法主要通过调用方法JQUERYACCESS和JQUERYPROP来实现。REMOVEPROPNAME主要用于从匹配元素集中的每个元素上移除一个DOM属性。该方法是对DOM元素原生删除操作的简单封装与简化，并解决了IE6到IE8浏览器中不允许删除DOM属性的兼容性问题。3类样式操作ADDCLASSCLASSNAME则用于为匹配元素上的每个元素添加一个或者多个类样式。该方法通过修改DOM属性CLASSNAME来修改类样式，其重要技巧是先在待添加的类样式和当前类样式的前后分别添加空格，然后检查字符串方法INDEXOF的返回值，来决定是忽略还是添加。REMOVECLASSCLASSNAME主要用于从匹配元素集合中的每个元素上移除一个或者多个全部类样式。该方法则通过修改DOM属性CLASSNAME来移除类的样式，其核心技巧是先在待移除的类样式和当前的前后分别加空格，然后用字符串方法REPLACE逐个从当前类样式中移除。TOGGLECLASSCLASSNAME,SWITCH用于为匹配的元素集合中的每个元素添加或移除（即切换）一个或者多个或全部类样式，移除或添加的行为依赖于匹配元素是否含有指定的类样式以及参数SWITCH的值。该方法通过调用方法ADDCLASS或REMOVECLASS来移除或添加一个或者多个类样式，通过直接设置DOM属性CLASSNAME来切换全部的类样式。HASCLASSSELECTOR用于检测匹配元素集中的任意元素是否含有指定的类样式，当只要其中一个元素含有指定的样式，就返回TRUE。该方法的核心技巧则是在待查找的类样式和当前样式的前后分别加空格，然后用字符串方法INDEXOF检测。4值操作VALVALUE常用于获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值。该方法是对DOM属性VALUE原生读取、设置操作的封装和扩展，并解决了大量浏览器兼容问题。316、DOM操作MANIPULATIONDOM操作模块的实现总体上包括5部分删除元素、插入元素、包裹元素、复制元素、替换元素。1插入元素DOMMANIPARGS,TABLE,CALLBACK是JQUERY框架插入元素实现的核心方法，负责转换HTML代码为DOM元素，然后调用传入的回调函数插入DOM元素。转换HTML代码通过调用方法JQUERYBUILDFRAGMENTARGS,NODES,SCRIPT和JQUERYCLEANELEMS,CONTEXT,FRAMENT,SCRIPTS来实现；而插入操作则由插入方法调用DOMMANIP方法时传入的回调函数来实现，在回调函数中通过调用原生方法来插入相关元素。APPENDCONTEXT,CONTENT方法用于在匹配元素集合中每个元素的末尾插入参数指定的内容。该方法主要通过调用核心方法DOMMANIPARGS,TABLE,CALLBACK来实现，它在传入的回调函数中通过调用原生方法APPENDCHILD来插入相关元素。PREPENDCONTENT,CONTENT常被用于在匹配元素集合中每个元素的头部插入参数指定的内容。该方法通过调用核心方法DOMMANIPARGS,TABLE,CALLBACK来实现，它在传入的回调函数中则通过调用原生方法INSERTBEFORE来插入相关元素。BEFORECONTENT,CONTENT通常被用于在匹配元素集合的每个元素之前插入参数指定的内容。该方法通过调用核心方法DOMMANIPARGS,TABLE,CALLBACK来实现，它在传入的回调函数中只需要通过调用原生方法INSERTBEFORE来插入相关元素。AFTERCONTENT,CONTENT则用于在匹配元素集合的每个元素之后插入参数指定的内容。该方法调用核心方法DOMMANIPARGS,TABLE,CALLBACK来实现，它在传入的回调函数中通过调用原生方法INSERTBEFORE来插入相关元素。PREPENDTOTARGET、APPENDTOTARGET、INSERTAFTERTARGET、INSERTBEFORETARGET、分别与方法AFTER、PREPEND、APPEND、BEFORE执行同样的任务，它们之间的主要区别在于语法顺序上，前者是待插入元素在前，目标元素在后，后者则是目标元素在前，待插入元素在后。HTMLVALUE则被用于获取匹配元素集合中第一个元素的HTML内容，或者设置每个元素的HTML内容。该方法通过读取属性INNERHTML来获取HTML内容；设置HTML内容时，先尝试设置直接属性INNERHTML，如果抛出异常，则先调用方法EMPTY移除后代元素关联的数据和事件、移除子元素，然后调用方法APPEND插入HTML内容、TEXTTEXT用于获取匹配元素集合中所有元素合并后的文本内容，或者设置匹配元素集合中每个元素的文本内容。该方法在设置文本内容时先创建文本节点，然后将文本节点插入每个匹配元素中，读取文本内容则调用方法JQUERYTEXTELEM实现。2删除元素REMOVESELECTOR,KEEPDATA用于从文档中移除匹配元素集合。该方法会遍历匹配元素集合，先移除后代元素和匹配元素关联的数据和事件，以避免内存泄露，然后移除匹配元素。EMPTY用于从文档中移除匹配元素的所有子元素。该方法会遍历匹配元素集合，先移除后代元素关联的数据和事件，以避免内存泄露，然后移除子元素。DETACHSELECTOR用于从文档中移除匹配元素集合，但是会保留后代元素和匹配元素关联的数据和事件。该方法通过调用方法REMOVESELECTOR,KEEPDATA来实现。3复制元素CLONEDATAANDEVENTS,DEEPDATAANDEVENTS用于创建匹配元素集合的深度复制副本。该方法通过调用方法JQUERYCLONEELEM,DATAANDEVENTS,DEEPDATAANDEVENTS来实现。JQUERYCLONEELEM,DATAANDEVENTS,DEEPDATAANDEVENTS用于复制DOM元素，并修正不兼容属性。调用该方法时，如果参数DATAANDEVENTS为TRUE，则复制数据和事件，如果参数DEEPDATAANDEVENTS为TRUE，则复制后代元素的数据和事件。4替换元素REPLACEWITHVALUE使用提供的新内容来替换匹配元素集合中的每个元素。该方法会遍历元素集合，先移除匹配元素和它关联的数据和事件，然后调用方法BEFORE或APPEND插入新内容。REPLACEALLTARGET使用匹配元素集合中的元素替换目标元素。该方法与方法REPLACEWITHVALUE执行同样的任务，两者之间的区别在于语法顺序上，前者是替换元素在前、目标元素在后，后者则是目标元素在前、替换元素在后。5包裹元素WRAPALLHTML用于在匹配元素集合的所有元素前后包裹一段HTML结构。该方法先调用原生方法INSERTBEFORE将包裹元素插入第一个匹配元素之前，然后把当前匹配元素集合插入包裹元素中。WRAPINNERHTML用于在匹配元素集合中每个元素的内容前后包裹一段HTML结构。该方法会遍历匹配元素集合，并通过调用方法WRAPALL为每个匹配元素的所有内容包裹一段HTML结构。WRAPHTML用于在匹配元素集合的每个元素前后包裹一段HTML结构。该方法会遍历匹配元素集合，在每个元素上通过调用方法WRAPALL实现。UNWRAP用于移除匹配元素集合中的父元素，然后用父元素的所有子元素替换掉父元素的位置上。该方法先查找每个匹配元素的父元素，然后用父元素的所有子元素替换掉父元素，替换行为通过调用方法REPLACEWITHVALUE实现。317、异步请求AJAX1JQUERYAJAXURL，OPTIONSJQUERYAJAXURL，OPTIONS负责执行一个异步HTTPAJAX请求。该方法是AJAX模块的核心方法，便捷方法都是通过调用该方法实现的。该方法的执行的6个关键步骤如下1）构造完整的请求选项集，并修正选项。2）构造JQXHR对象，并增加异步队列的行为。3）构造回调函数DONESTATUS,NATIVESTATUSTEXT,RESPONSE,HEADERS，响应完成之后被调用，负责转换数据类型、执行回调函数、触发全局事件。4）应用前置过滤器，继续修正选项。5）获取请求发送器，并调用方法SENDREQUESTHEADERS,DONE发送请求。6）最后返回JQXHR对象。2前置过滤器前置过滤器是一个函数，在每次请求发送之前被调用，用于处理自定义选项或修改已有选项，或将当前请求重定向到另一个数据类型。前置过滤器的实现包括3部分前置过滤器集PREFILTERS结构为数据类型与前置过滤器数组的映射。添加方法JQUERYAJAXPREFILTERDATATYPEEXCEPTION,FUNC向前置过滤器集PREFILTERS中添加前置过滤器。执行函数INSPECTPREFILTERSORTRANSPORTSSTRUCURE,OPTIONS从前置过滤器集PROFILTERS中找到数据类型对应的前置过滤器数组，逐个执行。3请求发送器请求发送器是一个对象，含有方法SENDREQUESTHEADERS,DONE和ABORT，分别用于发送和取消请求。在方法JQUERYAJAXURL,OPTIONS内部，根据数据类型获取相应的请求发送器，然后发送或取消请求。请求发送器的实现包括3部分请求发送器工厂函数集TRANSPORTS结构为数据类型与请求发送器工厂函数的映射。AJAX模块内置支持通过XMLHTTPREQUEST对象和SCRIPT元素请求。添加方法JQUERYAJAXTRANSPORTDATATYPEEXPRESSION,FUNC向请求发送器工厂函数集TRANSPORTS中添加请求发送器工厂函数。执行函数INSPECTPREFILTERSSTRUCTURE,OPTIONS,ORIINALOPTIONS,JQXHR从请求发送器工厂函数集TRANSPORTS中找到数据类型对应的请求发送器工厂函数，执行工厂函数，为当前请求分配并返回一个请求发送器。4数据转换器数据转换器是一个回调函数，在每次响应成功，并且有响应数据时被调用，用于将特定类型的响应数据转换为期望类型的数据。数据转换器的实现包括3部分数据转换器集JQUERYAJAXSETTINGCONVERTERS结构为类型转换表达式与数据转换器的映射。添加方法JQUERYAJAXSETUPTARGET,SETTINGS用于设置AJAX请求选项的默认值，包括选项CONVERTERS在内；也可以直接向JQUERYAJAXSETTIGCOVERTERS中添加新的类型转换表达式与数据转换器的映射。执行函数AJAXCONVERTS,RESPONSE从数据转换器集JQUERYAJAXSETTINGSCONVERTERS中查找数据类型类型转换表达式对应的数据转换器，并执行，当无法直接转换时尝试查找中间类型。该函数在每次响应成功，并且有响应数据时被调用。5AJAX事件AJAX请求触发若干可监听的本地事件和全局事件。本地事件有BEFORESEND、SUCCESS、ERROR、COMPLETE，每个本地事件对应一个或一组回调函数，触发范围仅限于本次请求。全局事件有AJAXSTART、AJAXSEND、AJAXSUCCESS、AJAXERROR、AJAXCOMPETE、AJAXSTOP，通过JQUERY事件系统实现，默认会被传播到所有元素。如果指定了选项CONTEXT，并且是DOM元素或JQUERY集合，只会在指定的元素上触发全局事件AJAXSEND、AJAXSUCCESS、AJAXERROR、AJAXCOMPLETE。6便捷方法便捷方法是对核心方法JQUERYAJAXURL,OPTIONS的简化封装。JQUERYGETURL，DATA，CALLBACK，TYPE使用HTTPGET请求从服务端加载数据，调用JQUERYAJAXURL，OPTIONS时指定选项TYPE为”TYPE”。JQUERYPOSTURL，DATA，CALLBACK，TYPE使用HTTPPOST请求向服务器提交数据，调用JQUERYAJAXURL，OPTIONS时指定选项为TYPE为“POST”。JQUERYGETSCRIPTURL，CALLBACK使用HTTPGET请求从服务端加载一个JAVASCRIPT文件并执行，通过调用方法JQUERYGETURL，DATA，CALLBACK，TYPE实现，调用时指定选项DATATYPE为“SCRIPT”。JQUERYGETJSONURL，DATA，CALLBACK使用HTTPGET请求从服务端加载JSON格式的数据通过调用方法JQUERYGETURL，DATA，CALLBACK，TYPE实现，调用时指定选项DATATYPE为“JSON”。LOADURL，ARAMS，CALLBACK负责从服务器加载数据，并将返回的HTML插入匹配元素中，通过调用方法JQUERYAJAXURL，OPTIONS实现，调用时指定选项DATATYPE为“HTML”。该方法内部暗含一个完成回调函数，用于在响应成功后设置每个匹配元素的HTML内容为响应数据。7工具方法工具方法用于辅助增强AJAX任务。SERIALIZE负责把一组表单元素序列化为一段URL查询串，用于表单提交。该方法先调用方法SERIALIZEARRAY将表单元素编码为对象数组，然后调用方法JQUERYPARAMA，TRADITIONAL将对象数组序列化为URL查询串。JQUERYPARAMA，TRADITIONAL用于数组或对象序列化一段URL查询串。SERIALLIZEARRAY负责把一组表单元素编码为一个对象数组，每个对象元素都含有属性NAME和VALUE。32、JSONJSON是数据交换格式，它是轻量的，它采用了完全独立于语言的文本格式，相比于XML，它更便于人们阅读和编写，这些特性使得它成为了当下理想的数据交换格式。321、语法规则1方括号保存数组2花括号保存对象3数据由逗号分隔4数据在键值对中322、基础结构JSON的结构分为两种一个是对象，一个是数组。通过这两种结构可以生成各种复杂的结构1、对象对象在JAVASCRIPT中通常表示为“”括起来的内容，数据结构为KEYVALUE,KEYVALUE,的键值对的结构，在面向对象的语言中，如JAVASCRIPT，JAVA中，KEY为对象的属性，VALUE为对应的属性值，这是非常容易理解的，取值方法为对象KEY或者KEY获取属性的VALUE值，这个属性值的类型可以是数字，或者字符串或者数组、对象等等。2、数组数组在JAVASCRIPT中是中括号“”括起来的内容，数据结构为“JAVA“,“JAVASCRIPT“,“VB“,，取值方式和其他所有语言中的一样，使用索引来获取，字段值的类型可以是数字、字符串、数组、对象等。经过对象、数组这2种结构就可以组合成复杂的数据结构了。4系统应用开发41应用说明现在的信息时代，对于应用的架构无非大体上分为两种，一种是基于C/S的架构，即客户端、服务器；而另一种则是基于B/S的架构，即浏览器、服务器。现在最火的是哪种架构呢毫无疑问，B/S是当之无愧的霸主，它相对于C/S开发而言，更加轻量快捷，而这些正是用户喜闻乐见的。虽然B/S的开发更加轻量、快捷，但是在应用程序的开发过程中，我们还是不得不编写大量的重复的代码，即使不是完全重复，但是这对一个对自己或者对项目有要求的程序员来说，还是一个很头疼的问题。好的程序员和差的程序员的区别在哪里一个好的程序员往往是善于思考与总结的，他们能用更少的代码做更多的事，这时候要做的一件事那就是“封装”，这样就可以达到一劳永逸的效果。对于前端的JS代码则更是如此，因此我决定自己封装一个JS库，方便今后项目的开发，或许这称不上库，但是谁叫我想不到更好的名字去代替它呢42应用场景这里暂且将这个JAVASCRIPT库称为SMARTJS，如果你需要一个JS库来帮你处理一些数据，如BASE64加密解密，甚至是MD5，你可以选择SMARTJS；如果你需要正则表达式来帮你验证一些数据，如手机号、身份证号，密码，邮箱等，你可以选择SMARTJS；如果你需要向后台服务端发送一些数据请求，如GET或者POST方式，你可以选择SMARTJS；如果你需要对浏览器端的COOKIE做一系列的操作，那么你可以选择SMARTJS。当然，SMARTJS能做的事远远不止于此，它或许比你想象的要强大，包括一些常见的页面显示处理，数据处理等43核心源码分析整个SMARTJS大体上分为两部分，一部分处理数据，另一部分则处理页面显示，整体架构则如下FUNCTIONVAR_SMARTWINDOWSMARTVARSMARTFUNCTIONRETURNNEWSMARTFNINITSMARTFNSMARTPROTOTYPECONSTRUCTORSMART,INITFUNCTIONRETURNTHIS,SELECTOR“,LENGTH0,SMARTFNINITPROTOTYPESMARTFNSMARTEXTENDSMARTFNEXTENDFUNCTIONSMARTEXTEND/这部分则是封装的具体数据处理与页面处理部分由于这个封装的JS库可能会被应用于多个WEB项目中，因此确保SMARTJS的代码不会受到其他代码的干扰则显得尤为重要，并且不能破坏和污染全局变量以至于影响到其他JS代码，这一点是任何一个JS库所必须具备的最基本的功能。因此，我把整个JS代码全部放置在一个立即执行的匿名函数中，这样既可达到以上的效果。1数据处理部分11正则表达式验证核心代码如下SMARTEXTENDISPHONEFUNCTIONPHONEIF/13|4|5|809D4,8/TESTPHONEELSERETURNFALSE,ISIDCARDFUNCTIONIDCARDIF/D6D4D2D2D309|X/TESTIDCARDELSERETURNFALSE,ISPASSWORDFUNCTIONPASSWORDIF/09AZAZ6,12/TESTPASSWORDRETURNTRUEELSERETURNFALSE,ISEMAILFUNCTIONEMAILIF/AZAZ09_AZAZ09AZAZ092,4/TESTEMAILRETURNTRUEELSERETURNFALSE在这里，只需要使用类似SMARTISEMAIL参数的代码，传入一个字符串参数，就可以得到一个布尔类型的值，这样就可以达到验证手机号、身份证号、邮箱等表单数据的效果了。12HTTP请求（包括GET和POST）核心代码如下SMARTEXTENDPOSTFUNCTIONURL,DATA,SUCCESS/DATAIFTYPEOFDATA“OBJECT“|JQUERYISEMPTYOBJECTDATASMARTCONSOLEURL“对应的参数格式错误“VARJSON_DATAJSONSTRINGIFYDATAAJAXTYPE“POST“,URLURL,DATAJSON_DATA,CONTENTTYPE“APPLICATION/JSON“,DATATYPE“JSON“,SUCCESSSUCCESS,ERRORFUNCTIONSMARTCONSOLE“请求服务器出错请检查网络连接“,GETFUNCTIONURL,SUCCESSVARJSON_DATAJSONSTRINGIFYDATAAJAXTYPE“GET“,URLURL,SUCCESSSUCCESS,ERRORFUNCTIONSMARTCONSOLE“请求服务器出错请检查网络连接“当需要请求后台数据的时候，只需要调用类似SMARTPOSTURL地址，请求数据，回调函数的方法，即可成功向后台发送AJAX异步数据请求。请求的URL地址是该方法的第一个参数，请求的数据则是该方法的第二个参数，第三个参数则是当成功请求后台后的回调函数，里面通常包含一些处理后台返回数据的代码。13BASE64加密与解密BASE64加密核心代码如下BASE64ENCODEFUNCTIONSTRVAROUT,I,LENVARC1,C2,C3LENSTRLENGTHI0OUT“WHILEI2OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC2OUTBASE64ENCODECHARSCHARATC1OUTBASE64ENCODECHARSCHARATC2OUTBASE64ENCODECHARSCHARATC3RETURNOUT如果需要对数据进行基本的数据加密，只需要调用SMARTBASE64ENCODE参数方法，传入一个字符串参数，既可得到一个按一定加密方式得到的加密数据。如传入一个参数为HELLOWORLD，返回参数为AGVSBG93B3JSZA。BASE64解密核心代码如下BASE64DECODEFUNCTIONSTRVARC1,C2,C3,C4VARI,LEN,OUTLENSTRLENGTHI0OUT“WHILEI4DOC3STRCHARCODEATIIFC361RETURNOUTC3BASE64DECODECHARSC3WHILEI2DOC4STRCHARCODEATIIFC461RETURNOUTC4BASE64DECODECHARSC4WHILEI“_HEADERTR“IDCSS“BACKGROUNDCOLOR“D9EDFA“VARHEADERJSONOBJHEADERHEADERGLOBALOBJIDHEADER/将表头信息存入全局变量中EACHHEADER,FUNCTIONFORKEYINTHIS“_HEADERTR“IDAPPENDTHISKEYVARWIDTHSJSONOBJWIDTHVARTDS“_HEA