高云的jQuery源码分析笔记

(function( window,undefined ) {
    // 构造jQuery对象
var jQuery = ( selector,context ) {
        return new jQuery.fn.init( selector,context,rootjQuery );
    }
 工具函数 Utilities
// 异步队列 Deferred 浏览器测试 Support 数据缓存 Data 队列 queue 属性操作 Attribute 事件处理 Event 选择器 Sizzle DOM遍历 DOM操作 CSS操作 异步请求 Ajax 动画 FX 坐标和大小
    window.jQuery = window.$ = jQuery;
})(window);
View Code

1、为什么要传入window呢?

通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.6.1.min.js:

(function(a,b){})(window); // window 被优化为 a   

2、注意到源码最后的分号了吗?

分号是可选的,但省略分号并不是一个好的编程习惯;为了更好的兼容性和健壮性,请在每行代码后加上分号并养成习惯。

3、正则

3.1常用的数字正则(严格匹配)

常用的数字正则(严格匹配)

正则    含义
^[1-9]\d*$    匹配正整数
^-[1-9]\d*$    匹配负整数
^-?[1-9]\d*$    匹配整数
^[1-9]\d*|0$    匹配非负整数(正整数 + 0^-[1-9]\d*|0$    匹配非正整数(负整数 + 0^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$    匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$    匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$     匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$    匹配非负浮点数(正浮点数 + 0^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$    匹配非正浮点数(负浮点数 + 0)
View Code

3.2匹配中文字符

匹配中文字符

普遍使用的正则是[\u4e00-\u9fa5],但这个范围并不完整。例如:
/[\u4e00-\u9fa5]/.test( '⻏' )  测试部首⻏,返回false
根据Unicode 5.0版编码,要准确的判断一个中文字符要包括:
范围    含义    范围    含义
2E80-2EFF    CJK 部首补充    2F00-2FDF    康熙字典部首
3000-303F    CJK 符号和标点    31C0-31EF    CJK 笔画
3200-32FF    封闭式 CJK 文字和月份    3300-33FF    CJK 兼容
3400-4DBF    CJK 统一表意符号扩展 A    4DC0-4DFF    易经六十四卦符号
4E00-9FBF    CJK 统一表意符号    F900-FAFF    CJK 兼容象形文字
FE30-FE4F    CJK 兼容形式    FF00-FFEF    全角ASCII、全角标点
因此,正确的匹配中文字符正则表达式为:
var rcjk = /[\u2E80-\u2EFF\u2F00-\u2FDF\u3000-\u303F\u31C0-\u31EF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FBF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF]+/g;
如果不希望匹配标点、符号,在正则中去掉对应的范围即可:
3000-303F    CJK 符号和标点    FF00-FFEF    全角ASCII、全角标点
View Code

3.2匹配双字节字符(包括汉字在内)

匹配双字节字符(包括汉字在内)

[^\x00-\xff],可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1),代码示例如下:
console.info( "abc".replace( /[^\x00-\xff]/g,"aa" ).length )  3
console.info( "汉字".replace( /[^\x00-\xff]/g,1)"> 4
console.info( "abc汉字".replace( /[^\x00-\xff]/g,"aa").length )  7
View Code

3.3匹配身份证

匹配身份证

先说说网上流传的版本:
\d{15}|\d{18}
d{15}
\d{18}    可以判断,但是有些粗糙 
从身份证可以解析出地址、生日、性别等,因此特别说明一下:
    身份证规则
中国的身份证为15位(一代)或18位(二代),区别在于二代证只是在一代证的第七位数字前加了19和在末尾加了一位验证码
    将15位升级为18位,并解析18位号码构成(地址、生日、性别)
代码如下:
 parseID(ID) {
    if ( ID.length == 15 ) {
         升级为18位
        ID = ID.substr( 0,6 ) + "19" + ID.substr( 6 );
         前17位对应的系数
        var rank = [
                "7","9","10","5","8","4","2","1","6","3","7","2"
        ];
         前17为加权除以17后的余数对应的最后一位身份证号码
        var last = [
                "1","0","X",1)"> 加权和
        for ( var i = 0,sum = 0,len = ID.length; i < len; i++)
            sum += ID[ i ] * rank[ i ];
         加上最后一位
        ID += last[ sum % 11 ];
    }
    if ( ID.length != 18 ) null;

    var match = rid.exec( ID );
    return match ? {
        ID : ID,area : match[ 1 ],y : match[ 24
    } : ;
}
限制:
    这里只是解析出了地址代码,如何将代码转换为实际地址请问度娘。
    返回对象中的sex为1(男)或0(女),并未做转换,如果页面显示需要,可以这样转换:sex ? "男" : "女" 
测试:
console.info( parseID( "142327840821047" ) );
console.info( parseID("142327198408210470" ) );
参考资料:
http:baike.baidu.com/view/118340.htm#1
View Code

3.4匹配IP地址

匹配IP地址

先说说网上流传的版本:
\d+\.\d+\.\d+\.\d+
\d    数字没有限制
修正如下:
var rip = /^(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])$/;
rip.test( "192.168.1.1" )  true
rip.test( "0.0.0.0" )  true
rip.test( "255.255.255.255" )  true
rip.test( "256.255.255.255" )  false
进一步增加分组:
var rip2 = /^([01]?\d{1,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,1)">;
rip2.exec( "192.168.1.1" )  ["192.168.1.1","192","168","1"]
rip2.exec( "0.0.0.0" )  ["0.0.0.0","0"]
rip2.exec( "255.255.255.255" )  ["255.255.255.255","255","255"]
rip2.exec( "256.255.255.255" )  null
View Code

3.5匹配腾讯QQ号 

匹配腾讯QQ号

网上流传的版本很好用:
 [1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
View Code

3.6匹配国内电话号码

匹配国内电话号码

网上流传的版本很好用:
\d{3}-\d{8}|\d{4}-\d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
View Code

3.7匹配帐号是否合法  

匹配帐号是否合法

先说说网上流传的版本:
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
(字母开头,允许5-16字节,允许字母数字下划线)
限制必须以字母开头现在看来不合适,比如QQ登录平台
限制不能以下划线开头也没有必要,比如百度就允许,因此简单点
修正如下:
var ruser = /\w{4,16}/
View Code

3.8匹配网址URL的正则表达式  

匹配网址URL的正则表达式

先说说网上流传的版本:
[a-zA-z]+:[^\s]*
粗糙,没有对URL中各个块进行分组
修正如下(又一段网上流传的版本):
var _url = "^((https|http|ftp|rtsp|mms)?://)?" //
         + "(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?"  ftp的user@
         + "(([0-9]{1,3}.){3}[0-9]{1,3}"  IP形式的URL- 199.194.52.184
         + "|"  允许IP和DOMAIN(域名)
         + "([0-9a-z_!~*'()-]+.)*"  域名- www.
         + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]."  二级域名
         + "[a-z]{2,6})"  first level domain- .com or .museum
         + "(:[0-9]{1,4})?"  端口- :80
         + "((/?)|"  a slash isn't required if there is no file name
         + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
var rurl = new RegExp( _url,'i' );

测试:
rurl.exec( 'baidu.com' )  ["baidu.com",undefined,"baidu.com","baid","",undefined]
rurl.exec( 'http://baidu.com' ) // 
rurl.exec( 'http://www.baidu.com' )  ["http://baidu.com","http://","http",undefined]
rurl.test( 'baidu' )  true
看来不怎么也好用,有待学习TODO。
View Code

3.9匹配Email地址的正则表达式 

匹配Email地址的正则表达式

先介绍下Email的规则:local-part@domain
    local-part最长64,domain最长253,总长最长256
    local-part可以使用任意ASCII字符:
    大小写英文字母 a-z,A-Z
    数字 0-9
    字符 !#$%&'*+-/=?^_`{|}~
    字符 .不能是第一个和最后一个,不能连续出现两次
    但是有些邮件服务器会拒绝包含有特殊字符的邮件地址
    domain(域名)仅限于26个英文字母、10个数字、连词号-
    连词号-不能是第一个字符
    顶级域名(com、cn等)长度为2到6个
先说说网上流传的版本:
\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
()    莫名奇妙的分组,如果只分组不记录,可以使用(?:)
@\w    domain不能包含下划线_
\w+([-.]\w+)*    顶级域名不符合规则
修正如下:
var remail = /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/i
remail.exec( 'nuysoft@gmail.com' ) // "nuysoft@gmail.com","nuysoft","gmail.com"]
remail.exec( 'nuysoft@gmail.comcomcom' ) // null
remail.exec( 'nuysoft@_gmail.com )  null
修正后的正则有如下局限性:
    不支持中文邮箱、中文域名,之所以不在其中支持是因为我个人的爱好倾向,反感这类华而不实的玩意
    不支持特殊符号,避免非邮件服务器拒绝,如果需要,可以添加。
参考文章:
http:en.wikipedia.org/wiki/Email_address
http:baike.baidu.com/view/119298.htm
View Code

3.10匹配首尾空白字符的正则表达式

匹配首尾空白字符的正则表达式

先说说网上流传的版本:
^\s*|\s*$
可以删除行首行尾的空白字符,例如:
'   \t    \n\r   abc   \t    \n\r   '.replace( /^\s*|\s*$/g,'' )  abc
但是用\s*不能判断出字符串是否在开头或结尾处有\s,例如:
/^\s*|\s*$/.test( 'abc' )  true
修正如下:
^\s+|\s+$
'   \t    \n\r   abc   \t    \n\r   '.replace( /^\s+|\s+$/g,1)"> abc
/^\s+|\s+$/.test( 'abc' )  false
View Code

3.11匹配HTML标记的正则表达式

匹配HTML标记的正则表达式

先说说网上流传的版本:
<(\S*?)[^>]*>.*?</\1>|<.*? />
*?    *表示0个或多个,?表示0个或1个,两个叠加起来标识0个多个,与*的功能重叠
(\S*?)    标签的长度必须大于0,因此不能用*? 
|<.*?\/>    没有分组,无法获取以<div/>这种自关闭格式书写的标签
</\1>
<.*? />    有的标签是不关闭的,比如<br><hr>,因此不能强制关闭
修正如下:
var rtag = /^<([a-z]+)\s*\/?>.*(?:<\/\1>)?$/i
rtag.exec( '<-div></-div>')  null 
rtag.exec( '<div>abc')  ["<div>abc","div"]
这个表达式也不完善,比如第二条测试语句,这么写是为了能提取中包含了文本内容的标签,如果要严格匹配,可再次修改为:
var rtag = /^<([a-z]+)\s*\/?> (?:<\/\1>)?$/i  去掉了中间的.*
这个正则的应用范围仅限于简单的标签匹配、提取,不能匹配嵌套标记。
View Code

 

以上内容摘自:http://www.cnblogs.com/nuysoft/

作者:高云

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
网上对于select option 动态添加修改如下, $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery