摘要：正则首先看一下其中的正则表达的正则表达式要包含在中间。后面可以跟来表示是否进行全局匹配或者不区分大小写匹配。从句首开始匹配是一个，匹配一个空白字符，包括。
正则
首先看一下其中的正则表达:
fragmentRE = /^s*<(w+|!)[^>]*>/, singleTagRE = /^<(w+)s*/?>(?:|)$/, tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig, rootNodeRE = /^(?:body|html)$/i, capitalRE = /([A-Z])/g,
JavaScript的正则表达式要包含在/ /中间。后面可以跟g,i 来表示是否进行全局匹配或者不区分大小写匹配。
fragmentRE = /^s*<(w+|!)[^>]*>/
^ 从句首开始匹配
s 是一个metacharacter，匹配一个空白字符，包括space, tab, carriage return。 后面跟着*，表示可以匹配0个或0个以上空白字符
< 匹配一个 <
(w+|!), w是一个metacharacter， 匹配0-9a-zA-Z_, 注意其中包括下划线. w+表示匹配一个或者一个以上该字符. |表示或者. !匹配!. 括号的作用是用于捕获(capture), 在匹配文本时，可以输出相对应的字符(characters).
[^>] ^在句首表示从开始匹配, 在[]这个class中表示 非 的意思, 而且[]只能表示一个字符。 所以这个表达式的意思是 匹配一个不是>的字符.后面跟着*，表示匹配0个或者0个以上不是>的字符
> 匹配一个 >.
singleTagRE = /^<(w+)s*/?>(?:|)$/
^ 匹配句首
< 匹配 <
(w+) 匹配一个或者多个0-9a-zA-Z_的字符, 并且catpure.
s* 匹配0个或0个以上空白字符
/? 匹配0个或1个/, 其中为escape
> 匹配 >
(?:, ?:表示不capture, 我用这个括号就是想为了把他圈起来. 后面的1是一块的，表示把第一个捕获的内容插入到这来，在这个例子中也就是w+ 所以，它完全可以写成 (?:>/w+|). | 表示或者，它后面什么都没有，那么这个表达式的意思就是要么匹配/w+ 要么啥也不用匹配.
$ 匹配句尾，如果要匹配的文本超出了前面可以匹配的长度，那这个文本整体就不匹配该表达式
所以这个表达式可以匹配
,
, . 最后一种情况只捕获
tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([w:]+)[^>]*)/>/ig,
(?!exp) 零宽度负预测先行断言(zero-width negative lookahead assertion)， 匹配后面跟的不是exp的位置. 比如d{3}(?!d) 匹配三位数字，而且这三位数字后面不能是数字.
同理这个表达式匹配<, 但是 <后面不能跟area, br 等等.
(([w:]+)[^>]*) 作为一个整体来看是一个caputring group. 然后里面有一个小的capturing group 2, 可以匹配w 或者: 并且可以重复1到无限次. 后面可以跟着不是>的任意次字符
/> 匹配/>
所以这个表达式可以匹配
rootNodeRE = /^(?:body|html)$/i,
这个应该没什么好解释的的了，要么匹配body，要么匹配html，不区分大小写
capitalRE = /([A-Z])/g,
匹配大写字母
通读源码L49-L50
isArray = Array.isArray ||
function(object){ return object instanceof Array }
用于判断对象是否是array， MDN的推荐做法是
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === "[object Array]";
};
}
这里面使用Object.prototype.toString() 来判断参数的类型
总结用toString 来detect object class. 注意isArray的polyfill.
Referencezepto源码注解
类似的框架还有sizzle.js
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78812.html
摘要：选择的理由是一个用于现代浏览器的与大体兼容的库。环境搭建分析环境的搭建仅需要一个常规页面和原始代码一个常规页面打开的首页即可，在开发人员工具中即可使用原始代码本篇分析的代码参照，进入该代码分支中即可。 选择 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...
摘要：本次主要分享关于上一篇区域的学习。区域为的核心部分，它的结构如下为了便于梳理思路，以上代码省略了细节，只保留了轮廓脉络。最终暴露给开发者的如下图所示这里只分析了区域的结构，下一次会深入到函数语句粒度。 本次主要分享关于上一篇区域2的学习。区域2为Zepto的核心部分，它的结构如下 var Zepto = (function() { var $, zepto = {}; fu...
摘要：元旦假期转眼即过，终于在最后一天想起最初那个宏伟的计划，然后默默捡起源码的第一行。在具体深入之前，我希望能对库结构有一个整体的了解。最外层为一个匿名的立即执行函数，因为只需要执行一次。 元旦假期转眼即过，终于在最后一天想起最初那个宏伟的计划，然后默默捡起Zepto源码的第一行。在具体深入之前，我希望能对Zepto库结构有一个整体的了解。看的时间比较短，以下如果有不正确的地方，欢迎指出。...
摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。 前言 前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...
摘要：好啦我们已经解决了是啥的疑问了，现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。 前言 前端在最近几年实在火爆异常，vue、react、angular各路框架层出不穷，咱们要是不知道个双向数据绑定，不晓得啥是虚拟DOM，也许就被鄙视了。火热的背后往往也是无尽的浮躁，学习这些先进流行的类库或者框架可以让我们走的更快，但是静下心...
阅读 3879·2021-10-12 10:12
阅读 2847·2021-09-10 11:18
阅读 3633·2019-08-30 15:54
阅读 2729·2019-08-30 15:53
阅读 604·2019-08-30 13:54
阅读 938·2019-08-30 13:21
阅读 2225·2019-08-30 12:57
阅读 1657·2019-08-30 11:10
