Heim > Web-Frontend > View.js > Hauptteil

Lassen Sie uns über die 38 Toolfunktionen unter dem gemeinsam genutzten Vue3-Modul sprechen (Lesen des Quellcodes).

青灯夜游
Freigeben: 2022-12-12 20:21:24
nach vorne
2842 Leute haben es durchsucht

Lassen Sie uns über die 38 Toolfunktionen unter dem gemeinsam genutzten Vue3-Modul sprechen (Lesen des Quellcodes).

Im Vergleich zu den Tool-Funktionen von Vue2 haben sich die Tool-Funktionen von Vue3 stark verändert. Ich persönlich habe das Gefühl, dass sich dies hauptsächlich in der Syntax widerspiegelt habe es6 voll und ganz angenommen; [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]Vue3的工具函数对比于Vue2的工具函数变化还是很大的,个人感觉主要还是体现在语法上,已经全面拥抱es6了;【相关推荐:vuejs视频教程web前端开发

对比于工具类的功能变化并没有多少,大多数基本上都是一样的,只是语法上和实现上有略微的区别;

源码地址:

之前介绍了很多阅读方式,这次就直接跳过了,直接开始阅读源码;

所有工具函数

  • makeMap: 生成一个类似于Set的对象,用于判断是否存在某个值
  • EMPTY_OBJ: 空对象
  • EMPTY_ARR: 空数组
  • NOOP: 空函数
  • NO: 返回false的函数
  • isOn: 判断是否是on开头的事件
  • isModelListener: 判断onUpdate开头的字符串
  • extend: 合并对象
  • remove: 移除数组中的某个值
  • hasOwn: 判断对象是否有某个属性
  • isArray: 判断是否是数组
  • isMap: 判断是否是Map
  • isSet: 判断是否是Set
  • isDate: 判断是否是Date
  • isRegExp: 判断是否是RegExp
  • isFunction: 判断是否是函数
  • isString: 判断是否是字符串
  • isSymbol: 判断是否是Symbol
  • isObject: 判断是否是对象
  • isPromise: 判断是否是Promise
  • objectToString: Object.prototype.toString
  • toTypeString: Object.prototype.toString的简写
  • toRawType: 获取对象的类型
  • isPlainObject: 判断是否是普通对象
  • isIntegerKey: 判断是否是整数key
  • isReservedProp: 判断是否是保留属性
  • isBuiltInDirective: 判断是否是内置指令
  • camelize: 将字符串转换为驼峰
  • hyphenate: 将字符串转换为连字符
  • capitalize: 将字符串首字母大写
  • toHandlerKey: 将字符串转换为事件处理的key
  • hasChanged: 判断两个值是否相等
  • invokeArrayFns: 调用数组中的函数
  • def: 定义对象的属性
  • looseToNumber: 将字符串转换为数字
  • toNumber: 将字符串转换为数字
  • getGlobalThis: 获取全局对象
  • genPropsAccessExp: 生成props的访问表达式

这其中有大部分和Vue2的工具函数是一样的,还有数据类型的判断,使用的是同一种方式,因为有了之前Vue2的阅读经验,所以这次快速阅读;

如果想要详细的可以看我之前写的文章:【源码共读】Vue2源码 shared 模块中的36个实用工具函数分析;

而且这次是直接源码,ts版本的,不再处理成js,所以直接阅读ts源码;

正式开始

makeMap

export function makeMap(
  str: string,
  expectsLowerCase?: boolean
): (key: string) => boolean {
  const map: Record<string, boolean> = Object.create(null)
  const list: Array<string> = str.split(&#39;,&#39;)
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
}
Nach dem Login kopieren

makeMap的源码在同级目录下的makeMap.ts文件中,引入进来之后直接使用export关键字导出,实现方式和Vue2

Im Vergleich zu den Funktionsänderungen von Werkzeugklassen gibt es nicht viele, die meisten sind im Grunde gleich, aber es gibt leichte Unterschiede in Syntax und Implementierung 🎜🎜Quellcode-Adresse: 🎜🎜Ich habe schon viele Lesemethoden eingeführt, aber dieses Mal habe ich sie übersprungen und direkt mit dem Lesen des Quellcodes begonnen 🎜

Alle Werkzeuge Funktion

  • makeMap: Erzeugt ein Objekt ähnlich Set, um zu bestimmen, ob ein bestimmter Wert existiert
  • EMPTY_OBJ: Leeres Objekt
  • EMPTY_ARR: Leeres Array
  • NOOP: Leere Funktion
  • NO: Funktion, die false
  • isOn zurückgibt : Bestimmt, ob es sich um Ereignisse handelt, die mit on
  • isModelListener beginnen: Bestimmen Sie die Zeichenfolge, die mit onUpdate
  • < beginnt li>extend</li> code>: Objekte zusammenführen</li><li><code>remove: Einen bestimmten Wert im Array entfernen
  • hasOwn< /code>: Bestimmt, ob das Objekt bestimmte Wertattribute hat</li><li><code>isArray: Bestimmt, ob es ein Array ist
  • isMap : Bestimmt, ob es sich um eine Map< /li>
  • isSet handelt: Bestimmt, ob es sich um ein Set
  • < handelt code>isDate: Bestimmen Sie, ob es Date</ ist. /code></li><li><code>isRegExp: Bestimmen Sie, ob es RegExp
  • isFunction: Ermittelt, ob es sich um eine Funktion handelt
  • isString: Ermittelt, ob es sich um einen String handelt
  • < code>isSymbol: Bestimmen Sie, ob es sich um Symbol
  • isObject handelt: Bestimmen Sie, ob es ein Objekt ist
  • < code>isPromise: Bestimmen Sie, ob es sich um ein Promise
  • < li>objectToString: Object.prototype.toString< handelt /li>
  • toTypeString: Object.prototype.toString</code >Abkürzung</li><li><code>toRawType: Holen Sie sich den Typ des Objekts< /li>
  • isPlainObject: Bestimmt, ob es sich um ein normales Objekt handelt
  • isIntegerKey: Bestimmt, ob es ein ganzzahliger key</ ist code></li><li><code>isReservedProp: Bestimmt, ob es sich um eine reservierte Eigenschaft handelt
  • isBuiltInDirective: Bestimmt, ob es sich um eine integrierte Anweisung handelt
  • camelize: Wandeln Sie die Zeichenfolge in Kamel-Schreibweise um
  • hyphenate</code >: Wandeln Sie die Zeichenfolge in Bindestriche um</li><li> <code>capitalize: Den ersten Buchstaben der Zeichenfolge groß schreiben
  • toHandlerKey: Die Zeichenfolge in konvertieren. In Ereignisverarbeitungs-key
  • hasChanged: Bestimmen Sie, ob zwei Werte gleich sind
  • invokeArrayFns: Rufen Sie die Funktion im Array auf
  • def: Definieren Sie die Eigenschaften des Objekts
  • looseToNumber: Wandeln Sie einen String in eine Zahl um
  • li>< li>toNumber: Konvertieren Sie einen String in eine Zahl
  • getGlobalThis: Holen Sie sich das globale Objekt
  • genPropsAccessExp </ code>: Generieren Sie Zugriffsausdrücke für <code>props
🎜Die meisten davon sind mit den Werkzeugfunktionen von Vue2 identisch, und es gibt dieselbe Methode wird verwendet, um den Datentyp zu bestimmen. Diesmal habe ich es schnell gelesen. 🎜🎜Wenn Sie weitere Details wünschen, können Sie den Artikel lesen, den ich zuvor geschrieben habe: < a href="https://www.php.cn/link/af4d96ada35c008ae94d257c86efb215" target="_blank" title="https://www.php.cn/link/af4d96ada35c008ae94d257c86efb215">[Quellcode geteilt lesen] Vue2-Quellcode geteilt Modul 36 Utility-Funktionsanalyse
;🎜🎜Und dieses Mal ist es der direkte Quellcode, die ts-Version, der nicht mehr in js verarbeitet wird, also lesen Sie ihn direkt< ​​code>tsQuellcode; 🎜

Offizieller Start

Der Quellcode von makeMap

export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
Nach dem Login kopieren
Nach dem Login kopieren
🎜makeMap befindet sich in der Datei makeMap.ts im selben Verzeichnis. Verwenden Sie ihn nach dem Import export< direkt. Die Implementierungsmethode ist die gleiche wie bei <code>Vue2

EMPTY_OBJ & EMPTY_ARR

export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
Nach dem Login kopieren
Nach dem Login kopieren

EMPTY_OBJEMPTY_ARR的实现方式和Vue2emptyObject相同,都是使用Object.freeze冻结对象,防止对象被修改;

NOOP

export const NOOP = () => {}
Nach dem Login kopieren

Vue2noop实现方式相同,都是一个空函数,移除了入参;

NO

/**
 * Always return false.
 */
export const NO = () => false
Nach dem Login kopieren

Vue2no实现方式相同,都是一个返回false的函数,移除了入参;

isOn

const onRE = /^on[^a-z]/
export const isOn = (key: string) => onRE.test(key)
Nach dem Login kopieren

判断是否是on开头的事件,并且on后面的第一个字符不是小写字母;

isModelListener

export const isModelListener = (key: string) => key.startsWith(&#39;onUpdate:&#39;)
Nach dem Login kopieren

判断是否是onUpdate:开头的字符串;

参考:startWith

extend

export const extend = Object.assign
Nach dem Login kopieren

直接拥抱es6Object.assignVue2的实现方式是使用for in循环;

remove

export const remove = <T>(arr: T[], el: T) => {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)
  }
}
Nach dem Login kopieren

对比于Vue2删除了一些代码,之前的快速删除最后一个元素的判断不见了;

猜测可能是因为有bug,因为大家都知道Vue2的数组响应式必须使用Arrayapi,那样操作可能会导致数组响应式失效;

hasOwn

const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
Nach dem Login kopieren

使用的是Object.prototype.hasOwnProperty,和Vue2相同;

isArray

export const isArray = Array.isArray
Nach dem Login kopieren

使用的是Array.isArray,和Vue2相同;

isMap & isSet & isDate & isRegExp

export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === &#39;[object Map]&#39;
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === &#39;[object Set]&#39;

export const isDate = (val: unknown): val is Date =>
  toTypeString(val) === &#39;[object Date]&#39;
export const isRegExp = (val: unknown): val is RegExp =>
  toTypeString(val) === &#39;[object RegExp]&#39;
Nach dem Login kopieren

都是使用Object.toString来判断类型,对比于Vue2新增了isMapisSetisDate,实现方式没变;

isFunction & isString & isSymbol & isObject

export const isFunction = (val: unknown): val is Function =>
  typeof val === &#39;function&#39;
export const isString = (val: unknown): val is string => typeof val === &#39;string&#39;
export const isSymbol = (val: unknown): val is symbol => typeof val === &#39;symbol&#39;
export const isObject = (val: unknown): val is Record<any, any> =>
  val !== null && typeof val === &#39;object&#39;
Nach dem Login kopieren

Vue2的实现方式相同,都是使用typeof来判断类型,新增了isSymbol

isPromise

export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
Nach dem Login kopieren

Vue2对比修改了实现方式,但是判断逻辑没变;

objectToString

export const objectToString = Object.prototype.toString
Nach dem Login kopieren

直接是Object.prototype.toString

toTypeString

export const toTypeString = (value: unknown): string =>
  objectToString.call(value)
Nach dem Login kopieren

对入参执行Object.prototype.toString

toRawType

export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
}
Nach dem Login kopieren

Vue2的实现方式相同;

isPlainObject

export const isPlainObject = (val: unknown): val is object =>
  toTypeString(val) === &#39;[object Object]&#39;
Nach dem Login kopieren

Vue2的实现方式相同;

isIntegerKey

export const isIntegerKey = (key: unknown) =>
  isString(key) &&
  key !== &#39;NaN&#39; &&
  key[0] !== &#39;-&#39; &&
  &#39;&#39; + parseInt(key, 10) === key
Nach dem Login kopieren

判断一个字符串是不是由一个整数组成的;

isReservedProp

export const isReservedProp = /*#__PURE__*/ makeMap(
  // the leading comma is intentional so empty string "" is also included
  &#39;,key,ref,ref_for,ref_key,&#39; +
    &#39;onVnodeBeforeMount,onVnodeMounted,&#39; +
    &#39;onVnodeBeforeUpdate,onVnodeUpdated,&#39; +
    &#39;onVnodeBeforeUnmount,onVnodeUnmounted&#39;
)
Nach dem Login kopieren

使用makeMap生成一个对象,用于判断入参是否是内部保留的属性;

isBuiltInDirective

export const isBuiltInDirective = /*#__PURE__*/ makeMap(
  &#39;bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo&#39;
)
Nach dem Login kopieren

使用makeMap生成一个对象,用于判断入参是否是内置的指令;

cacheStringFunction

const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
  const cache: Record<string, string> = Object.create(null)
  return ((str: string) => {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }) as T
}
Nach dem Login kopieren

Vue2cached相同,用于缓存字符串;

camelize

const camelizeRE = /-(\w)/g
/**
 * @private
 */
export const camelize = cacheStringFunction((str: string): string => {
  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : &#39;&#39;))
})
Nach dem Login kopieren

-连接的字符串转换为驼峰式,同Vue2camelize相同;

capitalize

const hyphenateRE = /\B([A-Z])/g
/**
 * @private
 */
export const hyphenate = cacheStringFunction((str: string) =>
  str.replace(hyphenateRE, &#39;-$1&#39;).toLowerCase()
)
Nach dem Login kopieren

将驼峰式字符串转换为-连接的字符串,同Vue2hyphenate相同;

capitalize

/**
 * @private
 */
export const capitalize = cacheStringFunction(
  (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
)
Nach dem Login kopieren

将字符串首字母大写,同Vue2capitalize相同;

toHandlerKey

/**
 * @private
 */
export const toHandlerKey = cacheStringFunction((str: string) =>
  str ? `on${capitalize(str)}` : ``
)
Nach dem Login kopieren

将字符串首字母大写并在前面加上on

hasChanged

// compare whether a value has changed, accounting for NaN.
export const hasChanged = (value: any, oldValue: any): boolean =>
  !Object.is(value, oldValue)
Nach dem Login kopieren

Vue2相比,移除了polyfill,直接使用Object.is

invokeArrayFns

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}
Nach dem Login kopieren

批量调用传递过来的函数列表,如果有参数,会将参数传递给每个函数;

def

export const def = (obj: object, key: string | symbol, value: any) => {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}
Nach dem Login kopieren

使用Object.defineProperty定义一个属性,并使这个属性不可枚举;

looseToNumber

/**
 * "123-foo" will be parsed to 123
 * This is used for the .number modifier in v-model
 */
export const looseToNumber = (val: any): any => {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}
Nach dem Login kopieren

将字符串转换为数字,如果转换失败,返回原字符串;

通过注释知道主要用于v-model.number修饰符;

toNumber

/**
 * Only conerces number-like strings
 * "123-foo" will be returned as-is
 */
export const toNumber = (val: any): any => {
  const n = isString(val) ? Number(val) : NaN
  return isNaN(n) ? val : n
}
Nach dem Login kopieren

将字符串转换为数字,如果转换失败,返回原数据;

getGlobalThis

let _globalThis: any
export const getGlobalThis = (): any => {
  return (
    _globalThis ||
    (_globalThis =
      typeof globalThis !== &#39;undefined&#39;
        ? globalThis
        : typeof self !== &#39;undefined&#39;
        ? self
        : typeof window !== &#39;undefined&#39;
        ? window
        : typeof global !== &#39;undefined&#39;
        ? global
        : {})
  )
}
Nach dem Login kopieren

获取全局对象,根据环境不同返回的对象也不同;

genPropsAccessExp

const identRE = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/

export function genPropsAccessExp(name: string) {
  return identRE.test(name)
    ? `__props.${name}`
    : `__props[${JSON.stringify(name)}]`
}
Nach dem Login kopieren

生成props的访问表达式,如果name是合法的标识符,直接返回__props.name,否则返回通过JSON.stringify转换后的__props[name]

总结

通过这次的源码阅读,我们巩固了一些基础知识,通过对比Vue2的工具函数,我们也了解了Vue3的一些变化;

这些变化个人感觉主要集中在拥抱es6,可以看到放弃ie是多么自由而奔放;

话外题,不知道大家有没有发现MDN上面的浏览器兼容性表格,已经没有了ie的相关信息。

(学习视频分享:vuejs入门教程编程基础视频

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die 38 Toolfunktionen unter dem gemeinsam genutzten Vue3-Modul sprechen (Lesen des Quellcodes).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage