- 博客(30)
- 收藏
- 关注
RSS订阅原创 JavaScript纯函数
在 JavaScript 的世界里，数组是处理数据集合的重要工具。而纯函数，作为一种编程范式，它不改变输入数据，也不依赖外部状态，只通过输入参数决定输出结果。这样的函数易于测试、易于理解，也更易于维护。
2024-08-27 15:05:04
1087
原创 JavaScript代码片段
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
2024-08-26 16:38:21
4571
原创 Promise：为什么没有取消（cancel）机制
Promise虽然JavaScript的Promise没有内置取消功能，但这并不意味着我们无法实现取消功能。通过理解Promise的设计哲学和状态机模型，我们可以更好地掌握其使用方法，并通过巧妙的编程技巧实现我们需要的功能。
2024-08-26 15:51:44
736
原创 axios的代码思考
不知道各位大佬有没有思考过这样的问题：axios到底是个什么东西？我们为什么可以使用这两种方式请求接口呢？axios是怎么设计的？
2024-08-21 14:35:39
273
原创 前端人Web API
简单来说，如果一个对象的唯一引用是WeakSet中的话，那么这个对象是可以被垃圾回收掉的，听起来有点酷，对吧？Proxy API能够创建一个代理对象，可以拦截并自定义对象的基本操作，比如属性的读取、赋值、枚举、函数调用等等。Blob API常用于Web应用中处理文件上传或下载，比如将用户的输入转换成一个可以下载的文件，或是读取一个已上传文件的内容。Notification API常用于提醒用户重要的更新，如社交媒体的消息提醒、电商网站的订单状态更新、新闻网站的最新头条等。你可以用它来创建复杂的音频应用。
2024-08-06 17:23:54
1001
原创 Object.assign用法
如果只是想将两个或多个对象的属性合并到一起，不改变原有对象的属性，可以用一个空的对象作为target对象。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。没有同名的属性会直接复制到目标对象上，同名的属性后面的属性值会覆盖前面的同名属性值。1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。
2024-03-06 11:39:19
812
原创 Object.keys()的用法
Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致，如果对象的键-值都不可枚举，那么将返回由键组成的数组。let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}参数：要返回其枚举自身属性的对象。
2024-03-06 11:24:00
1103
原创 JavaScript的内存管理与垃圾回收
JavaScript提供了高效的内存管理机制，它的垃圾回收功能是自动的。在我们创建新对象、函数、原始类型和变量时，所有这些编程元素都会占用内存。那么JavaScript是如何管理这些元素并在它们不再使用时清理它们的呢？在本节中，我们将讨论JavaScript中的内存管理的所有内部过程。我们将关注以下主题：JavaScript中的内存生命周期JavaScript中的内存分配当内存不再使用时的释放JavaScript的垃圾回收JavaScript垃圾回收中的引用概念标记-清除算法。
2024-02-23 15:07:24
1037
原创 axios是如何实现的（源码解析）
该文件创建了一个axios实例，并且导出，所以我们import axios from 'axios'引入的就是该实例，可以直接使用，不需要再new Axios({...})这样写。从上面的文件可以看出，axios扩展了Axios的原型方法和Axios实例的属性，所以接下来要重点看Axios的类里有什么内容。在阅读源码之前，先大概了解一下axios实例的属性和请求整体流程，带着这些概念，阅读源码可以轻松不少！下图是axios的请求流程，其实相当简单，先了解这个流程，看源码的时候就会有方向。
2024-02-23 14:46:54
1059
1
原创 esbuild的使用及配置
esbuild是一个「JavaScript」打包和压缩工具，核心目标是开创构建工具性能的新时代， 同时创建一个易于使用的现代构建工具。
2024-02-21 14:45:45
1520
原创 ESbuild 简介
ESbuild 文档:Esbuild 有命令行 ，js 调用， go 调用三种使用方式。这里主要讲利用 js 调用的方式。
2024-02-21 12:01:24
2200
原创 Commonjs 和 Es Module详解
今天我们来深度分析一下Commonjs和Es Module，希望通过本文的学习，能够让大家彻底明白Commonjs和Es Module原理，能够一次性搞定面试中遇到的大部分有关Commonjs和Es Module的问题。1 Commonjs 和 Es Module 有什么区别？2 Commonjs 如何解决的循环引用问题？3 既然有了exports，为何又出了?既生瑜，何生亮？4require模块查找机制？5 Es Module 如何解决循环引用问题？6这种写法为何无效？7 关于。
2024-02-19 14:55:17
3115
2
原创 前端基础面试题
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。js引擎：解析和执行JavaScript来实现网页的动态效果边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
2024-02-19 14:28:28
1137
1
原创 Vue3 基础面试题
Vue3 提供事件缓存对象，当开启 cacheHandler 会自动生成一个内联函数，同时生成一个静态节点，当事件再次触发时，只需从缓存中调用即可。Vue3 对于不参与更新的元素，做静态提升，只会被创建一次，在渲染时直接复用即可。依赖预构建主要做了什么呢？场景：比如一个列表，一刷新就需要加载数据，在数据未加载之前会显示 loading，加载完之后在显示列表数据。实现不是一次性监听的，这里深度监听是在 get 中处理的，什么时候用到什么时候处理（惰性）。，页面能显示内容，但内容不是响应式的。
2024-02-19 11:14:44
1133
1
原创 Pinia 与 Vuex 使用区别
解决方案：首页优化时会考虑到这个场景，一般处理方案是去做 vuex 的按需加载，beforeCreate 时，可以去判断当前页需要加载哪些 store，之后利用 vuex store 实例上的 registerModule 进行动态注册。pinia 在打包时会检查引用依赖，当首页用到 app store，打包只会把用到的 store 和页面合并输出 1 个 js chunk，其他 2 个 store 不会耦合在其中。Pinia 不再需要一个主要的 Store，是一个平面的结构，可创建不同的 Store。
2024-02-19 09:58:02
1257
1
原创 query和params传参区别
动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}})query传递显示参数（url那里），params传递不显示参数，参数在请求体内，params相对于query来说较安全一点。参数取值 – this.$route.params.key。params传参只能用name来引入路由。
2024-02-19 09:43:08
806
1
原创 前端构建效率优化之路
本文不会详细描述 Webpack 的构建原理，我们只需要大致知道，Webpack 的构建流程，主要时间花费在递归遍历各个入口文件，并基于入口文件不断寻找依赖逐个编译再递归处理的过程，每次递归都需要经历 String->AST->String 的流程，然后通过不同的 loader 处理一些字符串或者执行一些 JavaScript 脚本，由于 NodeJS 单线程的特性以及语言本身的效率限制，Webpack 构建慢一直成为它饱受诟病的原因。阶段的优化，涉及到环境准备，镜像拉取，依赖的安装。
2024-02-18 11:55:15
994
原创 js实现树形数据转成扁平数据&&扁平数据转成树形数据
利用递归的方法循环树形数组，当遇到有children的对象再次调用递归函数循环children数组，每次循环的数据放入一个提前声明好的数组里，等所有递归函数执行完，这个数组即是想要得到的扁平数据数组。示例1。
2024-02-01 11:52:07
583
1
原创 HTTP协议超级详解
HyperTextTransferProtocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织（CERN）所发起。
2024-02-01 11:10:54
818
1
原创 为什么Vue3 中应该使用 Ref 而不是 Reactive
解释是这样的：如果目标对象与源对象具有相同的键（属性名），则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的同名属性。时，如果不当使用，可能导致响应性失效，带来一些困扰。这种操作类似于深拷贝，不再共享同一内存地址，而是只是字面量的赋值，对该变量的赋值不会影响原来对象的属性值。用于将对象转换为响应式数据，可以直接访问和修改属性，适用于复杂的嵌套对象和数组。在一些情况下会失去响应，这可能导致数据回显失去响应（数据改了，DOM 没更新）。作为声明响应式状态的主要API。
2024-02-01 10:36:26
1263
1
原创 鸿蒙开发之ArkTS基础知识
ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配了鸿蒙的ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。了解ArkTS之前，我们需要先了解下ArkTS、TypeScript和JavaScript之间的关系。JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
2024-02-01 10:31:24
1024
1
原创 vue路由守卫简明操作笔记
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。meta的作用：路由元信息说白了就是通过meta对象中的一些属性，用于判断当前路由是否具有某一条件，便于进行判断和处理。路由meta属性,简单来说就是路由元信息，也就是每个路由身上携带的信息,属性名、属性值自己定义。
2024-01-29 15:47:58
373
原创 Vue路由简明实操笔记
路由1、作用：1）理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理2）前端路由：key是路径，value是组件3）作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）2、安装路由：vue 版本为 2.x，建议 vue-router 安装 3.x 版本。vue 版本为 3.x，建议 vue-router 安装 4.x 版本。项目下package.json查看 vue 版本。
2024-01-29 15:37:49
310
原创 vite.config.js详细配置
当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显。使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。webpack是基于模块化的打包(构建)工具，通过一个入口文件递归出所有模块的依赖关系，经过一系列的过程（压缩，合并），最终生成运行的代码。
2024-01-29 14:57:45
3775
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人