произвести впечатление на собеседника, прочитав исходный код

Таблица содержания

  1. Почему стоит прочитать служебную функцию Vue3
  2. Как читать исходный код
  3. Скачайте и запустите vue-next
  4. Изучите служебную функцию Vue3
  5. Заключение

Почему стоит прочитать служебную функцию Vue3

  • Vue 3 — популярный интерфейсный фреймворк.
  • Качественный код
  • Вспомогательные функции не имеют слишком много зависимостей
  • Полезная функция проста для понимания.

Как правило, служебную функцию всегда проще всего понять, потому что нам не нужно разбираться во всей библиотеке.

Эта статья в основном предназначена для тех, кто впервые хочет попробовать прочитать исходный код. Это может сэкономить вам время, чтобы установить и понять структуру проекта с открытым исходным кодом.

Как читать исходный код

Существует несколько способов отладки исходного кода. На этот раз это не обязательно, но стоит упомянуть на случай, если вам понадобится отлаживать исходный код в будущем.

Методы отладки исходного кода (ориентированные на внешний интерфейс):

  1. vscode + программа запуска кода/quokka.js + исходная карта
  2. github1s (только чтение)
  3. хром девтулс

Вышеуказанные методы не исключают друг друга. Вы можете выбрать способ, который вам удобен.

vscode: самый популярный редактор кода

code runner: расширение vscode.

quokka.js: похож на средство запуска кода, которое фокусируется на javascript.

Chrome Devtools: это довольно распространено среди разработчиков интерфейсов. Если вы не знакомы, вы можете проверить эта ссылка

https://developer.chrome.com/docs/devtools/

github1s:

это не принадлежит Github, но это удобный способ просмотра репозитория Github в среде в стиле vscode. Просто поменяйте github -> github1s

Загрузите и запустите vue-next (vue3)

используйте git clone для загрузки vue-next (vue3)

git clone https://github.com/vuejs/vue-next.git
cd vue-next

Предварительная установка с помощью pnpm

Здесь мы можем научиться разрешать установку зависимостей только с помощью конкретного менеджера пакетов.

Если вы попытаетесь установить через yarn или npm, вы увидите следующее сообщение об ошибке:

Самый простой способ работать с исходным кодом — прочитать файл вклада. файл вклада предназначен для людей, которые хотят внести свой вклад в этот проект.

Во время отладки будет полезно создать исходную карту. С помощью следующей команды проект запустится с созданной исходной картой.

nr dev:sourcemap

Вы можете проверить выделенный файл. Должен быть

Изучите служебную функцию Vue3

Я рисую приведенную выше ментальную карту, чтобы помочь нам классифицировать функции, чтобы мы знали, на какую часть стоит потратить время.

КОНСТ:

NOOP: это константа, определяющая, пуста функция или нет.

EMPTY_OBJ: эта константа определяет, является ли среда dev, если да, то замораживает объект.

EMPTY_ARR: заморозить массив, если он находится в среде разработки.

кстати object.freeze всегда есть в вопросах интервью. Вот пример функции.

НЕТ:всегда возвращать false

Определить тип:

Из приведенного выше кода мы можем узнать, как проверять типы.

Array.isArray: проверяет, является ли элемент массивом или нет.

Array.isArray([]) //true
Array.isArray(new Array()) //true
Array.isArray(Array.prototype) //true

isMap и isSet:

export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === '[object Map]'
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === '[object Set]'
export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
  objectToString.call(value)

способ, которым vue проверяет, является ли карта или набор, заключается в преобразовании в строку, а затем проверяется, равно ли [карте объекта] и [набору объектов]

Дата:

export const isDate = (val: unknown): val is Date => val instanceof Date

здесь мы используем instanceof, чтобы проверить, создана ли дата с помощью new Date()

ниже приведен аналогичный пример использования instanceof

var child = new Father();
child instanceof Father; // true,because Object.getPrototypeOf(child) === Father.prototype

isFunction, isString, isSymbol и isObject (используйте typeof)

export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function'
export const isString = (val: unknown): val is string => typeof val === 'string'
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
export const isObject = (val: unknown): val is Record<any, any> =>
  val !== null && typeof val === 'object'

все вышеперечисленные проверки полагаются на typeof. Давайте рассмотрим категории typeof в JavaScript ниже.

Промис:

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

Здесь мы можем узнать, что способ определить обещание состоит в том, чтобы проверить, а поймать — это функции, а само обещание — это объект.

Преобразовать тип

export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
  objectToString.call(value)
export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
}
export const toNumber = (val: any): any => {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

toNumber: мы можем научиться обрабатывать пограничный случай. Проверьте, является ли число действительным или нет, если оно не возвращает себя, в противном случае верните значение.

objectToString: цель этой функции — преобразовать объект в строку, чтобы мы могли проверить тип объекта.

Стоит изучить (важная часть):

getGlobalThis:определение глобального this на основе среды.

let _globalThis: any
export const getGlobalThis = (): any => {
  return (
    _globalThis ||
    (_globalThis =
      typeof globalThis !== 'undefined'
        ? globalThis
        : typeof self !== 'undefined'
        ? self
        : typeof window !== 'undefined'
        ? window
        : typeof global !== 'undefined'
        ? global
        : {})
  )
}

Эта функция полезна, когда вашей программе может потребоваться запуститься в другой среде или вы не уверены, в какой среде она будет работать.

invokeArrayFns: выполнить функцию в массиве.

удалить: удалить элемент из массива.

Я поместил эту функцию удаления здесь только потому, что нам может понадобиться использовать эту функцию ежедневно.

cacheStringFunction: изучение шаблона проектирования синглтона

Заключение

Чтение высокого качества — это способ улучшить свои навыки архитектора и качество кода. Цель этой статьи — объяснить, как я запускаю проект с открытым исходным кодом локально (vue-next). Вспомогательные функции — это всегда самая простая часть для начала.

Если вы обнаружите что-то неправильное в этой статье, пожалуйста, дайте мне знать.