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