- 博客(111)
- 收藏
- 关注
RSS订阅原创 Promise 多个请求顺序执行
Promise是JavaScript中一种用于处理异步操作的一种方式，例如从服务器获取数据和读取文件，它可以避免回调函数嵌套的问题，使得异步操作更加直观、易于管理和编写。
2024-02-20 09:27:48
1111
原创 Tree-Shaking 作用和实现原理
Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。在前端开发中，特别是在使用模块化工具（如Webpack、Rollup等）构建应用程序时，通常会引入许多库和模块。然而，应用程序可能只使用了这些库的一小部分功能，导致最终生成的代码包含了大量未被使用的代码。
2024-01-23 13:51:06
1767
原创 React 组件生命周期
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息。componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息。3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期。
2023-12-18 11:11:35
1291
原创 nvm切换node版本
在实际开发过程中，由于不同项目对node版本要求不一样，为解决node版本不兼容的问题，我们可以使用 NVM (NodeJS Version Management) 这个node版本管理工具，通过它可以根据项目来切换不同版本的node，来满足项目开发需要。
2023-11-07 10:24:18
816
原创 vue 重写数组的七个方法
因为Vue的响应式是通过 Object.defineProperty()实现的，这个api没办法监听数组长度的变化，也就没办法监听数组的新增。说明：vue只重写了这7个方法，使用其它数组方法不会主动触发试图更新，例如 concat、slice 等，如果需要触发更新，我们可以使用Vue.set() 或 this.$set() 方法手动触发更新。另外，Vue3处理响应数据使用了Proxy，系统会自动捕获这些操作，并在数据变化时触发视图更新，所以不需要重写数组方法。
2023-08-15 16:56:34
1498
1
原创 git 常用命令有哪些
项目存在三种短期分支 ：功能分支（feature branch） 补丁分支（hotfix branch） 预发分支（release branch）Git 是我们开发工作中使用频率极高的工具，下面总结下他的基本指令有哪些，顺便温习一下。虽然是主分支和分支，却是平级关系，develop可以理解为开发库，master为生产库。一般项目中长存2个分支： 主分支（master） 和开发分支（develp）五、切换（checkout）分支。四、分支（branch）操作。六、克隆（clone）分支。
2023-08-02 16:28:36
1987
原创 什么是事件循环 Event Loop
事件循环（eventLoop）是单线程的JavaScript在处理异步事件时进行的一种循环过程，具体来讲，对于异步事件它会先加入到事件队列中挂起，等主线程空闲时会去执行事件队列（Event Queue）中的事件。如此反复循环。事件循环的设计使得 JavaScript 可以在单线程下处理异步操作，避免了阻塞的情况，保证了程序的响应性和流畅性。我们在日常使用电脑中，我们可能会一边听歌、一边写代码、一边看网页。这些应用中都会在操作系统中开启一个进程或多个进程，不同的应用开启的进程是不一样的。
2023-07-13 18:21:38
610
原创 canvas 基本用法
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
2023-07-05 19:11:54
2648
原创 原生js常用方法有哪些？
如今框架横行，但原生JS学习反而变少了，框架虽然方便了，但掌握原生JS才是最基础的，本文分享了一些提供工作效率的原生JS方法，希望对你有所帮助。
2023-07-04 16:38:19
419
原创 vue 自定义指令
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。
2023-07-03 17:05:53
1098
原创 前端安全问题及解决方案
随着互联网的高速发展，信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域，在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。
2023-06-29 15:34:03
1178
原创 JS 事件委托
JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
2023-06-27 17:18:45
2928
原创 什么是 CSR，SSR，SSG 渲染
CSR（Client-Side Rendering）是指将网页的内容生成和渲染都放在客户端（即浏览器）完成的一种方式。在CSR中，初始的HTML文档中通常只包含基本的骨架和一些静态资源链接，如CSS和JavaScript文件。然后，浏览器会下载这些文件，并在客户端解析和执行JavaScript代码，动态地获取数据，并使用数据来生成和渲染页面的内容。CSR通常依赖于前端框架（如React、Angular、Vue.js）来处理数据获取和页面渲染。
2023-06-26 10:29:47
2023
1
原创 HTML5 新增的标签有哪些
①.语义元素：HTML5引入了一些新的语义元素，如、、、、 等，使开发者可以更清晰地定义页面结构，提高可读性和可访问性。是最新的html标准，拥有新的语义、图形以及多媒体元素，简化web应用程序，专为丰富的web内容而设计的，简称“H5”。⑥.改进的表单控件：HTML5引入了一些新的表单元素和属性，如日期选择器、输入验证、进度条、颜色选择器等，使开发者能够更轻松地创建交互性更强的表单。
2023-06-25 15:03:54
2101
原创 FormData 介绍和使用
FormData 是 JavaScript 中用于处理表单数据的接口。它提供了一种简单的方式来构建和发送表单数据，表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成这个过程，构造或编辑表单的键值对，然后通过脚本发送给服务器。浏览器原生提供了 FormData 对象来完成这项工作。
2023-06-20 11:30:04
2462
原创 js数据类型有哪些
数据类型是计算机语言的基础知识，数据类型广泛用于变量、函数参数、表达式、函数返回值等场合。JavaScript 规定了八种数据类型：未定义 (Undefined)，空 (Null)，数字 (Number)，字符串 (String)，布尔值 (Boolean)，符号 (Symbol)，任意大整数 (BigInt)，对象 (Object)。其中，这八大数据类型又分成两大类：基本数据类型和引用数据类型。
2023-06-13 15:37:43
3880
7
原创 http1.0，http1.1，http2.0，http3.0 区别有哪些
20 世纪 60 年代，美国国防部高等研究计划署（ARPA）建立了 ARPA 网，这被认为是互联网的起源。70 年代，研究人员基于对 ARPA 网的实践和思考，发明出了著名的 TCP/IP 协议。该协议具有良好的分层结构和稳定的性能，并在 80 年代中期进入了 UNIX 系统内核，促使更多的计算机接入了网络。1989 年，蒂姆伯纳斯-李博士发表了一篇论文，提出了在互联网上构建超链接文档系统的构想。在篇文章中他确立了三项关键技术：URI、HTML、HTTP。
2023-06-10 18:19:43
1045
原创 什么是浅拷贝和深拷贝
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。选择使用深拷贝还是浅拷贝取决于具体的需求和场景。如果需要创建独立的对象、避免副作用，并确保修改副本不会影响原始对象，则应使用深拷贝。
2023-06-06 22:15:00
879
原创 for、map、forEach、filter 之间的区别
方法是否修改原始数组返回值是否需要回调函数是否可以中断循环for可以无返回值是是map否新数组是否forEach否无返回值是否filter否过滤后的新数组是否。
2023-06-05 23:00:00
2076
原创 什么是DOM和BOM？
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
2023-06-01 22:30:00
13465
原创 原生js实现文件下载
文件下载是前端开发常见的开发需求，本文以vue框架为例介绍两种下载方式，一个是网络文件下载，一个是本地文件下载，具体实现如下，如需体验，可点击底部demo链接。
2023-05-22 10:40:52
3665
原创 watch 和 computed 区别和使用场景
computed 计算属性适合根据 data 里的属性，来做一些简单的计算并返回结果，例如数组的排序、筛选等等，它的结果会缓存起来，只有 data 中的属性发生变化时才会重新计算，其它情况会直接返回计算结果，以提高效率。计算属性可以像 data 属性一样直接在 html 模板中使用。watch 适合在 javascript 中监听 data 属性的变化，并根据变化做一些耗时的操作或者发送远程 API 请求。watch 中的方法一般没有返回值，而是直接修改 data 中的属性。
2023-05-09 22:15:00
1350
原创 什么是重绘和重排
重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。局部范围重排：用局部布局来解释这种现象：把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。浏览器解析渲染机制如下：1.解析HTML，生成DOM树，解析CSS，生成CSSOM树。
2023-05-08 22:30:00
3692
原创 js 常用工具类封装
工作中经常会对输入内容进行校验，比如：是否是手机号，是否是身份证号码，是否包含特殊字符，当前环境是否是手机端等。因为这些用的比较高频，每个需要用到的项目都需要拷贝一份到所需项目中，比较繁琐，不易于维护，所以就打算封装了一个工具类，并发布到npm仓库，项目中只需npm进行安装就可以使用。此外也封装了一些常用的函数，例如：//可以快速获取当前时间输出的格式。// 传入一个对象，可以把对象转换成参数拼接在url链接上//?
2023-04-23 14:18:25
721
原创 vue-zxing 识别二维码内容
ZXing 网上以java 和 Android 方案居多，官方github也是以java为主，前端实现的文档和案例并不多，由于最近公司业务涉及到扫码识别内容的需求，自己通过ZXing进行二次封装，并发布到npm官方仓库中。ZXing，一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的图像处理库。ZXing 官方示例：https://zxing-js.github.io/library/
2023-04-21 11:16:01
1180
9
原创 HTTP常用请求头和响应头有哪些?
超文本传输协议（ Hypertext Transfer Protocol ，HTTP）的请求和响应消息中，协议头部分的那些组件。用来准确描述正在获取的资源、服务器或者客户端的行为，定义了HTTP事务中的具体操作参数。客户端请求（Request）或服务器响应（Response）时传递的，位请求或响应的第一行，HTTP消息体（请求或响应的内容）是其后传输。
2023-04-20 11:25:37
5761
原创 什么是强缓存和协商缓存
浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。
2023-03-30 20:43:55
569
原创 js 原型与原型链
对象的作用在于，当访问一个对象的属性或方法时，如果该对象内部不存在这个属性，那么就会从它的 __proto__ 属性所指向的（原型）对象中寻找（原型也是对象，也有它自己的原型），如果原型对象中也找不到，就会继续在该原型对象的原型对象中找，以此类推，直到找到属性或方法为止，或者查找到顶层原型对象 null，就结束查找，返回 undefined。在 JavaScript 中的对象中都有一个 __proto__ 属性，从上图可以看出一个对象指向另一个对象，即指向相对应的对象的原型对象。
2023-03-27 14:19:48
577
原创 为什么CSS选择器是从右向左匹配的
CSS规则下（比如.box span），会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。
2023-03-17 20:22:59
397
原创 js中的new()到底做了些什么
通过 new 函数名 来实例化对象的函数叫构造函数。构造函数与普通函数并没有太大差异，为了区分我们将函数名首字母大写的函数作为构造函数，主要作用就是构造函数通过new关键字创建对象为初始化的对象添加属性和方法。对象字面量写法的缺点是，每创建一个新的对象都需要写出完整的定义语句，不便于创建大量相同类型的对象，不利于使用继承等高级特性。②.为步骤 1 新创建的对象添加属性 __proto__，将该属性链接至构造函数的原型对象。new 表达式是配合构造函数使用的，通过 new 一个构造函数去继承构造函数的属性。
2023-03-16 21:15:00
653
原创 如何发布自己的npm包
npm是随同nodejs一起安装的javascript包管理工具，能解决nodejs代码部署上的很多问题，常见的使用场景有以下几种：①.允许用户从npm服务器下载别人编写的第三方包到本地使用。②.允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。③.允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
2023-03-13 20:30:00
1447
原创 vue单向数据流
单向数据流是通过 props 将 Model 层的变化通知到 View 层进行修改。双向数据绑定是通过 Object.defineProperty()的 set() 和 get() 方法来实现的，当某一方发生变化的时候，另一方就会收到更新值的提醒，从而实现数据同步变化。
2023-02-13 21:15:00
997
原创 vue.config.js 配置
由于 vue-cli 3 参考了 rollup 的零配置思路，项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。提示：详细配置请参考官网。
2023-01-28 22:15:00
460
原创 vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架，核心两大特性就是响应式编程和组件化。本文针对组件之间传值做详细讲解。Vue就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，下面展开说明。如上图所示：父子关系：A与B，A与C，B与D，C与E。
2023-01-13 21:15:00
1379
1
原创 禁止浏览器缩放页面
说明：如果一张320*480的图片，放在iphone4里面，默认是满屏的，但如果定义了target-densitydpi=device-dpi，name图片只占屏幕四分之一，因为iphone4的分辨率是640*960。Chrome、Firefox、Edge、360浏览器、QQ浏览器亲测有效。- 按照图片真实尺寸进行展示。- 允许用户缩放到的最小比例。- 允许用户缩放到的最大比例。- viewport的宽度。- viewport的高度。- 用户是否可以手动缩放。
2022-11-07 22:15:00
988
2
原创 package.json 与 package-lock.json文件的区别
package.json与package-lock.json文件的区别
2022-11-01 19:38:34
7408
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人