jQuery.fn.serialize 阅读
今天第一次阅读jQuery源码,因为读到用js对表单的序列化,为的是在ajax操作中将表单中各个域的值传到服务器。书上用了很长的步骤,判断每一个表单域的属性,然后拼接。
大概是这样:
function serialize(form){
var parts = [],
filed = null,
i,
len,
j,
... for(i=0,len=form.elements.length;i<len;i++){
field=form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
... }
} }
忽然想到jQuery应该是把这些封装的很好,就找来读了。第一次发现这种语言其实很优美,比Java简洁。
我开始有点喜欢上这门语言了 :)
一般我们是这样调用的
$('#dataform').serialize()
找了版本1.8.2的jQuery源码来读
function () {
return jQuery.param(this.serializeArray());
}
最外层只调用了两个方法.jQuery.param()和jQuery对象本身的serializeArray(),从字面上理解就是
1.将表单本身序列化成数组
2.然后从中获得参数
分解如下:
1.先将表单本身序列化成数组
serializeArray()
function () {
return this.map(function () {
return this.elements ? jQuery.makeArray(this.elements) : this;
}).filter(function () {
return this.name && !this.disabled && (this.checked || rselectTextarea.test(this.nodeName) || rinput.test(this.type));
}).map(function (i, elem) {
var val = jQuery(this).val(); return val == null ? null : jQuery.isArray(val) ? jQuery.map(val, function (val, i) {
return {
name: elem.name,
value: val.replace(rCRLF, "\r\n")
};
}) : {
name: elem.name,
value: val.replace(rCRLF, "\r\n")
};
}).get();
}
jQuery.map(callback)将一个数组"映射"成另一个数组,对其中每个元素调用callback方法。
接着返回表单中所有元素的数组。
必须有name,disabled为false,勾选上或是type包含在rinput之中。
取得过滤后元素的val,若val非null,再判断val是否是Array,对其中每个元素,返回一个对象,对象的name为元素的name,value为元素的val,并替换其中的制表符。
最后获取其中的数组。
所以这里看来,原先用js做的复杂switch判断都包含在了rselectTextarea.test(this.nodeName) || rinput.test(this.type)中,正则表达式果然强大。
具体就是这两个
/^(?:select|textarea)/i /^(?:color|date|datetime|datetimelocal|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i
哈哈,提到正则表达式,顺便给出刚搜到的幽默图片。
女:哦不!杀手肯定在假期里跟踪着她,但是要找到他们,我们必须要在200MB的邮件里找出像地址一类的东西!
男:没希望了!
程序员:众人闪开!我知道正则表达式。看我Perl大法!(啪啪键盘声)
好,现在我们回来继续看源码。
2.从数组中中获得参数
param()
function (a, traditional) {
var prefix, s = [],
add = function (key, value) {
// If value is a function, invoke it and return its value
value = jQuery.isFunction(value) ? value() : (value == null ? "" : value);
s[s.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
}; // Set traditional to true for jQuery <= 1.3.2 behavior.
if (traditional === undefined) {
traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
} // If an array was passed in, assume that it is an array of form elements.
if (jQuery.isArray(a) || (a.jquery && !jQuery.isPlainObject(a))) {
// Serialize the form elements
jQuery.each(a, function () {
add(this.name, this.value);
}); } else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for (prefix in a) {
buildParams(prefix, a[prefix], traditional, add);
}
} // Return the resulting serialization
return s.join("&").replace(r20, "+");
}
定义数组s来存放字符串
定义add()来拼接key/value,如果value是方法,则调用,否则返回value值。将key和value编码后放入s
如果a是数组,那么假定a就是表单元素的集合。对其中所有元素调用add()。最后将s中所有字符串用&拼接。
总结:
按代码数来看,jquery写法与原生js的写法相差不多。但在扩展性上要好。
jQuery.fn.serialize 阅读的更多相关文章
- 记jQuery.fn.show的一次踩坑和问题排查
最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...
- jQuery.fn
DIY一个jQuery 写了一个非常简单的 jQuery.fn.init 方法: jQuery.fn.init = function (selector, context, root) { if (! ...
- jQuery.fn的作用是什么
jQuery.fn的作用是什么:在自定义jQuery插件中,会经常见到jQuery.fn的身影,下面就简单介绍一下它的作用到底是什么.想要认识它的本质,最好的办法直接看jQuery的源码,否则一切都是 ...
- 拓展jQuery的serialize(),将form表单转化为json对象
jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...
- jQuery 源码学习 - 02 - jQuery.fn.extend 与 jQuery.extend
参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. extend 方法在 jQuery 中是一个很重要的方法.jQuery 内部用它来拓展静态方法或者 ...
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery.extend和jQuery.fn.extend的区别【转】
解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...
- ES6的Iterator,jquery Fn
ES6的Iterator对象详解 Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指 ...
随机推荐
- JS 代码调试经验总结(菜鸟必读)
前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的 ...
- Convert Binary Search Tree (BST) to Sorted Doubly-Linked List
(http://leetcode.com/2010/11/convert-binary-search-tree-bst-to.html) Convert a BST to a sorted circu ...
- 为什么IIS中找不到.net framework 4.5(转)
.net 4.5是4.0的update,所以直接用4.0部署就可以了 .NET 4.5 is an in-place replacement for .NET 4.0, When .NET 4.5 i ...
- tengine install
./configure --prefix=/home/admin/local/tengine --with-http_stub_status_module --with-http_ssl_module ...
- IOS-将长文字转化成图片方法
我们在看微博时,会看到一些长图片上的显示文章,现在就介绍下如何实现.分析下还是很简单的,总结如下:1.计算文字区域的高 2.利用UIGraphics图形上下文方法来实现 3.验证方法:UIImageW ...
- svn添加强制注释,pre-commit结合python
鉴于组内有些人在提交代码的时候并不写注释,而且没有固定格式,所以准备给svn提交时增加强制注释. 首先找到代码库里的hooks目录,正常建svn库的时候都有这个目录.进入hooks目录,找到pre-c ...
- Web平台开发流程以及规范
1.js和css的放的位置顺序与加载速度分析 为了让客户先看到效果,必须要先加CSS 如果在先head加载CSS,如果CSS大,会先下载CSS,再渲染HTML标签 如果CSS放在head中,当显示出H ...
- C模块回调Lua函数的两种方法
作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di C模块回调Lua函数的两种方法 lua和C通过虚拟栈这种交互方式简单而又可靠,缺点就是C做栈平 ...
- spring jar包冲突
在用Spring+Hibernate做项目时候遇到java.lang.NoSuchMethodError: org.objectweb.asm.ClassVisitor.visit 网上查得答案 环境 ...
- 浅谈JDBC(二)
JDBC中的事务 简单来说,事务就是要保证一组DAO方法的操作,要么一起成功要么一起失败. 1.事务控制的位置 在Service中的业务方法内进行事务控制. 2.事务控制的代码 a.注意:JDBC会自 ...