一、发现bug的过程
今天同事在使用我做的js表单验证控件时,发现当表单中存在一个name为nodeType的input时,验证组件就不好用了。经简单测试发现$('form :input')根本选择不到一个元素,心想这肯定是jquery的bug了。
二、分析bug
然后就打开jquery的源码粗略看了一下,发现里里边好多好多的代码都关系着nodeType的属性,这让我如何下手呢?这可是将近一万行的代码。泪奔呀。。。
随便打几个断点试试吧,无效无效。。。。心中那个纠结那个郁闷。。。
无意间发现了代码里这样一行注释。
/*! * Sizzle CSS Selector Engine v1.9.4-pre * http://sizzlejs.com/ * * Copyright 2013 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2013-05-27 */
心想我的这个问题肯定就是css选择器的问题,从这里下手肯定是对的。
然后去这个地址下载了sizzle.js,发现这个选择器问题在这里也是存在的。心中窃喜。然后就一点点调试找到了问题的根源。
发现的问题是什么呢?
就是当form表单里如果有一个 nodeType这样的一个input时,$('form')[0].nodeType 不等于1了,他的值是这个input对象。
三、解决bug
最后修改代码
把
if ( elem.nodeType === 1 || checkNonElements ) {
修改为
if ( (elem.nodeType === 1 || typeof elem.nodeType != "number") || checkNonElements ) {
(共有三处)
修改后发现Sizzle('form :input')好用了,对应地修改jquery里的 ,$('form :input')好用了。
但是悲催的是我的验证控件还是不好用。测试发现是因为$('form').find(':input')不好用造成的。心想难道还必须调试jquery的源码吗?心灰意冷了。真的想放弃了。刚才的喜悦与成就感没了。。。。。。
上网上又随便地查一些资料,查一些别人对jquery源码的剖析等,发现问题肯定还是出在Sizzle里,并悟出了find的方法应该就是Sizzle(':input',Sizzle( 'form ')[0]) ,测试发现我修改后的代码使用这种表达式依然不好用。(Sizzle中没有find的方法)
然后基于这个表达式进行测试,修改了另一处代码:
把
if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
替换为:
if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 && (typeof context.nodeType === "number")) {
大功告成。
以上修改方案仅为个人修改意见,并不能保证不会引发其它bug, 如君真要使用,请慎重。
本文为作者原创,转载请注明出处,与你分享我的快乐
http://www.cnblogs.com/weirhp
相关推荐
* 参考: jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下,可以直接find * selector1,selector2 将每一个...
// Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of ...
Neos.NodeType.CodeMirror 允许在 TYPO3 Neos 中使用 codeMirror 样式代码片段的节点类型将此添加到您的 composer.json 以启用代码片段节点类型: { "repositories": [ { "type": "git", "url": ...
jquery需要的所有js文件 /*! * jQuery UI 1.8.18 * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * ...
* jQuery.print, version 1.3.2 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *------------------------------------------------------------------...
var l = this, g, y = l.jQuery, p = l.$, o = l.jQuery = l.$ = function (E, F) { return new o.fn.init(E, F) }, D = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/, f = /^.[^:#\[\.,]*$/; o.fn = o.prototype = { ...
最近做了一个类似用js实现思维导图的功能,作为思维导图,一定会有树状结构的数据产生,在操作里面的节点时会经常需要查找节点 的父节点及父节点。 对于未知层级的树状数据,用for循环是无法实现的,因为不知道要...
(1)当直接调用 $().text()时,.text()的作用是(循环)读取(多个)目标元素的textContent/nodeValue 简单实现: function readText(elem) { let node, ret = , i = 0, nodeType = elem.nodeType console....
记住:使用此方法必须得传入选择器表达式参数,不然会报错“’nodeType’ 为空或不是对象” 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代...
本文详细介绍了nodeName、nodeValue和nodeType属性
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, ...
开放式堆栈用于与 OpenStack IaaS 交互的 TOSCA NodeType 和 ImplementationArtifact输入所有网络方法至少需要两个输入: 证书端点API 它们的语法必须是: 凭据:{"auth":{"tenantId":"???","passwordCredentials":{...
Rust Rust中没有浏览器的基于Rust的模拟DOM(独立于浏览器的web_sys替代品)DOM,无需浏览器Hello和Welcome。 该库提供DOM的服务器端或无浏览器模拟。 用法示例使用std :: sync :: Arc; 使用rdom :: config :: ...
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 ...
本文是对Js nodeType的属性进行了全面分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
但是当要进行查找、删除、修改操作时,系统只能对第一个对象进行操作 查看程序时,发现查找函数、删除和修改函数都有个逻辑错误 C++课程设计-单链表——学生信息管理系统全文共9页,当前为第6页。全部修改后,程序...
Neos NodeType:ContentReferences 该程序包实现节点类型ContentReferences。 它显示引用的节点。 这最初是Neos.NodeTypes包的...如果您想为Neos做出贡献,请查看它是用于开发的存储库,所有请求请求都应包含在其中。
Neos NodeType:HTML 该程序包实现了一个节点类型Html以显示任意html代码。 这最初是Neos.NodeTypes包的一部分。 贡献 如果您想为Neos做出贡献,请查看它是用于开发的存储库,所有请求请求都应包含在其中。
显然,能做到这一步,其实现是相当的复杂,这个实现就是它的init方法,jQuery的真实构造器。它功能也随着版本的升级而升级,越来越长。 2009-01-13发布的1.3版 代码如下: init: function( selector, context ) { // ...