高云的jQuery源码分析笔记
(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( 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);
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)
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、全角标点
3.2匹配双字节字符(包括汉字在内)
匹配双字节字符(包括汉字在内) [^\x00-\xff],可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1),代码示例如下:
console.info( "abc".replace( /[^\x00-\xff]/g,"aa" ).length ) //
console.info( "汉字".replace( /[^\x00-\xff]/g,"aa" ).length ) //
console.info( "abc汉字".replace( /[^\x00-\xff]/g,"aa").length ) //
3.3匹配身份证
匹配身份证 先说说网上流传的版本:
\d{15}|\d{18}
d{15}
\d{18} 可以判断,但是有些粗糙
从身份证可以解析出地址、生日、性别等,因此特别说明一下:
身份证规则
中国的身份证为15位(一代)或18位(二代),区别在于二代证只是在一代证的第七位数字前加了19和在末尾加了一位验证码
将15位升级为18位,并解析18位号码构成(地址、生日、性别)
代码如下:
function 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", "9", "10", "5", "8", "4", "2"
];
// 前17为加权除以17后的余数对应的最后一位身份证号码
var last = [
"1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"
];
// 加权和
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 ) return null; var match = rid.exec( ID );
return match ? {
ID : ID,
area : match[ 1 ],
y : match[ 2 ],
m : match[ 3 ],
d : match[ 4 ],
sex : match[ 5 ] % 2
} : null;
}
限制:
这里只是解析出了地址代码,如何将代码转换为实际地址请问度娘。
返回对象中的sex为1(男)或0(女),并未做转换,如果页面显示需要,可以这样转换:sex ? "男" : "女"
测试:
console.info( parseID( "142327840821047" ) );
console.info( parseID("142327198408210470" ) );
参考资料:
http://baike.baidu.com/view/118340.htm#1
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,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,2}|2[0-4]\d|25[0-5])$/;
rip2.exec( "192.168.1.1" ) // ["192.168.1.1", "192", "168", "1", "1"]
rip2.exec( "0.0.0.0" ) // ["0.0.0.0", "0", "0", "0", "0"]
rip2.exec( "255.255.255.255" ) // ["255.255.255.255", "255", "255", "255", "255"]
rip2.exec( "256.255.255.255" ) // null
3.5匹配腾讯QQ号
匹配腾讯QQ号 网上流传的版本很好用:
[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
3.6匹配国内电话号码
匹配国内电话号码 网上流传的版本很好用:
\d{3}-\d{8}|\d{4}-\d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
3.7匹配帐号是否合法
匹配帐号是否合法 先说说网上流传的版本:
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
(字母开头,允许5-16字节,允许字母数字下划线)
限制必须以字母开头现在看来不合适,比如QQ登录平台
限制不能以下划线开头也没有必要,比如百度就允许,因此简单点
修正如下:
var ruser = /\w{4,16}/
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, undefined, undefined, undefined, "baidu.com", undefined, "baid", undefined, undefined, "", "", undefined]
rurl.exec( 'http://baidu.com' ) //
rurl.exec( 'http://www.baidu.com' ) // ["http://baidu.com", "http://", "http", undefined, undefined, "baidu.com", undefined, "baid", undefined, undefined, "", "", undefined]
rurl.test( 'baidu' ) // true
看来不怎么也好用,有待学习TODO。
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
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, '' ) // abc
/^\s+|\s+$/.test( 'abc' ) // false
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 // 去掉了中间的.*
这个正则的应用范围仅限于简单的标签匹配、提取,不能匹配嵌套标记。
以上内容摘自:http://www.cnblogs.com/nuysoft/
作者:高云
高云的jQuery源码分析笔记的更多相关文章
- jQuery源码分析笔记
jquery-2.0.3.js版本源码分析 (function(){ (21,94) 定义了一些变量和函数 jQuery = function(){}; (96,283) 给JQ对象,添加一些方法 ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- [转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
- jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
- [转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...
- zeromq源码分析笔记之线程间收发命令(2)
在zeromq源码分析笔记之架构说到了zmq的整体架构,可以看到线程间通信包括两类,一类是用于收发命令,告知对象该调用什么方法去做什么事情,命令的结构由command_t结构体确定:另一类是socke ...
- jquery源码分析之一前言篇
1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
- jQuery源码分析系列(转载来源Aaron.)
声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...
随机推荐
- 配置Jenkins构建失败触发邮件报警机制
系统管理 1.进入系统管理-->系统设置 定位到Jenkins Location配置项 配置系统管理员邮件地址 系统管理员邮件地址需要同发送报警邮件地址相同 定位到邮件通知 配置SMTP ...
- ActiveMq 总结(一)
1. 背景 当前,CORBA.DCOM.RMI等RPC中间件技术已广泛应用于各个领域.但是面对规模和复杂度都越来越高的分布式系统,这些技术也显示出其局限性:(1)同步通信:客户发出调用后,必须等待服务 ...
- 【C#进阶】委托那些事儿(二)
二.传统的委托 接下来讲一讲方法参数.下面以“餐馆服务员为客户下单”[2]的事件作为描述.一般对事件的做法分3个部分: 1. 方法参数 EventArgs,一般用于传送数据.在本例场景中 public ...
- django drf 动态权限配置和动态seriaizer_class配置
可以通过重写get_permissions方法和get_serializers_class方法来实现动态的配置权限和序列化 VIewDemo class RegUserSet(mixins.Creat ...
- poj2506 Tiling
http://poj.org/problem?id=2506 题目大意:用多少种方法可以用2*1或2*2瓦片来铺一个2*n的矩形? 这是一个2*17长方形的样品. 输入是一行行的序列,每一行包含一个整 ...
- Java CAS ABA问题发生的场景分析
提到了CAS操作存在问题,就是在CAS之前A变成B又变回A,CAS还是能够设置成功的,什么场景下会出现这个问题呢?查了一些资料,发现在下面的两种情况下会出现ABA问题. 1.A最开始的内存地址是X,然 ...
- day 44 django 学习入门
前情提要: 终于学到了Django ...古川小姐姐好流b .....7天学完.....脑壳疼..为了出了这个小火箭.. 详细参考官网. https://www.django.cn/ 中文网站 一: ...
- maven安装以及eclipse配置maven
详细地址: http://jingyan.baidu.com/article/295430f136e8e00c7e0050b9.html 介绍安装maven,配置Maven环境变量,同时在Eclips ...
- 【bzoj3489】 A simple rmq problem k-d树
由于某些原因,我先打了一个错误的树套树,后来打起了$k-d$.接着因不明原因在思路上被卡了很久,在今天中午蹲坑时恍然大悟...... 对于一个数字$a_i$,我们可以用一组三维坐标$(i,pre,nx ...
- Anaconda 入门详解
Anaconda Anaconda简介 Anaconda是一个免费开源的Python和R语言的发行版本,用于计算科学(数据科学.机器学习.大数据处理和预测分析),Anaconda致力于简化包管理和部署 ...