- 博客(107)
- 收藏
- 关注
RSS订阅原创 修改组件库源码来获得符合需求的组件
项目需求多种多样，会出现开源组件库中的组件无法满足需求或者有 bug 的情况，可以区分以下情况，进行相应的处理。
2024-05-22 20:32:16
779
原创 webpack热更新原理详解
Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新代码变动的模块，是 Webpack 内置的最有用的功能之一。
2024-04-19 08:54:56
1676
原创 从输入url到页面显示中间发生了什么
浏览器输入 URL 到页面渲染的整个过程是由浏览器各个进程之间的配合完成。在开始正式流程之前，我们快速说明下几个主要进程的职责。浏览器主进程: 主要负责用户交互（包括地址栏，书签栏，前进后退按钮等部分）、子进程管理和文件储存等功能。网络进程：处理网络请求，从网上获取数据。渲染进程：主要职责是负责一个 tab 内关于网页呈现的所有事情：把从网络下载的 HTML、CSS、JavaScript、图片等资源解析为可以显示和交互的页面。他会为每一个tab页面创建一个渲染进程。
2024-02-21 19:03:37
957
原创 WebSocket基础详解
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。
2024-02-06 19:50:58
1640
原创 ES6 Proxy详解
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
2024-02-01 19:28:17
1691
原创 Object.defineProperty详解
Object.defineProperty() 允许精确地添加或修改对象上的属性。通过赋值添加的普通属性会在枚举属性时（例如 for...in、Object.keys() 等）出现，它们的值可以被更改，属性可以被删除。当对象中不存在指定的属性时，Object.defineProperty() 将根据描述符创建一个新的属性。描述符中的字段可以省略，省略的字段将使用默认值。当修改已存在的属性时，操作的结果取决于当前属性的配置，可能会成功、不执行任何操作，或抛出一个 TypeError 异常。
2024-01-17 15:29:23
3593
原创 CSS transition详解
CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。
2024-01-04 20:01:36
1232
原创 跨域解决方案详解
我们通常所说的跨域是由浏览器同源策略限制的一类请求场景。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。同源是指 “协议+域名(子域名+主域名)+端口” 三者相同，即便两个不同的域名指向同一个ip地址，也非同源。不同域之间相互请求资源，都算作跨域。
2023-12-13 20:28:22
1033
原创 Nginx常用概念讲解
Nginx 是一款轻量级的 Web 服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。实际上，他并不是一台真正意义上的物理机服务器，并不是主观上真实存在的实体，它是运行在某一台服务器（电脑）上的软件。
2023-11-27 22:21:21
1334
原创 浏览器缓存控制讲解
在你访问互联网中的任何资源其所产生的任何链路中的每一个节点几乎都会进行缓存，整个缓存体系和细节十分复杂。比如浏览器缓存，服务器缓存，代理服务器缓存，CDN缓存等。但是缓存又十分重要，不可缺少，为什么这么说呢？
2023-11-24 22:21:40
1347
原创 http实现文件分片下载
HTTP分片异步下载是一种下载文件的技术，它允许将一个大文件分成多个小块（分片），然后分别下载这些分片，从而实现更快速、稳定的下载过程。的话，客户端就会记录了之前已经看过的视频文件范围，网络恢复之后，则向服务器发送读取剩余Range的请求，服务端只需要发送客户端请求的那部分内容，而不用整个视频文件发送回客户端，以此节省网络带宽，带来更流畅的用户体验。比如当你正在看大片时，网络断了，你需要继续看的时候，文件服务器不支持断点的话，则你需要重新等待下载这个大片，才能继续观看。），那么表示该服务器支持分片请求。
2023-09-06 23:54:12
2436
原创 touch手势事件及功能封装
在现代Web开发中，移动设备的普及使得触摸屏交互成为了一个重要的方面。JavaScript中的Touch事件为开发者提供了处理触摸屏输入的能力，从而实现更丰富的用户体验。本文将深入探讨JavaScript中的Touch事件，涵盖基本概念、事件类型、事件属性以及实际应用。
2023-08-17 22:35:28
455
原创 js操作剪贴板讲解
在操作系统级别，剪贴板允许应用程序之间传输数据。在现代web应用中，提供复制、剪切、粘贴等与剪贴板交互的功能已成为标配，极大的提高了用户的便利性。但由于涉及到跨域和隐私问题，浏览器对这种交互进行了严格的限制。例如，当前浏览的网站不应能够无授权地访问从另一来源的网站复制的内容。这样可以防止恶意网站读取或修改剪贴板内容，确保用户数据的安全。
2023-08-15 22:07:33
3056
原创 详解如何计算字符中的字节数
关于字符编码，有三个核心概念：字符集(Character Set)，可以说是一个抽象概念，字符的合集。码位(Code Point),也叫码点，将抽象的字符集中的每一个字符映射到一个整数。Unicode(即UCS-2或UCS-4)就是属于这一层的概念。它完全是数学的抽象，和计算机没有任何关系。字符编码(Encoding)，按照某种编码规则用二进制来表示一个字符。UTF-8，UTF-16等都是属于这一层的概念。
2023-08-10 20:20:30
1815
原创 前端安全XSS和CSRF讲解
XSS全称Cross Site Scripting，名为跨站脚本攻击。为啥不是单词第一个字母组合CSS，大概率与样式名称css进行区分。
2023-08-07 20:17:08
1656
原创 渲染中回流与重绘讲解
浏览器渲染过程如下：解析HTML，生成DOM树(DOM Tree)，解析CSS，生成CSS树(Style Rules)。将DOM树和CSS树结合，生成渲染树(Render Tree)根据生成的渲染树，进行回流(Layout或称呼为Reflow)，得到节点的几何信息（位置，大小）。根据渲染树以及回流得到的几何信息，得到节点的绝对像素，进行重绘(Painting或称呼为Repaint )。将像素发送给GPU，在页面上进行展示(Display)。
2023-08-02 17:52:34
270
原创 package.json版本与lock机制讲解
我们在搭建项目的时候，通过 npm 安装的依赖模块时，package.json文件中依赖的版本号前面会带符号 ^，有时候我们看别人的项目时也可能会看版本前带符号 ~ ，或者什么也不带，其中会有什么区别呢？
2023-08-02 14:35:27
658
原创 Git rebase和merge区别详解
在 Git 中整合来自不同分支的修改主要有两种方法：merge 以及 rebase(变基)，本文主要讲解rebase用法。
2023-08-01 22:20:47
792
原创 Git回滚详解
在利用git协作过程中，经常需要进行代码的撤销操作，这个行为可能发生在工作区，暂存区或者仓库区（或版本库）。我们先讨论在工作区与暂存区发生的撤销行为，这里会有两个命令提供帮助，`git restore`与git checkout。后面我们会讨论在仓库区发生的撤销行为，这里同样会有两个命令提供帮助，`git reset`与git revert。
2023-05-19 00:17:14
6050
1
原创 Git 储藏(stash)详解
在平常的工作中，当我们在单独拉取的功能分支中进行开发时，遇到线上出现bug需要进行紧急修复，我们需要切换到主分支，进行代码的修复。但是我们直接在本地切换到主分支，则会提示当前文件的改动会丢失。
2023-04-25 22:24:45
20407
1
原创 Git cherry-pick详解
对于多分支的代码库，将代码从一个分支引入到另一个分支是常见需求。这时分两种情况。一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）。另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 cherry-pick。
2023-04-24 23:15:12
5015
原创 公共资源包发布流程详解
当公司各个系统都需要使用特定的业务模块时，这时候将代码抽离，发布到 npm 上，供下载安装使用，是个比较好的方案。将开源项目发布到 npm 上，完全没有任何问题。但对于公司私有模块就不大行了，所有人都能下载，也就意味着代码被泄漏了。
2023-04-23 23:53:38
550
原创 Git命令播报详版
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 分支实际上是指向更改快照的指针。有人把 Git 的分支模型称为必杀技特性，而正是因为它，将 Git 从版本控制系统家族里区分出来。
2023-04-20 22:17:21
1229
原创 图片像素分析与功能实现
图片是由一个个像素点组成。每一个像素点包含四个值,决定了渲染出来的状态。这四个值为rgba(red, green, blue, alpha)。前三个值是 红绿蓝,值的大小范围从 0到255 ,或者从 0%到100% 之间。第四个值 alpha,规定了色彩的透明度,它的范围为0到1之间。其中0代表完全透明,1代表完全可见。通过getImageData方法得到的alpha值范围为0~255
2023-03-22 21:10:15
1225
原创 Web文件上传总结
文章目录指定文件类型多文件选择自定义样式通过 click() 方法使用隐藏的 file input 元素使用 label 元素来触发一个隐藏的 file input 元素基本上传方式访问文件传统的 DOM 选择器访问一个已经被选择的文件通过 change 事件访问被选择的文件动态添加change监听器Ajax 上传监测上传进度分割上传拖拽上传文件上传是 Web 开发常见需求，上传文件需要用到文件输入框。指定文件类型一个以英文句号（“.”）开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.p
2023-03-15 09:57:33
614
原创 RESTful API讲解
REST这个词，是 Roy Thomas Fielding 在他2000年的博士论文中提出的。Fielding将他对互联网软件的架构原则，定名为REST，即Representational State Transfer的缩写。我对这个词组的翻译是"表现层状态转化"。如果一个架构符合REST原则，就称它为RESTful架构。注意，RESTful 是一种软件架构风格，而不是标准。
2022-03-06 20:49:07
576
原创 js实现小程序wx.arrayBufferToBase64方法
微信小程序提供了wx.arrayBufferToBase64方法，但很不幸，这个方法在基础库版本 2.4.0 起已废弃，已不推荐使用。虽然目前即使小程序基础库版本为2.22.0，也能正常使用。但是不确定未来哪天，在更新的基础库中，该方法被删除。这样就会带来项目上的隐患。所以需要自己去实现arrayBuffer转为base64这一过程。......
2022-03-03 23:18:02
5245
8
原创 探究fontsize与字体height关系
对于笔者用的ProximaNova这个字体，设置font-size为30px，实际上高度为42px。为什么文字的高度不等于字号的高度？这得从字体设计说起。为此装了一个FontForge和RoboFont软件设计一款自己的字体。
2022-02-17 23:48:23
4865
原创 探究px像素与pt磅,mm毫米之间的换算
像素作为图像的一种尺寸，只存在于电脑中，如同RGB色彩模式一样只存在于电脑中。像素是一种虚拟的单位，现实生活中是没有像素这个单位的。在现实中我们看到一个人，你能说他有多少像素高吗？不能，通常我们会说他有1.82米高，或者182厘米等。所用的都是传统长度单位。传统长度单位就是指毫米、厘米、分米、米、公里、光年等单位。
2022-02-13 23:15:45
2875
2
原创 CSS3 transform中的Matrix(矩阵)讲解
CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图；3D变换则是4*4的矩阵。
2022-01-23 23:31:40
10178
3
原创 CSS3 transition优化动态内容加载后的高度变化
内容的展示能够通过自然的动画过渡呈现，会增强用户体验。而动态内容呈现主要变化的关键因素就是——高度，而过渡效果最佳利器是CSS3 transition
2022-01-11 23:32:15
1084
原创 JSON.stringify()深入了解
JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
2022-01-11 21:23:19
4443
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人