zepto.js 源码剖析

正则

首先看一下其中的正则表达:

fragmentRE = /^\s*<(\w+|!)[^>]*>/,
singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
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+|!)[^>]*>/

1. ^ 从句首开始匹配
2. \s 是一个metacharacter，匹配一个空白字符，包括space, tab, carriage return。 后面跟着*，表示能够匹配0个或0个以上空白字符
3. < 匹配一个 <
4. (\w+|!), \w是一个metacharacter， 匹配0-9a-zA-Z_, 注意其中包括下划线. \w+表示匹配一个或者一个以上该字符. |表示或者. !匹配!. 括号的做用是用于捕获(capture), 在匹配文本时，能够输出相对应的字符(characters).
5. [^>] ^在句首表示从开始匹配, 在[]这个class中表示 非 的意思, 并且[]只能表示一个字符。 因此这个表达式的意思是 匹配一个不是>的字符.后面跟着*，表示匹配0个或者0个以上不是>的字符
6. > 匹配一个 >.

singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/

1. ^ 匹配句首
2. < 匹配 <
3. (\w+) 匹配一个或者多个0-9a-zA-Z_的字符, 而且catpure.
4. \s* 匹配0个或0个以上空白字符
5. \/? 匹配0个或1个/, 其中\为escape
6. > 匹配 >
7. (?:<\/\1|), ?:表示不capture, 我用这个括号就是想为了把他圈起来. 后面的\1是一块的，表示把第一个捕获的内容插入到这来，在这个例子中也就是\w+ 因此，它彻底能够写成 (?:>\/\w+|). | 表示或者，它后面什么都没有，那么这个表达式的意思就是要么匹配\/\w+ 要么啥也不用匹配.
8. $ 匹配句尾，若是要匹配的文本超出了前面能够匹配的长度，那这个文本总体就不匹配该表达式

因此这个表达式能够匹配<br>, <br />, <h3></h3>. 最后一种状况只捕获<h3>

tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,

1. (?!exp) 零宽度负预测先行断言(zero-width negative lookahead assertion)， 匹配后面跟的不是exp的位置. 好比\d{3}(?!\d) 匹配三位数字，并且这三位数字后面不能是数字.
   同理这个表达式匹配<, 可是 <后面不能跟area, br 等等.
2. (([\w:]+)[^>]*) 做为一个总体来看是一个caputring group. 而后里面有一个小的capturing group 2, 能够匹配\w 或者: 而且能够重复1到无限次. 后面能够跟着不是>的任意次字符
3. \/> 匹配/>

因此这个表达式能够匹配<abc:sfsf/> 之类的文本，可是不能匹配<img/>

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.

Reference

zepto源码注解
相似的框架还有sizzle.js