произвести впечатление на собеседника, прочитав исходный код
Таблица содержания
- Почему стоит прочитать служебную функцию Vue3
- Как читать исходный код
- Скачайте и запустите vue-next
- Изучите служебную функцию Vue3
- Заключение
Почему стоит прочитать служебную функцию Vue3
- Vue 3 — популярный интерфейсный фреймворк.
- Качественный код
- Вспомогательные функции не имеют слишком много зависимостей
- Полезная функция проста для понимания.
Как правило, служебную функцию всегда проще всего понять, потому что нам не нужно разбираться во всей библиотеке.
Эта статья в основном предназначена для тех, кто впервые хочет попробовать прочитать исходный код. Это может сэкономить вам время, чтобы установить и понять структуру проекта с открытым исходным кодом.
Как читать исходный код
Существует несколько способов отладки исходного кода. На этот раз это не обязательно, но стоит упомянуть на случай, если вам понадобится отлаживать исходный код в будущем.
Методы отладки исходного кода (ориентированные на внешний интерфейс):
- vscode + программа запуска кода/quokka.js + исходная карта
- github1s (только чтение)
- хром девтулс
Вышеуказанные методы не исключают друг друга. Вы можете выбрать способ, который вам удобен.
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). Вспомогательные функции — это всегда самая простая часть для начала.
Если вы обнаружите что-то неправильное в этой статье, пожалуйста, дайте мне знать.