成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

zepto.js 源碼剖析

winterdawn / 2430人閱讀

摘要：正則首先看一下其中的正則表達(dá)的正則表達(dá)式要包含在中間。后面可以跟來(lái)表示是否進(jìn)行全局匹配或者不區(qū)分大小寫匹配。從句首開(kāi)始匹配是一個(gè)，匹配一個(gè)空白字符，包括。

正則

首先看一下其中的正則表達(dá):

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的正則表達(dá)式要包含在/ /中間。后面可以跟g,i 來(lái)表示是否進(jìn)行全局匹配或者不區(qū)分大小寫匹配。

fragmentRE = /^s*<(w+|!)[^>]*>/

^ 從句首開(kāi)始匹配

s 是一個(gè)metacharacter，匹配一個(gè)空白字符，包括space, tab, carriage return。 后面跟著*，表示可以匹配0個(gè)或0個(gè)以上空白字符

< 匹配一個(gè) <

(w+|!), w是一個(gè)metacharacter， 匹配0-9a-zA-Z_, 注意其中包括下劃線. w+表示匹配一個(gè)或者一個(gè)以上該字符. |表示或者. !匹配!. 括號(hào)的作用是用于捕獲(capture), 在匹配文本時(shí)，可以輸出相對(duì)應(yīng)的字符(characters).

[^>] ^在句首表示從開(kāi)始匹配, 在[]這個(gè)class中表示 非 的意思, 而且[]只能表示一個(gè)字符。 所以這個(gè)表達(dá)式的意思是 匹配一個(gè)不是>的字符.后面跟著*，表示匹配0個(gè)或者0個(gè)以上不是>的字符

> 匹配一個(gè) >.

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

^ 匹配句首

< 匹配 <

(w+) 匹配一個(gè)或者多個(gè)0-9a-zA-Z_的字符, 并且catpure.

s* 匹配0個(gè)或0個(gè)以上空白字符

/? 匹配0個(gè)或1個(gè)/, 其中為escape

> 匹配 >

(?:, ?:表示不capture, 我用這個(gè)括號(hào)就是想為了把他圈起來(lái). 后面的1是一塊的，表示把第一個(gè)捕獲的內(nèi)容插入到這來(lái)，在這個(gè)例子中也就是w+ 所以，它完全可以寫成 (?:>/w+|). | 表示或者，它后面什么都沒(méi)有，那么這個(gè)表達(dá)式的意思就是要么匹配/w+ 要么啥也不用匹配.

$ 匹配句尾，如果要匹配的文本超出了前面可以匹配的長(zhǎng)度，那這個(gè)文本整體就不匹配該表達(dá)式

所以這個(gè)表達(dá)式可以匹配
,
,

. 最后一種情況只捕獲

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

(?!exp) 零寬度負(fù)預(yù)測(cè)先行斷言(zero-width negative lookahead assertion)， 匹配后面跟的不是exp的位置. 比如d{3}(?!d) 匹配三位數(shù)字，而且這三位數(shù)字后面不能是數(shù)字.
同理這個(gè)表達(dá)式匹配<, 但是 <后面不能跟area, br 等等.

(([w:]+)[^>]*) 作為一個(gè)整體來(lái)看是一個(gè)caputring group. 然后里面有一個(gè)小的capturing group 2, 可以匹配w 或者: 并且可以重復(fù)1到無(wú)限次. 后面可以跟著不是>的任意次字符

/> 匹配/>

所以這個(gè)表達(dá)式可以匹配 之類的文本，但是不能匹配

rootNodeRE = /^(?:body|html)$/i,

這個(gè)應(yīng)該沒(méi)什么好解釋的的了，要么匹配body，要么匹配html，不區(qū)分大小寫

capitalRE = /([A-Z])/g,

匹配大寫字母

通讀源碼

L49-L50

isArray = Array.isArray ||
      function(object){ return object instanceof Array }

用于判斷對(duì)象是否是array， MDN的推薦做法是

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
  };
}

這里面使用Object.prototype.toString() 來(lái)判斷參數(shù)的類型

總結(jié)

用toString 來(lái)detect object class. 注意isArray的polyfill.

Reference

zepto源碼注解
類似的框架還有sizzle.js

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78812.html

相關(guān)文章

  • Zepto 源碼分析 1 - 進(jìn)入 Zepto

    摘要：選擇的理由是一個(gè)用于現(xiàn)代瀏覽器的與大體兼容的庫(kù)。環(huán)境搭建分析環(huán)境的搭建僅需要一個(gè)常規(guī)頁(yè)面和原始代碼一個(gè)常規(guī)頁(yè)面打開(kāi)的首頁(yè)即可，在開(kāi)發(fā)人員工具中即可使用原始代碼本篇分析的代碼參照，進(jìn)入該代碼分支中即可。 選擇 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

    Aklman 評(píng)論0 收藏0

  • Zepto.js源碼學(xué)習(xí)之二

    摘要：本次主要分享關(guān)于上一篇區(qū)域的學(xué)習(xí)。區(qū)域?yàn)榈暮诵牟糠?，它的結(jié)構(gòu)如下為了便于梳理思路，以上代碼省略了細(xì)節(jié)，只保留了輪廓脈絡(luò)。最終暴露給開(kāi)發(fā)者的如下圖所示這里只分析了區(qū)域的結(jié)構(gòu)，下一次會(huì)深入到函數(shù)語(yǔ)句粒度。 本次主要分享關(guān)于上一篇區(qū)域2的學(xué)習(xí)。區(qū)域2為Zepto的核心部分，它的結(jié)構(gòu)如下 var Zepto = (function() { var $, zepto = {}; fu...

    kel 評(píng)論0 收藏0

  • Zepto.js源碼學(xué)習(xí)之一

    摘要：元旦假期轉(zhuǎn)眼即過(guò)，終于在最后一天想起最初那個(gè)宏偉的計(jì)劃，然后默默撿起源碼的第一行。在具體深入之前，我希望能對(duì)庫(kù)結(jié)構(gòu)有一個(gè)整體的了解。最外層為一個(gè)匿名的立即執(zhí)行函數(shù)，因?yàn)橹恍枰獔?zhí)行一次。 元旦假期轉(zhuǎn)眼即過(guò)，終于在最后一天想起最初那個(gè)宏偉的計(jì)劃，然后默默撿起Zepto源碼的第一行。在具體深入之前，我希望能對(duì)Zepto庫(kù)結(jié)構(gòu)有一個(gè)整體的了解。看的時(shí)間比較短，以下如果有不正確的地方，歡迎指出。...

    hlcc 評(píng)論0 收藏0

  • 向zepto.js學(xué)習(xí)如何手動(dòng)(trigger)觸發(fā)DOM事件

    摘要：好啦我們已經(jīng)解決了是啥的疑問(wèn)了，現(xiàn)在回去開(kāi)始一步步解讀如何實(shí)現(xiàn)手動(dòng)觸發(fā)事件。我們主要看看這里面幾乎含有如何手動(dòng)觸發(fā)一個(gè)事件的大部分步驟和內(nèi)容。 前言 前端在最近幾年實(shí)在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個(gè)雙向數(shù)據(jù)綁定，不曉得啥是虛擬DOM，也許就被鄙視了?；馃岬谋澈笸彩菬o(wú)盡的浮躁，學(xué)習(xí)這些先進(jìn)流行的類庫(kù)或者框架可以讓我們走的更快，但是靜下心...

    spacewander 評(píng)論0 收藏0

  • 向zepto.js學(xué)習(xí)如何手動(dòng)(trigger)觸發(fā)DOM事件

    摘要：好啦我們已經(jīng)解決了是啥的疑問(wèn)了，現(xiàn)在回去開(kāi)始一步步解讀如何實(shí)現(xiàn)手動(dòng)觸發(fā)事件。我們主要看看這里面幾乎含有如何手動(dòng)觸發(fā)一個(gè)事件的大部分步驟和內(nèi)容。 前言 前端在最近幾年實(shí)在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個(gè)雙向數(shù)據(jù)綁定，不曉得啥是虛擬DOM，也許就被鄙視了?；馃岬谋澈笸彩菬o(wú)盡的浮躁，學(xué)習(xí)這些先進(jìn)流行的類庫(kù)或者框架可以讓我們走的更快，但是靜下心...

    fuyi501 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<