to-be-a-happy-adult

数据类型的检测❗️首先要明确常见的八种数据类型： 基本数据类型 string number boolean null undefined bigint symbol 复杂数据类型 object 1. typeof typeof 是一元运算符，用法：typeof value 输出值：上面所说的八种类型（除null之外加上个function） 注意点： typeof null 输出值为Object，这个是历史遗留问题; typeof function(){}输出值为function； []、{}、function(){}输出值都为Object，也就是typeof只能精准判断除了null之外的基本类型，无法判断复杂数据类型(除function外)； 类型 输出值 原因 null object 历史遗留问题 其他原始类型 对应类型字符串 准确识别 function(){} function 函数属于function类型 [] / {} / Date /...

今天学习封装axios，coderwhy老师的封装简直不要太🐂🍺，给我看的一愣一愣的。说实话之前写的项目只是简单的封装了axios，导致每次使用获取到接口数都会有ts类型提示，这真的很烦人。不过今天看到使用ts泛型定义返回数据，真是给我整爽了❗️ 鉴于自己确实缺乏ts灵活的使用，所以先来回顾一下必要的基础知识🧀 1. 泛型

Git常见问题解决首次添加远程仓库 场景：本地分支已存在，远程分支也已存在，但未建立联系 首次添加远程仓库时，我们的本地分支与远程分支未能建立联系，从本地master切换到远程master时会出现Git:fatal:a branch named 'master'already exists的错误！ 查看当前分支查看当前位于什么分支，保证下面之后操作的分支正确； 与远程分支建立联系将当前分支与远程origin/master分支建立联系 git branch –set-upstream-to=origin/master 简写：git branch -u origin/master 查看是否建立联系 查看所有分支的状态 git branch -vv查看当前分支的状态git status 解决之后的错误之后可能会出现fatal: refusing to merge unrelated histories的问题，解决方法如下： git pull origin master...

本篇文章主要记录一下前端工程化的一些内容。 项目工程化editorconfig.ts用来统一团队代码开发风格，即使是不同IDE也遵循一致代码规范。 # 根目录标识（必须放在最顶部）root = true[*] # 匹配所有文件charset = utf-8 # 文件编码（推荐 UTF-8）end_of_line = lf # 换行符（React 推荐 LF，兼容 Unix/macOS 和现代 Windows）insert_final_newline = true # 文件末尾自动添加空行trim_trailing_whitespace = true # 自动删除行尾空白字符indent_style = space # 缩进使用空格（React 社区主流选择）indent_size = 2 # 缩进为 2 个空格（JSX/TSX 常用）# 针对 JavaScript/TypeScript 文件（.js, .jsx, .ts, .tsx）[*.{js,jsx,ts,tsx}]quote_type = single # 引号使用单引号（可选，也可配置为...

在软件开发中，代码仓库的管理对项目的开发🧐和协作👥有着很重要的作用。常见的管理方式有Monorepo（单体仓库）和Multirepo（多体仓库）两种。 Multirepo的痛点😖Multirepo是使用单独仓库对单独项目进行管理，项目中的文件被放在不同的仓库中，这正是我们大多数开发所使用的代码管理方式； 痛点： 依赖问题😖 如果每个项目代码都安装依赖，都会产生node_modules这样的文件，项目体积变大； 如果更新依赖需要每个项目都进行更新，其中一个出现错误，其他项目可能也会出现相同的错误❌，需要同时更改多个文件； 重复配置 package.json、Eslint、Prettier、Typescript等多种工具或语言的配置需要在每个项目都进行配置，特别麻烦❗️ 跨仓库重构困难 ...

React官方文档推荐使用CRA ( create-react-app )来创建项目，其中会隐藏起有关webpack的配置，可以通过npm run eject修改相关配置，但是这个操作时不可逆的❗️也就是说一旦执行了此操作，那么webpack相关的处理都需要自行进行处理，比如说配置、构建等。对于小白来说，还是不要轻易尝试的好。 如果想要配置路径别名或者less等操作时，可以通过craco进行配置。 首先安装craco npm i @craco/craco 配置less npm i croco-less -D const CracoLessPlugin = require('craco-less')module.exports = { // ... plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { // 配置可以参照webpack的less-loader具体配置 ...

面试经典题汇总📝 输入网址之后发生了什么？我们在浏览器输入网址之后发生了什么，为什么我们能收到这个页面呢？ 路径纠错第一步❗️路径纠错 我们输入的路径可能有错，也可能缺少协议等东西，就比如我们输入了www..baidu.com，那么浏览器就会自动加上协议，变成http://www.baidu.com，路径补全后变成http://www.baidu.com/ DNS解析第二步❗️DNS解析DNS解析，就是把域名解析成IP地址，比如www.baidu.com，那么DNS解析之后，就会变成192.168.3.11 ❗️这里需要注意DNS缓存和DNS载荷均衡❗️ DNS缓存 本地缓存 浏览器缓存 系统缓存 DNS载荷均衡 我们知道`DNS解析`后会获取到一个IP地址，这个地址对应网站服务器地址；但是一个大公司可能有上千台服务器，那么返回的到底是哪台服务器呢？ ...

项目整体需求大致完成后，需要开始进行项目性能优化了，优化思路主要有：首屏加载、交互优化等 图片加载白屏首屏如果有很多图片需要加载，那么大概率会出现白屏的情况，下面从打包->加载资源->加速网络传输进行解决，主要分为： 减少资源体积webpack和vite都有对应的插件可以使用 vite — vite-plugin-imagemin 首先要明白，在打包时，**vite**会对**src**或项目根目录下的图片进行压缩或其他处理，但对于**public**下的图片，vite会绕过插件的处理，只对其进行复制处理；也就是说如果直接在项目中使用public中的图片，同时文件又特别大的情况下，那么出现白屏是必然的； 常见配置： // vite.config.jsimport { defineConfig } from 'vite';import imagemin from 'vite-plugin-imagemin';export default defineConfig({ plugins: [ ...

Git 概述Git 版本控制器的方式 集中式版本控制 集中式版本控制工具的版本库是集中放置在中央服务器的，团队中的每个人先从版本库中下载代码（需要联网才能工作），个人修改后提交到中央版本库。例：SVN 和 CVS 分布式版本控制 分布式版本控制系统没有“中央版本库”，每个人电脑上都是一个完整的版本库，这样工作的时候就不需要联网了。版本都在自己电脑上，修改后只要提交到仓库就可以实现多人协作。例：Git Git 工作流程相关命令： clone（克隆）：从仓库代码中克隆代码到本地仓库 checkout（检出）：从本地仓库检出一个分支进行修订(也就是切换分支) add（添加）：将修改的文件添加到暂存区 commit（提交）：将暂存区中的文件提交到本地仓库 fetch（抓取）：从远程库住去到本地仓库，不进行其他的合并动作 pull（拉取）：从远程库拉取最新代码，自动进行合并(merge)，相当于fetch和merge push（推送）：将本地仓库推送到远程仓库 Git 安装与常用命令常用Linux命令： ll /...

Proxy详解。 1. Proxy现在有一个问题：我们如何监听对象的操作？ Object.defineProperty() 之前我们会通过Object.defineProperty()来进行监听， Object.defineProperty(obj, "name", { get() { return obj.name }, set(value) { obj.name = value }}) Vue2实现响应式原理的核心就是通过Object.defineProperty()来实现的； 但是Object.defineProperty()设计之初并不是为了监听某个属性； 我们在定义某个属性时，初衷是定义某个普通属性，但是我们后面强行把它变成了数据属性描述符； 而且Object.defineProperty()无法监听到新增属性和删除属性等操作 Proxy new Proxy(target, handler) target: 目标对象 handler:...