自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

似水流年QC的博客

编程爱好者

  • 博客(112)
  • 收藏
  • 关注

原创 什么是浏览器指纹

浏览器指纹(Browser Fingerprinting)是一种用于识别和追踪互联网用户的技术,它通过收集和分析用户浏览器的各种属性和配置(下面展开说明),生成一个独特的“指纹”。这种指纹可以用于区分和识别不同的用户,尽管不知道用户的具体身份,但每个用户都有一个唯一的指纹(即使他们清除了浏览器缓存或使用了隐身模式)。在数字互联网时代,我们的在线活动几乎总是留下痕迹。其中,浏览器指纹就像我们的数字身份证,让网站能够识别和追踪用户。本文将详细介绍浏览器指纹是什么,它如何工作,以及我们该如何应对浏览器指纹识别。

2024-06-15 23:52:57 858

原创 Promise 多个请求顺序执行

Promise是JavaScript中一种用于处理异步操作的一种方式,例如从服务器获取数据和读取文件,它可以避免回调函数嵌套的问题,使得异步操作更加直观、易于管理和编写。

2024-02-20 09:27:48 1355

原创 Tree-Shaking 作用和实现原理

Tree-shaking 它的名字来源于通过摇晃(shake)JavaScript代码的抽象语法树(AST),是一种用于优化JavaScript代码的技术,主要用于移除未被使用的代码,使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积,提高加载性能。在前端开发中,特别是在使用模块化工具(如Webpack、Rollup等)构建应用程序时,通常会引入许多库和模块。然而,应用程序可能只使用了这些库的一小部分功能,导致最终生成的代码包含了大量未被使用的代码。

2024-01-23 13:51:06 2156

原创 React 组件生命周期

componentDidMount(组件挂载)------ 一般在这个钩子中做一些初始化的工作,比如:开启定时器,发送网络请求,订阅消息。componentWillUnmount(组件销毁) ------ 一般在这个钩子中做一些收尾的工作,比如:关闭定时器,取消订阅消息。3. Unmounting(卸载阶段)------ 销毁一个组件,销毁前暴露出一个事件,让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时,不会对父组件产生副作用的情况下,父组件不会进行更新,即不会触发父组件的生命周期。

2023-12-18 11:11:35 1413

原创 nvm切换node版本

在实际开发过程中,由于不同项目对node版本要求不一样,为解决node版本不兼容的问题,我们可以使用 NVM (NodeJS Version Management) 这个node版本管理工具,通过它可以根据项目来切换不同版本的node,来满足项目开发需要。

2023-11-07 10:24:18 1196

原创 React 函数式组件和类式组件区别

React 中组件主要分为函数式组件和类式组件两种类型。

2023-10-07 16:35:48 760 2

原创 vue 重写数组的七个方法

因为Vue的响应式是通过 Object.defineProperty()实现的,这个api没办法监听数组长度的变化,也就没办法监听数组的新增。说明:vue只重写了这7个方法,使用其它数组方法不会主动触发试图更新,例如 concat、slice 等,如果需要触发更新,我们可以使用Vue.set() 或 this.$set() 方法手动触发更新。另外,Vue3处理响应数据使用了Proxy,系统会自动捕获这些操作,并在数据变化时触发视图更新,所以不需要重写数组方法。

2023-08-15 16:56:34 1615 1

原创 git 常用命令有哪些

项目存在三种短期分支 :功能分支(feature branch) 补丁分支(hotfix branch) 预发分支(release branch)Git 是我们开发工作中使用频率极高的工具,下面总结下他的基本指令有哪些,顺便温习一下。虽然是主分支和分支,却是平级关系,develop可以理解为开发库,master为生产库。一般项目中长存2个分支: 主分支(master) 和开发分支(develp)五、切换(checkout)分支。四、分支(branch)操作。六、克隆(clone)分支。

2023-08-02 16:28:36 1996

原创 什么是事件循环 Event Loop

事件循环(eventLoop)是单线程的JavaScript在处理异步事件时进行的一种循环过程,具体来讲,对于异步事件它会先加入到事件队列中挂起,等主线程空闲时会去执行事件队列(Event Queue)中的事件。如此反复循环。事件循环的设计使得 JavaScript 可以在单线程下处理异步操作,避免了阻塞的情况,保证了程序的响应性和流畅性。我们在日常使用电脑中,我们可能会一边听歌、一边写代码、一边看网页。这些应用中都会在操作系统中开启一个进程或多个进程,不同的应用开启的进程是不一样的。

2023-07-13 18:21:38 674

原创 canvas 基本用法

Canvas 是 HTML5 新增的元素,它就像一块幕布,可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。

2023-07-05 19:11:54 3029

原创 原生js常用方法有哪些?

如今框架横行,但原生JS学习反而变少了,框架虽然方便了,但掌握原生JS才是最基础的,本文分享了一些提供工作效率的原生JS方法,希望对你有所帮助。

2023-07-04 16:38:19 436

原创 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 1153

原创 前端安全问题及解决方案

随着互联网的高速发展,信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域,在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。

2023-06-29 15:34:03 1309

原创 JS 事件委托

JavaScript事件委托(Event delegation)又叫事件代理,是一种在父元素上监听事件,然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托,可以避免为每个子元素都绑定事件处理程序,提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上,然后通过事件冒泡捕获到子元素的事件触发。这样,无论子元素是现有的还是动态生成的,它们的事件都会被父元素捕获并处理。

2023-06-27 17:18:45 3154

原创 什么是 CSR,SSR,SSG 渲染

CSR(Client-Side Rendering)是指将网页的内容生成和渲染都放在客户端(即浏览器)完成的一种方式。在CSR中,初始的HTML文档中通常只包含基本的骨架和一些静态资源链接,如CSS和JavaScript文件。然后,浏览器会下载这些文件,并在客户端解析和执行JavaScript代码,动态地获取数据,并使用数据来生成和渲染页面的内容。CSR通常依赖于前端框架(如React、Angular、Vue.js)来处理数据获取和页面渲染。

2023-06-26 10:29:47 2230 1

原创 HTML5 新增的标签有哪些

①.语义元素:HTML5引入了一些新的语义元素,如、、、、 等,使开发者可以更清晰地定义页面结构,提高可读性和可访问性。是最新的html标准,拥有新的语义、图形以及多媒体元素,简化web应用程序,专为丰富的web内容而设计的,简称“H5”。⑥.改进的表单控件:HTML5引入了一些新的表单元素和属性,如日期选择器、输入验证、进度条、颜色选择器等,使开发者能够更轻松地创建交互性更强的表单。

2023-06-25 15:03:54 2143

原创 FormData 介绍和使用

FormData 是 JavaScript 中用于处理表单数据的接口。它提供了一种简单的方式来构建和发送表单数据,表单数据以键值对的形式向服务器发送,这个过程是浏览器自动完成的。但是有时候,我们希望通过脚本完成这个过程,构造或编辑表单的键值对,然后通过脚本发送给服务器。浏览器原生提供了 FormData 对象来完成这项工作。

2023-06-20 11:30:04 2578

原创 js数据类型有哪些

数据类型是计算机语言的基础知识,数据类型广泛用于变量、函数参数、表达式、函数返回值等场合。JavaScript 规定了八种数据类型:未定义 (Undefined),空 (Null),数字 (Number),字符串 (String),布尔值 (Boolean),符号 (Symbol),任意大整数 (BigInt),对象 (Object)。其中,这八大数据类型又分成两大类:基本数据类型和引用数据类型。

2023-06-13 15:37:43 4487 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 1090

原创 什么是浅拷贝和深拷贝

浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。选择使用深拷贝还是浅拷贝取决于具体的需求和场景。如果需要创建独立的对象、避免副作用,并确保修改副本不会影响原始对象,则应使用深拷贝。

2023-06-06 22:15:00 886

原创 for、map、forEach、filter 之间的区别

方法是否修改原始数组返回值是否需要回调函数是否可以中断循环for可以无返回值是是map否新数组是否forEach否无返回值是否filter否过滤后的新数组是否。

2023-06-05 23:00:00 2266

原创 什么是DOM和BOM?

DOM 全称是 Document Object Model,也就是文档对象模型。提供操作页面元素的方法和属性,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型,当浏览器加载一个Web页面时,它会创建这个页面的模型,称为DOM树。DOM树主要由4类主要节点组成:文档节点,元素节点,属性节点,文本节点。①.文档节点:在树的顶端是文档节点,它呈现整个页面。②.元素节点:需要访问DOM树时,需要从查找元素开始。

2023-06-01 22:30:00 17614

原创 div水平垂直居中的方式有哪些?

工作中经常涉及到盒子水平垂直居中,分别有哪些方式,现在盘点一下?

2023-05-27 23:30:00 416

原创 原生js实现文件下载

文件下载是前端开发常见的开发需求,本文以vue框架为例介绍两种下载方式,一个是网络文件下载,一个是本地文件下载,具体实现如下,如需体验,可点击底部demo链接。

2023-05-22 10:40:52 4167

原创 watch 和 computed 区别和使用场景

computed 计算属性适合根据 data 里的属性,来做一些简单的计算并返回结果,例如数组的排序、筛选等等,它的结果会缓存起来,只有 data 中的属性发生变化时才会重新计算,其它情况会直接返回计算结果,以提高效率。计算属性可以像 data 属性一样直接在 html 模板中使用。watch 适合在 javascript 中监听 data 属性的变化,并根据变化做一些耗时的操作或者发送远程 API 请求。watch 中的方法一般没有返回值,而是直接修改 data 中的属性。

2023-05-09 22:15:00 1973

原创 什么是重绘和重排

重绘:当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。重排:当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。局部范围重排:用局部布局来解释这种现象:把一个dom的宽高之类的几何信息定死,然后在dom内部触发重排,就只会重新渲染该dom内部的元素,而不会影响到外界。浏览器解析渲染机制如下:1.解析HTML,生成DOM树,解析CSS,生成CSSOM树。

2023-05-08 22:30:00 4081

原创 js 常用工具类封装

工作中经常会对输入内容进行校验,比如:是否是手机号,是否是身份证号码,是否包含特殊字符,当前环境是否是手机端等。因为这些用的比较高频,每个需要用到的项目都需要拷贝一份到所需项目中,比较繁琐,不易于维护,所以就打算封装了一个工具类,并发布到npm仓库,项目中只需npm进行安装就可以使用。此外也封装了一些常用的函数,例如://可以快速获取当前时间输出的格式。// 传入一个对象,可以把对象转换成参数拼接在url链接上//?

2023-04-23 14:18:25 746

原创 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 1242 9

原创 HTTP常用请求头和响应头有哪些?

超文本传输协议( Hypertext Transfer Protocol ,HTTP)的请求和响应消息中,协议头部分的那些组件。用来准确描述正在获取的资源、服务器或者客户端的行为,定义了HTTP事务中的具体操作参数。客户端请求(Request)或服务器响应(Response)时传递的,位请求或响应的第一行,HTTP消息体(请求或响应的内容)是其后传输。

2023-04-20 11:25:37 6448

原创 什么是强缓存和协商缓存

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。

2023-03-30 20:43:55 572

原创 js 原型与原型链

对象的作用在于,当访问一个对象的属性或方法时,如果该对象内部不存在这个属性,那么就会从它的 __proto__ 属性所指向的(原型)对象中寻找(原型也是对象,也有它自己的原型),如果原型对象中也找不到,就会继续在该原型对象的原型对象中找,以此类推,直到找到属性或方法为止,或者查找到顶层原型对象 null,就结束查找,返回 undefined。在 JavaScript 中的对象中都有一个 __proto__ 属性,从上图可以看出一个对象指向另一个对象,即指向相对应的对象的原型对象。

2023-03-27 14:19:48 633

原创 为什么CSS选择器是从右向左匹配的

CSS规则下(比如.box span),会形成一条符合规则的索引树,树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。

2023-03-17 20:22:59 416

原创 js中的new()到底做了些什么

通过 new 函数名 来实例化对象的函数叫构造函数。构造函数与普通函数并没有太大差异,为了区分我们将函数名首字母大写的函数作为构造函数,主要作用就是构造函数通过new关键字创建对象为初始化的对象添加属性和方法。对象字面量写法的缺点是,每创建一个新的对象都需要写出完整的定义语句,不便于创建大量相同类型的对象,不利于使用继承等高级特性。②.为步骤 1 新创建的对象添加属性 __proto__,将该属性链接至构造函数的原型对象。new 表达式是配合构造函数使用的,通过 new 一个构造函数去继承构造函数的属性。

2023-03-16 21:15:00 666

原创 如何发布自己的npm包

npm是随同nodejs一起安装的javascript包管理工具,能解决nodejs代码部署上的很多问题,常见的使用场景有以下几种:①.允许用户从npm服务器下载别人编写的第三方包到本地使用。②.允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。③.允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。

2023-03-13 20:30:00 1469

原创 vue单向数据流

单向数据流是通过 props 将 Model 层的变化通知到 View 层进行修改。双向数据绑定是通过 Object.defineProperty()的 set() 和 get() 方法来实现的,当某一方发生变化的时候,另一方就会收到更新值的提醒,从而实现数据同步变化。

2023-02-13 21:15:00 1043

原创 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 463

原创 vue组件传值方式有哪些

Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化。本文针对组件之间传值做详细讲解。Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一。而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题。在 vue 中组件之间的关系有:父子,兄弟,隔代。针对不同的关系,怎么实现数据传递,下面展开说明。如上图所示:父子关系:A与B,A与C,B与D,C与E。

2023-01-13 21:15:00 1422 1

原创 什么是LRU算法

什么是LRU算法

2022-11-13 11:30:00 27535 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 1026 2

原创 浏览器输入url到页面展示过程

浏览器输入url到页面展示过程

2022-11-04 23:15:00 1496

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除