- 博客(450)
- 收藏
- 关注
RSS订阅原创 对 FileReader 的理解
通常与 input 元素的 type 属性设置为 "file" 的文件输入框结合使用，用户选择文件后，通过 FileReader 对象读取文件内容并进行相应处理。readAsArrayBuffer 读取文件后，会在内存中创建一个 ArrayBuffer 对象（二进制缓冲区），将二进制数据存放在其中。以 Data URL 形式读取文件内容，返回一个包含文件内容的 Base64 字符串。主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。异步按字符读取文件内容，结果用字符串形式表示。
2024-04-11 17:48:43
476
原创 对 File 对象的理解
或者说是一种特殊的 Blob 对象。所有可以使用 Blob 对象的场合都可以使用它。，用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，表单的文件上传控件（<input type="file">），它包含了文件的相关信息，如文件名、文件大小、文件类型等。通常与用户通过文件输入框选择的文件相关联。，是表示计算机文件的一种数据类型。File 对象指代一个文件对象。它们都是 File 实例对象。它继承了 Blob 对象。
2024-04-11 17:48:18
203
原创 对 Blob 的理解、如何创建 Blob及 Blob 的应用场景
Blob 通常指的是Binary Large Object（二进制大对象），是一种用于存储大量二进制数据的数据类型。Blob 对象可以看做是存放二进制数据的容器还可以通过 Blob 设置二进制数据的 MIME 类型，一个 Blob 对象就是一个包含有只读原始数据的类文件对象。File 接口基于 Blob，继承了 Blob 的功能，并且扩展支持了用户计算机上的本地文件Blob 对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器。
2024-03-31 22:26:37
322
原创 实现简易的 axios
如果有 params，就 new URLSearchParams() 对象，并把传进来的 params 传到对象里；再用 toString 方法转成 URL 编码字符串，最后再拼接 url 来覆盖 url 默认值。如果有 data，就 xhr.setRequestHeader 设置请求头的请求数据类型；比如 JSON 字符串，就还需要用 JSON.stringify 转成 JSON 字符串。new XMLHttpRequest 并设置默认请求方式、请求根路径；添加请求+响应事件；
2024-03-28 22:09:52
444
1
原创 URLSearchParams
URLSearchParams是 Web API 中的一种对象，用于处理 URL 查询字符串的操作。它提供了一种简单的方式来访问和操作 URL 查询参数。通过使用 URLSearchParams 对象，你可以方便地解析和操作 URL 查询参数，而不需要手动解析 URL 字符串。这使得在 JavaScript 中处理 URL 查询参数变得更加方便和高效。
2024-03-28 17:55:44
330
原创 URL是什么？（概念+应用场景+优缺点）
总的来说，URL 作为统一资源定位符在互联网中起着至关重要的作用，能够准确地定位和访问资源，但也存在一些长度限制和可读性方面的缺点。
2024-03-27 22:10:27
268
原创 token是什么？（概念+应用场景+优缺点）
总的来说，Token 作为一种身份验证和授权机制，具有便捷、安全等优点，但也需要注意安全性和管理问题。
2024-03-27 21:36:26
394
原创 flex 布局和 grid 布局的区别
综上所述，Flexbox 适用于一维布局的场景，用于构建自适应和灵活的布局；而 Grid 适用于二维布局的场景，用于构建复杂的网格结构和定位布局。在实际开发中，可以根据具体需求选择合适的布局模型。
2024-01-23 22:53:53
783
原创 SPA vs MPA vs PWA
SPA 全称为 Single-Page Application，表示单页面应用程序。也就是说只有一个 HTML 文件的 Web 应用，我们通过 Vue 开发的项目其实就是典型的 SPA应用在单页面应用程序中，我们不会为每个路径创建多个 HTML 文件，而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。当从浏览器请求单页面应用程序时，就会下载一个 bundle.js 文件，该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法，浏览器会通过使用。
2024-01-22 22:44:05
1175
原创 src 和 href 的区别
主要用于指定链接到页面中的外部资源，比如 CSS 文件、字体文件或其他网页文件。通过 href 属性引入的资源是可选的内容，用于提供额外的样式和交互。指向一些网络资源如百度链接，建立当前元素和本文档的链接关系，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源。当浏览器解析到该元素时，会暂停其他资源下载，直到该资源执行完毕。在前端开发中，src 和 href 是两个常见的属性，属性引入的资源会对页面产生直接影响，是必需的内容。通常用于指定要嵌入到页面中的外部资源，比如。引入可选的、提供额外样式和交互的资源。
2024-01-17 20:27:30
852
原创 前端怎么定位到发生错误的元素
总之，在前端开发中，定位到发生错误的元素需要结合多种方法和工具进行分析和定位，通过多次尝试和调试，找到准确的问题所在，并采取相应的措施进行解决。
2024-01-05 00:03:33
993
原创 Proxy 与 defineProperty 的理解、区别、优势、劣势
参考： Vue2 和 Vue3 响应式上有什么区别？ / 使用 Object.defineProperty() 来进行数据劫持有什么缺点？_vue 2响应式和vue 3响应式区别-CSDN博客文档：Object.defineProperty() - JavaScript | MDN 作用：对一个对象进行操作的方法。可以为一个对象增加一个属性，同时也可以对一个属性进行修改和删除。 的问题主要有三个： 兼容性好，支持 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必
2024-01-04 21:53:57
1707
原创 判断一个数是否是素数？并使用proxy检测该函数的性能
质数(prime number)又称素数，有无限个。一个大于1的自然数，除了1和它本身外，不能被其他自然数整除换句话说，就是这个数除了 1 和它本身以外不再有其他的因数；否则称为合数。
2024-01-03 22:21:41
499
原创 微信小程序怎么实现下拉刷新？
自定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利用这个属性，来实现下拉刷新功能。使用官方提供的API。
2024-01-02 21:58:02
690
原创 算法 - 无重复字符的最长子串（03）
定义左右两个指针，保证两个指针对应的子串中没有重复的字符，寻找并记录最长的子串长度。如果窗口满足条件，右指针向右滑动扩大窗口，更新最优值；在移动结束后，这个子串就对应着以左指针开始的，不包含重复字符的最长子串，我们记录下这个子串的长度。在枚举结束后，我们找到的最长的子串的长度即为答案。（即 C++ 中的 std::unordered_set，Java 中的 HashSet，Python 中的 set,将左指针向右移动一格，表示我们开始枚举下一个字符作为起始位置，然后我们可以不断地向右移动右指针，
2023-12-15 10:04:28
331
原创 算法 - 二分搜索法 / 二分法（704）
要在二分查找的过程中，保持不变量，就是在 while 寻找中每一次边界的处理都要坚持根据区间的定义来操作，这就是。
2023-12-12 21:15:28
333
原创 一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层
过于灵活的实现也导致了前端应用拆分过多，维护困难；往往一个功能或需求会跨两三个项目进行开发。
2023-12-11 11:01:37
427
原创 JavaScript 中 eval() 的作用
此外，由于 JavaScript 已经提供了更安全的替代方案，如使用函数表达式或箭头函数来动态执行代码，建议尽可能避免使用 eval()由于 eval() 可以执行任意的代码，如果传入的字符串来自不可信的来源，存在被恶意代码利用的风险。需要注意的是，尽管 eval() 提供了强大的功能，但它也存在一些潜在的安全风险。使用 eval() 函数执行了不同类型的 JavaScript 代码。eval() 函数的基本语法如下：eval(string)在使用 eval() 时应谨慎，并确保只执行可信的代码。
2023-11-17 14:42:35
534
原创 Vue 中 slot 是什么？作用？分类？如何实现？
插槽 — Vue.js插槽 Slots | Vue.js在 Vue2.6.0 之后，使用v-slot或者语法糖#插槽名定义；在这之前使用slot="插槽名"定义。跟 v-on 和 v-bind 一样，v-slot 也有缩写，也就是把参数之前的所有内容(v-slot:) 替换为字符 #；下面是三种默认插槽的内容定义方式，并且最后一个默认插槽的内容会覆盖掉上一个插槽内容。使用 template 包裹内容，同时使用 v-slot 绑定一个名称。
2023-11-15 11:01:56
4952
原创 操作数组元素的常用方法有哪些？
该方法返回一个字符串。在调用 toLocaleString() 方法时会得到一个逗号分隔的数组值的字符串，它与 toString() 方法的区别是，为了得到最终的字符串，其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组是当前正在搜索的数组。返回一个新的数组，包含从 start 到 end （不包括该元素）的数组元素。它的参数是一个回调函数，所有数组元素依次执行该函数，返回结果为 true 的元素会被返回。传给每个方法的函数接收三个参数：分别是当前元素、当前元素的索引值、当前元素所属的数对象。
2023-11-11 02:09:15
249
原创 打开了两个标签页是进程还是线程？
因为现代浏览器通常采用多进程架构来提高浏览器整体的性能和安全性，所以每个标签页都会在浏览器中独立运行。因此，打开两个标签页通常会导致浏览器启动两个单独的进程，每个标签页在自己的进程中运行，此外，每个插件也可能在单独的进程中运行，使得浏览器整体的性能和安全性得到提升。在浏览器中，打开两个标签页通常会创建两个独立的浏览器进程，而不是线程。每个标签页通常在单独的进程中运行，这样可以避免一个标签页或插件的崩溃影响到整个浏览器。这样可以避免一个标签页崩溃影响到整个浏览器。浏览器打开了两个标签页是。
2023-11-09 23:28:48
230
原创 Cookie 能跨域吗？如何设置？
在以上代码中，fetch 请求中的 credentials 设置为 include，并且响应头中设置 Access-Control-Allow-Credentials 为 true，就可以实现 Cookie 的跨域访问。对于跨域请求，在客户端需要明确指定携带 Cookie，可以通过 XMLHttpRequest 对象或 Fetch API 的 credentials 属性进行设置。在一般情况下，Cookie 是不允许跨域的。跨域设置 Cookie 只能在响应中设置，而不能在请求中设置。
2023-11-09 23:13:48
2105
原创 JavaScript 作用域链（Scope Chain）是什么？有什么作用？
在JavaScript中，函数存在一个隐式属性 [[ scopes ]]，这个属性用来保存当前函数在执行时的环境（上下文），由于在数据结构上是链式的，也称为作用域链。我们可以把它理解为一个数组。console.dir(fn) // 打印内部结构作用域链的形成是由函数创建时确定的，它由函数创建时所处的执行上下文（Execution Context）和它的词法环境（Lexical Environment）组成。作用域链的作用包括：变量查找。
2023-11-08 21:43:17
346
原创 Vue3 ＜script setup＞是什么？作用？
⑤ useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件，defineExpose 对外暴露。在组件中可以直接使用这些属性和事件，无需在 props 和 emits 中声明。在模板中就可以直接使用它们。<script setup> 是 Vue3 的语法糖，简化了组合式 API 的写法，其实是。① 在 setup 中声明的属性和方法无需 return，就可以直接在模板使用；而 <script setup> 中的代码会在每次组件实例被创建的时候执行。
2023-11-07 23:21:49
1032
1
原创 Vue 3 中，watch 和 watchEffect 的区别
watch：既要指明要监听的属性，也要指明回调。不用指明监听哪个属性，回调中用到哪个属性，那就监听哪个属性。watchEffect 有点像计算属性 computed：但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。与比较，watch懒执行副作用；更具体地说明什么状态应该触发侦听器重新运行；访问侦听状态变化前后的值。
2023-11-07 17:37:40
621
原创 Pinia 是什么？Redux、Vuex、Pinia 的区别？
总之，Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案，并有其自身独特的优点。Pinia 适合那些想要一个简单、轻量级的状态管理库的开发者，而 Vuex 则适合那些需要更多功能和灵活性的开发者。具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。如果是 Vue.js 3 的项目，可以考虑使用 Pinia，否则可以考虑 Vuex 或 Redux。
2023-11-07 15:09:32
713
原创 webpack 的 Loader 和 Plugin 的区别，常见的 loader 和 plugin 有哪些？
总结起来，loader 用于处理模块的转换工作，而 plugin 则用于扩展 webpack 的功能，增加额外的构建任务。它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。
2023-11-06 22:54:21
835
原创 Webpack 中 Plugin 的作用是什么？常用 plugin 有哪些？
允许在编译时创建配置的全局对象；(Webpack4 之后指定 mode 会自动配置)是一个 webpack 内置的插件，不需要安装。
2023-11-06 21:55:04
700
原创 Webpack 中 loader 的作用是什么？常用 loader 有哪些？
webpack 只支持对 js 文件打包，像 css、sass、png 等这些类型的文件的时候，webpack 则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析。因为 loader 支持链式调用，链中的每个 loader 会处理之前已处理过的资源，最终变为 js 代码。当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则。通过使用不同的 loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。关于 loader 的配置，我们是写在。
2023-11-06 20:35:03
565
原创 Content-Type 值有哪些?
消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。但是随着越来越多的 Web 站点，尤其是 Web/App，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。
2023-11-02 21:02:59
195
原创 Tree shaking 的概念、作用和原理
① 使用 ES6（ES2015）模块语法中的 import 和 export 才可以触发这个机制；这是因为 tree shaking 只能在静态 modules 下工作。ECMAScript 6 模块加载是静态的，因此整个依赖树可以被静态地推导出解析语法树。所以在ES6中使用 tree shaking 是非常容易的。② 在项目的 package.json 文件中，添加 "sideEffects" 属性；③ 使用 mode 为 "production" 的配置项以启用更多优化项。
2023-11-01 23:18:26
395
原创 webpack 与 grunt、gulp 的不同?
简单来说，Webpack 的主要功能是模块打包和代码分割，适用于现代前端框架；Grunt 和 Gulp 的主要功能是任务自动化，但不支持模块化开发，适用于传统的前端开发。但是在实际项目中，它们也可以结合使用，以实现更加高效的前端工作流程。webpack 与 grunt、gulp 是完全不同的两类工具。而现在主流的方式是用 npm script 代替Grunt、 Gulp，npm script同样可以打造任务流。
2023-11-01 18:50:49
1753
原创 webpack、rollup、parcel 优势和劣势?
结论先行：webpack 是模块化构建工具，具有强大的 loader 和插件生态，适用于大型复杂项目的构建；rollup适用于基础库的打包，功能没有webpack 强大；parcel适用于简单的实验性项目，在公司真实项目一般不用；
2023-11-01 18:50:25
545
原创 对 Webpack 的理解
webpack 是目前比较常用的模块打包工具，它能够很好地管理与打包开发中所用到的 HTML、 JavaScript 、CSS以及各种静态文件（图片、字体等）。使用 webpack 管理模块依赖，并编译输岀模块所需的静态文件，让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。它会分析模块间的依赖关系，最后生成优化且合并后的静态资源。
2023-11-01 18:49:55
505
原创 Vue 是单向数据流，为什么有双向绑定？
是通过监听表单元素上的 input 或者 change 事件，然后再通过数据劫持 (Object.defineProperty) 将数据模型中的值与表单元素的值进行绑定。需要注意的是，虽然双向绑定在某些场景下提高了开发效率和用户体验，但是过多使用双向绑定可能会导致代码难以理解和维护。v-model 的实质是语法糖，它的内部会根据组件类型自动转换/解析成不同的事件和属性，默认是 input 和 value。，但是在表单交互中，双向数据绑定可以方便地将用户输入的数据同步到数据模型中，提高了用户体验。
2023-10-30 18:26:01
167
原创 用 Vue Router 的 hash 模式如何实现锚点？
③ 在目标组件中，可以使用 Vue 的生命周期函数 mounted 来。这样，当路由跳转到目标页面时，页面会自动滚动到指定的锚点位置。① 首先，在 Vue Router 的路由配置中，需要将。设置目标 URL 的 hash 部分为锚点的名称。scrollIntoView方法将其滚动到视图中。获取目标描点的 DOM 元素。mode 设置为 hash。② 在页面跳转时，使用。
2023-10-29 10:47:34
623
原创 实现寄生组合继承
③ 将子类的原型指向一个父类的实例，实现方法的继承并避免父类构造函数被调用多次。④ 在子类的原型上添加子类自己的方法。，实现了高效而且正确的继承方式。寄生组合继承是一种继承方式，
2023-10-27 18:47:09
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人