[Source Code]Vue3 — Utility Function In 5 Minutes

impress interviewee by reading source code

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.

Generally, Utility Function is always the easiest to understand because we do not need to understand the whole library.

This article is mainly for people who would like to try to read source code for the first time. It may save you some time to set and understand the structure of the open-source project.

How To Read Source Code

There are several ways to debug source code. It is not mandatory this time but it is worth mentioning in case you need to debug source code in the future.

Source code debugging methods(front-end oriented):

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

The above methods are not exclusive to each other. You can choose the way you feel comfortable with.

vscode: the most popular code editor

code runner: is a vscode extension.

quokka.js: is similar to code runner which focuses on javascript.

Chrome Devtools: this is pretty common for front-end developers. If you are not familiar you can check this link

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

github1s：

this does not belong to Github but it is a convenient way to view Github repo in a vscode-style environment. Just change the github -> github1s

Download and Run vue-next(vue3)

use git clone to download vue-next(vue3)

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

Preinstall with pnpm

Here we can learn a practice to only allow install dependencies by using the particular package manager.

preinstall setting

https://github.com/vuejs/vue-next/blob/ccb6651b12af6d1b43e2391cef77fd0bb73e49bd/scripts/preinstall.js

If you try to install through yarn or npm then you will see the following error message:

pnpm install

The most straightforward way to work with source code is to read the contribution file. contribution file is designed for people who want to contribute to this project.

It will be helpful to generate sourcemap while debugging. By using the following command, the project will run with sourcemap generated.

nr dev:sourcemap

You can check the highlighted file. It should be

Study Vue3 Utility Function

I draw the above mindmap to help us classify the functions so that we know which part is worth spending time with.

CONST:

NOOP: this is the const to determine if the function is empty or not.

EMPTY_OBJ: This const is to determine if the environment is dev if yes then freeze the object

EMPTY_ARR: freeze the array if it is in the development environment.

by the way object.freeze is always in the interview questions. Here is a example of function.

NO: always return false

Determine Type:

determine type

From the above code, we can learn how to check the types.

Array.isArray: this is to check if the item is an array or not.

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

isMap and 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)

the way that vue check if is map or set is to convert to string and then check if equals to [object Map] and [object Set]

isDate:

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

here we use instanceof to check if the date is created by new Date()

below is a similar use case of instanceof

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'

the above check all rely on typeof. Let’s review the typeof categories in JavaScript below.

isPromise:

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

Here what we can learn is the way to determine promise is to check then, catch are functions and the promise itself is an object.

Convert Type

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: we can learn how to handle the edge case. Check if the number is valid or not if not return itself otherwise return the value.

objectToString: the purpose of this function is to convert the object to string so that we can check the object type.

Worth Study(the important part):

Photo by Iyan Kurnia on Unsplash

getGlobalThis: determine global this based on the environment.

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
        : {})
  )
}

This function is useful when your program might need to run in different environment or you are not sure which environment it will run.

invokeArrayFns: execute function in array.

remove: remove an element from an array

I put this remove function here just because we might need to use this kind of function on daily basis.

cacheStringFunction: learn singlton design pattern

Conclusion

Read high quality is a way to improve your architect skill and code quality. The purpose of this article is to explain how I run an open-source project locally(vue-next). Utility functions are always the easiest part to start with.

If you find anything wrong with this article please let me know.