亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

VueJS源碼學(xué)習(xí)——指令解析類

n7then / 1423人閱讀

摘要：原文地址項(xiàng)目地址實(shí)現(xiàn)了解析器的功能，使用狀態(tài)機(jī)正則表達(dá)式等來對(duì)表達(dá)式文本指令等進(jìn)行解析在這里引用了，實(shí)現(xiàn)了一個(gè)雙向鏈表，它會(huì)保存最近使用過的對(duì)象，在數(shù)量超出限制的情況下會(huì)拋棄最近沒有使用的對(duì)象，思想基于，參考自用于解析指令

src/parsers 
原文地址
項(xiàng)目地址

parsers 實(shí)現(xiàn)了解析器的功能，使用狀態(tài)機(jī)、正則表達(dá)式等來對(duì)表達(dá)式、html、文本、指令等進(jìn)行解析

src/parsers/directive.js

在這里引用了 cache，cache 實(shí)現(xiàn)了一個(gè)雙向鏈表，它會(huì)保存最近使用過的對(duì)象，在數(shù)量超出限制的情況下會(huì)拋棄最近沒有使用的對(duì)象，思想基于 Least Recently Used， 參考自：https://github.com/rsms/js-lru

directive 用于解析指令：

import { toNumber, stripQuotes } from "../util/index"
import Cache from "../cache"

const cache = new Cache(1000)
const filterTokenRE = /[^s""]+|"[^"]*"|"[^"]*"/g
const reservedArgRE = /^in$|^-?d+/

/**
 * Parser state
 */

var str, dir
var c, i, l, lastFilterIndex
var inSingle, inDouble, curly, square, paren

...

/**
 * Parse a directive value and extract the expression
 * and its filters into a descriptor.
 *
 * Example:
 *
 * "a + 1 | uppercase" will yield:
 * {
 *   expression: "a + 1",
 *   filters: [
 *     { name: "uppercase", args: null }
 *   ]
 * }
 *
 * @param {String} str
 * @return {Object}
 */

export function parseDirective (s) {

  var hit = cache.get(s)
  if (hit) {
    return hit
  }

  // reset parser state
  str = s
  inSingle = inDouble = false
  curly = square = paren = 0
  lastFilterIndex = 0
  dir = {}

  for (i = 0, l = str.length; i < l; i++) {
    c = str.charCodeAt(i)
    if (inSingle) {
      // check single quote
      if (c === 0x27) inSingle = !inSingle
    } else if (inDouble) {
      // check double quote
      if (c === 0x22) inDouble = !inDouble
    } else if (
      c === 0x7C && // pipe
      str.charCodeAt(i + 1) !== 0x7C &&
      str.charCodeAt(i - 1) !== 0x7C
    ) {
      if (dir.expression == null) {
        // first filter, end of expression
        lastFilterIndex = i + 1
        dir.expression = str.slice(0, i).trim()
      } else {
        // already has filter
        pushFilter()
      }
    } else {
      switch (c) {
        case 0x22: inDouble = true; break // "
        case 0x27: inSingle = true; break // "
        case 0x28: paren++; break         // (
        case 0x29: paren--; break         // )
        case 0x5B: square++; break        // [
        case 0x5D: square--; break        // ]
        case 0x7B: curly++; break         // {
        case 0x7D: curly--; break         // }
      }
    }
  }

  if (dir.expression == null) {
    dir.expression = str.slice(0, i).trim()
  } else if (lastFilterIndex !== 0) {
    pushFilter()
  }

  cache.put(s, dir)
  return dir
}

由于指令可能同時(shí)包含表達(dá)式和過濾器，如果兩者同時(shí)存在會(huì)以 | 符號(hào)分隔開
循環(huán)遍歷字符找出對(duì)應(yīng)的表達(dá)式和過濾器

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88353.html

相關(guān)文章

  • VueJS源碼學(xué)習(xí)——項(xiàng)目結(jié)構(gòu)&目錄

    摘要：所以整個(gè)的核心，就是如何實(shí)現(xiàn)這三樣?xùn)|西以上摘自囧克斯博客的一篇文章從版本開始這個(gè)時(shí)候的項(xiàng)目結(jié)構(gòu)如下源碼在里面，為打包編譯的代碼，為打包后代碼放置的位置，為測試代碼目錄。節(jié)點(diǎn)類型摘自資源另一位作者關(guān)于源碼解析 本項(xiàng)目的源碼學(xué)習(xí)筆記是基于 Vue 1.0.9 版本的也就是最早的 tag 版本，之所以選擇這個(gè)版本，是因?yàn)檫@個(gè)是最原始沒有太多功能拓展的版本，有利于更好的看到 Vue 最開始的骨...

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

  • Vuejs中的那些隱藏屬性

    摘要：中的每個(gè)對(duì)象會(huì)一份實(shí)際的對(duì)象的數(shù)據(jù)放在外面，改變這些數(shù)據(jù)并不會(huì)反應(yīng)到實(shí)際的對(duì)象上，如果我們希望真的改變對(duì)象的數(shù)據(jù)，有一個(gè)隱藏屬性可以做到就是例子很多情況下你寫了一個(gè)指令很可能會(huì)依賴或者需要解析另外一個(gè)指令，比如，然而中的指令并沒有這方面的 __vue__ $els中的每個(gè)對(duì)象會(huì)copy一份實(shí)際的Vue對(duì)象(vm)的數(shù)據(jù)放在外面，改變這些數(shù)據(jù)并不會(huì)反應(yīng)到實(shí)際的Vue對(duì)象上，如果我們希望真...

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

  • VueJS源碼學(xué)習(xí)——訂閱觀察者類

    摘要：實(shí)現(xiàn)了一個(gè)簡單的訂閱觀察者類，這個(gè)類被用于在數(shù)據(jù)修改時(shí)通知各個(gè)以觸發(fā)對(duì)應(yīng)的更新，從而實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)，這個(gè)會(huì)在后續(xù)的數(shù)據(jù)響應(yīng)化里提到。 observer 實(shí)現(xiàn)了一個(gè)簡單的訂閱觀察者類，這個(gè)類被用于在數(shù)據(jù)修改時(shí)通知各個(gè) watcher 以觸發(fā)對(duì)應(yīng)的更新，從而實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)，這個(gè)會(huì)在后續(xù)的數(shù)據(jù)響應(yīng)化里提到。 原文地址項(xiàng)目地址 src/observer src/observer/dep.js ...

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

  • Vue 1.0.28 源碼解析

    摘要：整體概覽源碼最終是向外部拋出一個(gè)的構(gòu)造函數(shù)，見源碼在源碼最開始，通過方法見源碼向構(gòu)造函數(shù)添加全局方法，如等，主要初始化一些全局使用的方法變量和配置實(shí)例化當(dāng)使用時(shí)，最基本使用方式如下此時(shí)，會(huì)調(diào)用構(gòu)造函數(shù)實(shí)例化一個(gè)對(duì)象，而在構(gòu)造函數(shù)中只有這句代 整體概覽 Vue源碼最終是向外部拋出一個(gè)Vue的構(gòu)造函數(shù)，見源碼： function Vue (options) { this._init(o...

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

  • 學(xué)習(xí)Vue.js-Day1

    摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實(shí)戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實(shí)現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實(shí)現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實(shí)戰(zhàn)操作 參考文獻(xiàn)：官網(wǎng)： https://cn.vuejs.org...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<