資訊專欄INFORMATION COLUMN
摘要：正則首先看一下其中的正則表達的正則表達式要包含在中間。后面可以跟來表示是否進行全局匹配或者不區分大小寫匹配。從句首開始匹配是一個，匹配一個空白字符，包括。
正則
首先看一下其中的正則表達:
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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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庫結構有一個整體的了解?？吹臅r間比較短，以下如果有不正確的地方，歡迎指出。...
摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。 前言 前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了?；馃岬谋澈笸彩菬o盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...
摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。 前言 前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了。火熱的背后往往也是無盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...
閱讀 3925·2021-10-12 10:12
閱讀 2886·2021-09-10 11:18
閱讀 3673·2019-08-30 15:54
閱讀 2808·2019-08-30 15:53
閱讀 638·2019-08-30 13:54
閱讀 965·2019-08-30 13:21
閱讀 2260·2019-08-30 12:57
閱讀 1687·2019-08-30 11:10
