В этой статье мы не собираемся анализировать принцип работы исходного кода Vue, а просто исследуем эти достойные операции в инструментальных функциях Vue.
Конечная цель: увеличить очки знаний из функций полезности
1. Ряд суждений о текущем окружении
1.1inBrowser: проверьте, является ли текущая среда хостинга браузером.
export const isIE9 = UA && UA.indexOf('msie 9.0') > 0
export const isEdge = UA && UA.indexOf('edge/') > 0
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
3.1 isReserved
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
export function isReserved (str: string): boolean {
const c = (str + '').charCodeAt(0)
return c === 0x24 || c === 0x5F
}
unicode0x24а также0x5Fв сравнении с.
Как фронтенд, который хочет перейти на средний и продвинутый уровень,charCodeAtРазличные волшебные применения метода все еще должны быть известны (все виды вопросов алгоритма интервью).
3.1.2 JavascriptПромежуточный алгоритмcharCodeAt
Найдите пропущенную букву из переданной последовательности букв и верните ее.
Например: FearNotLetter("abce") должен возвращать "d".
Разобрать:Определите регулярное выражение:/-(\w)/g, который используется для глобального сопоставления дефиса и символа после дефиса в строке. В случае захвата персонаж начнет сtoUpperCaseзамена в верхнем регистре, в противном случае с''заменять.
Такие как:camelize('aa-bb') // aaBb
3.3 toString: преобразовать значение данной переменной в строку типа и вернуть
export function toString (val: any): string {
return val == null
? ''
: typeof val === 'object'
? JSON.stringify(val, null, 2)
: String(val)
}
Разобрать:существуетVueВ нем много таких расширенных оберток, которые сильно уменьшают сложность нашего кода. Но здесь мы хотим узнать следующее.多重三元运算符Применение
3.3.1 Множественные тернарные операторы
export function toString (val: any): string {
return val == null
? ''
: typeof val === 'object'
? JSON.stringify(val, null, 2)
: String(val)
}
Здесь нам все равноmergeHookВ исходном коде это делается (по сути, заключается в том, чтобы определить, соответствует ли компонент имени отца и жизненному циклу функции хука, затем путемconcatсливаться
Разобрать:а такжеcamelizeНапротив. Метод реализации также заключается в использовании обычных,/\B([A-Z])/gИспользуется для сопоставления заглавных букв в строке с последующей заменой.
4. Тип суждения
4.1 isPrimitive: определить, является ли переменная типом прототипа.
export function isPrimitive (value: any): boolean %checks {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
Разобрать:Это очень просто, но мы часто игнорируемsymbolЭтот тип (хотя и совершенно неиспользуемый).
4.2 isRegExp: определяет, является ли переменная обычным объектом.
Это также самый точный метод оценки типа, вVueТо же самое верно для других видов
4.3 isValidArrayIndex: определить, содержит ли переменная допустимый индекс массива
export function isValidArrayIndex (val: any): boolean {
const n = parseFloat(String(val))
// n >= 0 && Math.floor(n) === n 保证了索引是一个大于等于 0 的整数
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
isFiniteМетод проверяет значение своего аргумента. если параметрNaN, положительная бесконечность или отрицательная бесконечность, вернетfalse, другие возвратыtrue.
5.2 once: функция, которая вызывается только один раз
export function once (fn: Function): Function {
let called = false
return function () {
if (!called) {
called = true
fn.apply(this, arguments)
}
}
}
Разобрать:кcalledв качестве идентификатора обратного вызова. При вызове этой функцииcalledЕсли идентификатор изменен, следующий вызов будет недействительным. Также типичный звонок закрытия.
5.3 cache: создать функцию кеша
/**
* Create a cached version of a pure function.
*/
export function cached<F: Function> (fn: F): F {
const cache = Object.create(null)
return (function cachedFn (str: string) {
const hit = cache[str]
return hit || (cache[str] = fn(str))
}: any)
}
Разобрать:Комментарии здесь объяснили эффект.
const cache = Object.create(null)Создать чистую функцию, чтобы предотвратить изменение（纯函数的特性：输入不变则输出不变）.
В Vue нужно переводить много одинаковых строк, и если перевод каждый раз выполнять заново, это вызовет много ненужных накладных расходов.cacheЭта функция может прочитать кеш, если кеша нет, сохранить его в кеше и, наконец, прочитать.
Эта функция относительно длинная, и ее рекомендуется использовать с комментариями.
Короче говоря, это
Различные суждения о типах + рекурсия
В этой статье давайте поговорим о некоторых функциях инструментов в Vue.Есть много способов изучить исходный код Vue. Пройди мимо и поставь палец вверх, бро.