vue.js 源代码学习笔记 ----- helpers.js

/* @flow */

import { parseFilters } from ‘./parser/filter-parser‘

export function baseWarn (msg: string) {
  console.error(`[Vue parser]: ${msg}`)
}

export function pluckModuleFunction (
  modules: ?Array<Object>,
  key: string
): Array<Function> {
  return modules
    ? modules.map(m => m[key]).filter(_ => _)
    : []
}

export function addProp (el: ASTElement, name: string, value: string) {
  (el.props || (el.props = [])).push({ name, value })
}

export function addAttr (el: ASTElement, name: string, value: string) {
  (el.attrs || (el.attrs = [])).push({ name, value })
}

export function addDirective (
  el: ASTElement,
  name: string,
  rawName: string,
  value: string,
  arg: ?string,
  modifiers: ?ASTModifiers
) {
  (el.directives || (el.directives = [])).push({ name, rawName, value, arg, modifiers })
}

export function addHandler (
  el: ASTElement,
  name: string,
  value: string,
  modifiers: ?ASTModifiers,
  important: ?boolean
) {
  // check capture modifier
  if (modifiers && modifiers.capture) {
    delete modifiers.capture
    name = ‘!‘ + name // mark the event as captured
  }
  let events
  if (modifiers && modifiers.native) {
    delete modifiers.native
    events = el.nativeEvents || (el.nativeEvents = {})
  } else {
    events = el.events || (el.events = {})
  }
  const newHandler = { value, modifiers }
  const handlers = events[name]
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {
    important ? handlers.unshift(newHandler) : handlers.push(newHandler)
  } else if (handlers) {
    events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
  } else {
    events[name] = newHandler
  }
}

export function getBindingAttr (
  el: ASTElement,
  name: string,
  getStatic?: boolean
): ?string {
  const dynamicValue =
    getAndRemoveAttr(el, ‘:‘ + name) ||
    getAndRemoveAttr(el, ‘v-bind:‘ + name)
  if (dynamicValue != null) {
    return parseFilters(dynamicValue)
  } else if (getStatic !== false) {
    const staticValue = getAndRemoveAttr(el, name)
    if (staticValue != null) {
      return JSON.stringify(staticValue)
    }
  }
}

export function getAndRemoveAttr (el: ASTElement, name: string): ?string {
  let val
  if ((val = el.attrsMap[name]) != null) {
    const list = el.attrsList
    for (let i = 0, l = list.length; i < l; i++) {
      if (list[i].name === name) {
        list.splice(i, 1)
        break
      }
    }
  }
  return val
}

let len, str, chr, index, expressionPos, expressionEndPos

/**
 * parse directive model to do the array update transform. a[idx] = val => $$a.splice($$idx, 1, val)
 *
 * for loop possible cases:
 *
 * - test
 * - test[idx]
 * - test[test1[idx]]
 * - test["a"][idx]
 * - xxx.test[a[a].test1[idx]]
 * - test.xxx.a["asa"][test1[idx]]
 *
 */

export function parseModel (val: string): Object {
  str = val
  len = str.length
  index = expressionPos = expressionEndPos = 0

  if (val.indexOf(‘[‘) < 0 || val.lastIndexOf(‘]‘) < len - 1) {
    return {
      exp: val,
      idx: null
    }
  }

  while (!eof()) {
    chr = next()
    /* istanbul ignore if */
    if (isStringStart(chr)) {
      parseString(chr)
    } else if (chr === 0x5B) {
      parseBracket(chr)
    }
  }

  return {
    exp: val.substring(0, expressionPos),
    idx: val.substring(expressionPos + 1, expressionEndPos)
  }
}

function next (): number {
  return str.charCodeAt(++index)
}

function eof (): boolean {
  return index >= len
}

function isStringStart (chr: number): boolean {
  return chr === 0x22 || chr === 0x27
}

function parseBracket (chr: number): void {
  let inBracket = 1
  expressionPos = index
  while (!eof()) {
    chr = next()
    if (isStringStart(chr)) {
      parseString(chr)
      continue
    }
    if (chr === 0x5B) inBracket++
    if (chr === 0x5D) inBracket--
    if (inBracket === 0) {
      expressionEndPos = index
      break
    }
  }
}

function parseString (chr: number): void {
  const stringQuote = chr
  while (!eof()) {
    chr = next()
    if (chr === stringQuote) {
      break
    }
  }
}
时间: 2024-08-28 13:39:32

vue.js 源代码学习笔记 ----- helpers.js的相关文章

vue.js 源代码学习笔记 ----- fillter-parse.js

/* @flow */ export function parseFilters (exp: string): string { let inSingle = false let inDouble = false let inTemplateString = false let inRegex = false let curly = 0 let square = 0 let paren = 0 let lastFilterIndex = 0 let c, prev, i, expression,

vue.js 源代码学习笔记 ----- codegenEvents.js

/* @flow */ const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/ const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/ // keyCode aliases const keyCodes = { esc: 27, tab:

vue.js 源代码学习笔记 ----- keep-alives

/* @flow */ import { callHook } from 'core/instance/lifecycle' import { getFirstComponentChild } from 'core/vdom/helpers/index' const patternTypes = [String, RegExp] function matches (pattern: string | RegExp, name: string): boolean { if (typeof patt

vue.js 源代码学习笔记 ----- core lifecycle

/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, measure } from '../util/perf' import { createEmptyVNode } from '../vdom/vnode' import { observerState } from '../observer/index' import { updateCompon

vue.js 源代码学习笔记 ----- decoder

/* @flow */ let decoder export function decode (html: string): string { decoder = decoder || document.createElement('div') decoder.innerHTML = html return decoder.textContent }

vue.js 源代码学习笔记 ----- Dep

/* @flow */ import type Watcher from './watcher' import { remove } from '../util/index' let uid = 0 /** * A dep is an observable that can have multiple * directives subscribing to it. */ export default class Dep { static target: ?Watcher; id: number;

分享:json2.js源代码解读笔记

1. 怎样理解"json" 首先应该意识到,json是一种数据转换格式,既然是个"格式",就是个抽象的东西.它不是js对象,也不是字符串,它仅仅是一种格式,一种规定而已. 这个格式规定了如何将js对象转换成字符串.以及转换成如何的字符串--序列化 -- JSON.stringify 接口: 以及怎样将一个有效字符串转换成js对象--反序列化-- JSON.parse 接口: 2. 关于作者 json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本<jav

【JS学习笔记】js中关于传地址的问题

我觉得初学者应该会遇到很多这样的问题 条件1.不想定义全局变量的时候 条件2.定义了外围变量却又要引用并且修改其中内容的时候 以下转一篇文章 -------------------------------------------------------------------------------------------------------------------------------------------------------- 很多人,包括我,受书本知识消化不彻底的影响,认为 J

js基础学习笔记(二)

2.1  输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出""号内的内容. <script type="text/javascript"> document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出.