精读某位前端大佬的代码，猜我发现了什么?

瞪大眼睛看世界
381 阅读3分钟

最近学习了大脸怪的Vite+Vue3+Pinia+Naive UI的项目，有感而发，记录下这篇学习笔记。

学习这个项目的初衷是想弥补自己在框架搭建的缺陷，想找个轻量且有详细教程的vue项目，正好看到大脸怪发布的文章专栏。

这个项目是从pnpm create vite开始的，自己跟着敲了一遍代码，发现了大佬许多设计感满满的代码。

下面分享下我学习到的代码亮点：

1. axios封装——工厂方法

这是大佬写的axios请求拦截的封装代码，可以看到这里的axios实例可以自定义传参且下允许创建多个的实例，而且请求和拦截方法的参数都提取出来且进行模块化引入了。这边的写法可以看出是用了工厂方法，并且满足了开闭原则，所以创建实例的时候思路清晰，且具有拓展性。

import axios from 'axios'
import { resResolve, resReject, reqResolve, reqReject } from './interceptors'

export function createAxios(options = {}) {
   const defaultOptions = {
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 12000
   }
   const service = axios.create({
    ...defaultOptions,
    ...options
   })
   service.interceptors.request.use(reqResolve, reqReject)
   service.interceptors.response.use(resResolve, resReject)
   return service
}

export const defAxios = createAxios()

export const testAxios = createAxios({
  baseURL: import.meta.env.VITE_APP_BASE_API
})

这样写的好处是什么？

说个真实的场景，公司有个项目存在不同接口前缀的接口，比如一个叫/aaa，另一个是/bbb,如果不用大佬这种思路，我们可能得写两次axios.create({...}),甚至有人都不知道axios可以创建多个实例。但现在需要什么前缀的接口就创建什么前缀的axios，两个axios间互不影响，还解决了代码冗余的问题。

2. 缓存封装——集中管理

这里声明了一个Storage类，把getItem和setItem方法以及key值的前缀都写在这个类中集中管理。在外部实例化localStorage和sessionStorage时，只需要改变传参即可。

import { createStorage } from './storage'

const prefixKey = 'Vue_Naive_Admin_'

export const createLocalStorage = function (option = {}) {
  return createStorage({
    prefixKey: option.prefixKey || '',
    storage: localStorage
  })
}

export const createSessionStorage = function (option = {}) {
  return createStorage({
    prefixKey: option.prefixKey || '',
    storage: sessionStorage
  })
}

export const lStorage = createLocalStorage({ prefixKey })
export const sStorage = createSessionStorage({ prefixKey })

这样写的好处是什么？

说个真实的场景，公司之前有个项目需要在不同文件保存和读取localStorage的值，虽然把localStorage的前缀提取到一个js文件进行管理，但是每个用到localStorage的文件都需要引入前缀文件，操作起来非常麻烦。现在将缓存的参数都统一管理起来，以后要改参数直接操作一个文件即可，实现缓存配置化。

当然，这个框架的优点还不止如此，我只是挑了对自己比较有帮助的部分代码解析，大脸怪的项目中多用到了模块化引入、方法封装、变量可配置化等。这些给了我很大的启发，我以后会将这种编码思路应用于项目当中。

作为一个普通的前端，想要打破当切图仔的命运，只能多学习其他人优秀的代码并加以应用，有空多刷刷掘金，看看其他人的学习方法和技巧，俗话说，三人行，必有我师焉。学习了技能后如果想要更上一层，要学会将自己的学习内容进行输出，正如掘金鼓励我们的这样。这是我在掘金发布的第一篇文章，也是学习历程中自己的一次勇敢表达。

附上大佬的访问链接：大脸怪 的个人主页 - 专栏 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝