[Source Code]Vue3 — Utility Function In 5 Minutes

Table Of Content

  1. Why Vue3 Utility Function Worth Reading
  2. How To Read Source Code
  3. Download and run vue-next
  4. Study Vue3 Utility Function
  5. Conclusion

Why Vue3 Utility Function Worth Reading

  • Vue 3 is a popular front-end framework.
  • High-quality code
  • Utility Functions does not have too many dependencies
  • Utility Function is easy to understand.

How To Read Source Code

  1. vscode + code runner/quokka.js + sourcemap
  2. github1s(read only)
  3. chrome devtools

Download and Run vue-next(vue3)

git clone https://github.com/vuejs/vue-next.git
cd vue-next
preinstall setting
https://github.com/vuejs/vue-next/blob/ccb6651b12af6d1b43e2391cef77fd0bb73e49bd/scripts/preinstall.js
pnpm install
nr dev:sourcemap

Study Vue3 Utility Function

CONST:

determine type
Array.isArray([]) //true
Array.isArray(new Array()) //true
Array.isArray(Array.prototype) //true
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)
export const isDate = (val: unknown): val is Date => val instanceof Date
var child = new Father();
child instanceof Father; // true,because Object.getPrototypeOf(child) === Father.prototype

isFunction, isString, isSymbol and isObject(use 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'
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}

Convert Type

export const objectToString = Object.prototype.toStringexport 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
}
Photo by Iyan Kurnia on Unsplash
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
: {})
)
}

Conclusion

--

--

--

Full-Stack Developer based in Melbourne Linkedin:https://www.linkedin.com/in/stevenlchen/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Expand your Vue app into the clouds! How to use AWS Lambda functions in your Vue apps: Part 2

Nullish coalescing operator (??)

10 Things About jQuery i18n You May Not Have Known

Real-Time Interactive HTML Tables With Easybase and DataTables.net

WebLogic Managed Servers Health States Automation with WL-OPC

Fix vulnerabilities issues in Expo.io

TypeScript: the Scala Perspective

How To Not Screw Up UX In A Single-Page Application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Steven(Liang) Chen

Steven(Liang) Chen

Full-Stack Developer based in Melbourne Linkedin:https://www.linkedin.com/in/stevenlchen/

More from Medium

Stores with Dependency Injection in Vue 2 with Inversify

Javascript / Jquery — Prototype Pattern — StudySection Blog

Javascript / Jquery — Prototype Pattern — StudySection Blog

Crafting paginated API with NodeJS and MSSQL

API Basics from a Beginner