- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 使用ChatGPT帮助我们编码的10种场景
本博主工作中主要进行前端方向的项目开发，本文将直接聚焦在代码编写相关的具体场景上。通过日常工作实践中发现的能够使用 ChatGPT 辅助我们编码的示例，一一列举了大概10种编码总做中可能出现的情形。
2023-04-04 14:30:40
7975
原创 在项目开发中统计代码行数的6种方式
六种不同的方式，都能方便的统计代码行数，但也各有特点。如find命令行适用不同系统，而PowerShell在Windows系统下可用；jscpd统计代码行数和重复度。安装了Git工具的，可以使用git log统计代码的修改行数、不同人员和时间段的各种提交修改等。代码编辑器，有各种插件工具，除了统计代码行数，还能区分文件格式、注释行数、空行，也比较直观方便。自己实现一个统计工具，能够实现更多的功能，并进行定制化处理，或者集成到构建工具中等等，满足更多需求。
2023-03-27 12:46:29
59714
2
原创 微信小程序图片裁剪功能的实现
本文详细讲述了在小程序中实现一个图片裁剪功能的过程，可以看出和在浏览器Web端的实现差别并不大。在核心的图片适配、裁剪框绘制与缩放事件处理上，基本两边可以通用，在小程序中的实现逻辑可以完整在移到web浏览器上，反之亦然。区别可能只只在于图片的加载和保存上，可以使用小程序提供的多种内置接口方法，能教方便的完成。
2023-03-08 18:20:09
10551
1
原创 如何开发一个chrome浏览器插件
chrome插件又称扩展程序，主要基于前端技术开发，用于扩展浏览器功能的一类软件程序，可以附加在chrome浏览器上运行。本文将通过开发一个书签整理的简单插件，介绍如何实现一个chrome插件。
2022-11-11 11:06:54
4776
原创 将页面元素隐藏的10种方法
在Web开发中，隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标，我们通常会采用多种方法，最常用的例如CSS的display属性，只要设置为node即可隐藏元素。本文将通过对当前所有可用的隐藏元素的方法做了一个总结，大概有10种方法可以使用。
2023-05-05 09:52:38
5006
原创 nvm安装使用详解，附gnvm介绍
最近工作中，再次遇到了需要处理Node.js多版本管理的事情，由于在windows系统下开发，于是使用了nvm来做版本管理。本文将通过更加详实的内容，再次细致地介绍下nvm和gnvm两种版本管理工具的使用和一些基础原理。
2023-04-27 15:01:04
4179
原创 使用jscpd统计项目中的代码重复度
jscpd工具的使用是非常简单的，只需要少许配置就能输出比较直观的代码数据，方便我们统计代码的重复度。知道了项目中的重复代码，给我们优化代码结构，提炼代码逻辑，增强代码的可维护性、可扩展性和可复用性方面，都能带来比较多的好处，研发效率的提高也是随之而来的。
2023-03-21 14:33:18
3296
原创 使用 clip-path 绘制多种图形
clip-path是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。它的基本取值可以有圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)，使用它们可以绘制各种不同的形状。
2023-03-02 12:17:46
6573
原创 nodejs升级引起的构建错误：0308010C:digital envelope routines::unsupported
本文详细描述了nodejs升级后引起的前端老旧项目中构建工具生成hash报错的问题(0308010C:digital envelope routines::unsupported)，以及给出的几种解决方案。这几种解决方案各自都存在一些不完美的地方，但都能解决当前构建错误，可以根据自己的实际需求来确定使用哪种方案。
2023-02-22 13:45:00
11599
11
原创 URL和URLSearchParams对象使用详解
URL，称为统一资源定位器，指互联网上能找到资源定位的字符串。在一般语境中，又称网络地址或链接，当我们需要访问某个网页就需要输入对应的网址字符串，而这个网址就是URL。本文将详细介绍前端开发中遇到的两个API，URL和URLSearchParams对象的相关知识点，以及如何使用它们。
2023-02-20 16:08:02
9691
原创 微信小程序 图片上传与内容安全审核
微信小程序图片上传功能实现起来非常简单，但图片上传功能会在小程序官方抽查中遇到内容安全审核的警告风险，需要对图片和文本内容进行检测，防止违法违规的内容在小程序中使用或广泛传播，本文介绍基本的图片上传以及内容安全检测中的问题。
2023-02-10 10:19:37
4145
3
原创 JS图片对象转换函数(File\DataURL\ObjectURL\Image\Canvas)
前端开发中图片类对象，常会在 File、Image、Canvas 、DataURL(Base64)、ObjectURL(BlobURL)、Blob、ImageBitmap之间展开。本文将提炼出前端图像文件操作中存在的各个对象之间的转换方法，而通过不同的形式加载不同的图像资源，有助于我们展示图片或者处理图像数据。
2023-02-07 11:10:36
2617
原创 CSS中的颜色值与颜色属性
本文介绍CSS中颜色的5种取值类型，以及CSS中的各种颜色属性，并会顺带介绍颜色模型相关的知识。这块内容对于我们写出更好的CSS代码也能带来重要的帮助，是前端开发中需要熟悉的知识。
2023-02-03 11:49:33
2089
原创 在git提交规范中使用husky与lint-staged
在前端项目开发中，规范git提交信息，也是经常使用的手段，本文将介绍husky与lint-staged等工具，使用好它们，将有助于我们在项目开发中的git规范和团队协作。
2023-02-01 14:15:32
5261
1
原创 Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap
前端处理图片数据，有几个常用的API，如Image、ImageData、ImageBitmap等。这些对象可以为我们操作图片带来较大帮助，方便我们更好的利用JavaScript来加载图像资源，并控制图像像素点，进行一些处理操作。
2023-01-16 10:06:50
14099
原创 Web前端实现一个图片放大镜
基本完成了一个可以非固定尺寸、动态加载图片的放大镜功能。动态加载图片，可以不用考虑图片的像素宽高，任意尺寸的图片都可以完整放大，缩略小图和预览大图也可以是同一张图片。
2022-12-06 10:30:33
3608
原创 JavaScript数组(四)：判断数组相等的4种方法
如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用===(或==) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。
2022-12-02 12:33:36
29816
原创 JavaScript数组的特别之处(三)：类数组对象详解
本文描述了什么是类数组对象，它的主要特点，以及如何创建一个类数组对象，还有将类数组对象转换成真正数组的几种方式，接着也介绍了前端开发中可能会遇到的已有的各种类数组对象。事实上，绝大部分的类数组对象是不需要专门去转换为数组的，直接遍历操作即可，但深入掌握这些类数组的知识，也是前端开发中不可少的。
2022-11-30 09:51:02
728
原创 JavaScript数组的特别之处(二)：构造函数、空元素等
我们需要知道的是，数组的索引虽然可以像对象一样，当做键名字符串使用，但它们还是有所区别的。数组是按照数字的顺序进行排列的集合，而对象的属性名则是无序的。
2022-11-28 09:45:21
484
原创 JavaScript中数组的特殊之处(一)
数组作为基础的语法知识，大部分人都已经非常熟悉了。本文将不会介绍它的基础语法和用法，而是从JavaScript中数组的一些特殊之处入手，通过这些少有的特性介绍，更加加深我们对数组知识的理解。
2022-11-25 08:16:08
494
原创 web前端文件上传可选择的4种方式
本文总结了前端web当前能够添加读取文件的4种方式，如果我们需要开发一个比较完善的图片上传组件，那么可能需要点击、拖拽、粘贴多种功能，这就需要使用到前三种文件读取方式。文件系统访问API鉴于兼容性还有待提升，我们可以作为后备的方案使用。有了文件读取的方式，那我们要完成上传功能，就可以使用HTML表单提交，或者FormData对象上传了。
2022-11-23 10:00:31
13035
原创 前端JS获取图片文件的真实格式
浏览器支持的图片格式中，除了svg以外，其他几种位图格式，都可以较好的通过读取图像二进制数据的方式判断出图片文件的真实格式，能够防止文件伪造绕开判断，造成不必要的异常等问题。
2022-11-17 16:21:22
4315
1
原创 图片基础知识与浏览器支持的图片格式
图片作为互联网上的一种媒体展示资源，在主流浏览器上已经支持的格式，目前一般有7种：jpg、png、gif、svg、bmp、ico、webp。了解一些图片基础知识，对我们的开发工作也会有比较大的帮助。
2022-11-15 13:35:18
2671
2
原创 Nuxtjs实现服务端渲染和静态化站点
Nuxt.js是一个基于Vue的增加了node服务的通用框架，本文就是介绍使用它如何实现可以解决Vue项目的服务端渲染，以及生成纯静态化的站点。
2022-11-09 10:29:27
2325
原创 JavaScript中的Error错误对象与自定义错误类型
Error是JavaScript中最原始的错误对象，作为各种异常的基础对象，还有多个衍生的具体的错误类型，也可以自定义错误类型对象。
2022-11-04 10:08:25
4015
原创 一步步实现前端图片裁剪功能
本文基于前端JS和H5，从图片上传加载、裁剪框的展示、拖动缩放到canvas图片裁剪、显示新图片等，实现一个完整的图片裁剪功能
2022-11-02 14:44:53
5206
1
原创 详解前端二进制：Blob、File、FileReader、ArrayBuffer、TypeArray、DataView
本文将介绍一些前端二进制数据处理相关的API知识，如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。
2022-10-31 17:34:13
5311
原创 CSS伪元素详解以及伪元素与伪类的区别
CSS伪元素常常被误解为伪类，主要就在于他们的语法比较相似，功能上也都是对选择器的扩展，相似程度太高，所以容易被混淆。一般用于在元素的内容前后插入新的内容，或者改变首字母、首行的样式等。
2022-10-28 09:23:52
741
原创 CSS伪类使用解读
CSS伪类是应用于选择器的关键字，用来改变被选择元素的特殊状态下的样式。伪类类似于普通类的用法，是对选择器的一种扩展，增强选择器的功能。
2022-10-24 16:19:41
1300
原创 node和npm如何升级版本
node和npm在某种意义上，早已成为当前前端开发中不可或缺的工具。本文将介绍如何进行node和npm的版本升级和指定等等操作。
2022-10-17 18:50:40
9089
原创 CSS中At-rules(@import、@media、@keyframes)常用技巧使用总结
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。
2022-10-16 15:41:18
1154
原创 docker 安装启动 nginx 修改配置资源容器端口
这时候可以查看对应的文件信息，但这里不能使用vi查看文件内容，因为是新的终端命令环境，vi无法使用。是目录挂载，将本地目录映射到容器目录，后面直接修改本地目录下的内容，会同步到容器内。，在重启nginx容器，此时，nginx服务会失效，无法有效访问站点。
2022-08-23 14:13:55
3424
原创 转义字符是什么？前端开发中需要了解的
转义字符从字面上讲，就是能够转变字符原本的意义，得到新的字符。常用在特殊字符的显示以及特定的编码环境中。除了反斜杠以外，在前端开发中，还有其他几种转义字符，也是较常见的，本文将对这些做一个总结。
2022-08-19 14:24:23
6408
原创 深入理解Base64字符串编码知识
Base64是一种索引编码，每个字符都对应一个索引，具体的关系图，如下：这也是名称中64的由来。将二进制数据转为字符串(ASCII码)，方便数据传输。浏览器能直接展示Base64编码图片，减少请求。
2022-08-15 12:10:59
1894
原创 前端需要搞懂的字符编码ASCII、Unicode、UTF8、UTF16等
在前端开发中，Javascript程序是使用Unicode字符集，Javascript源码文本通常是基于UTF-8编码。但js代码中的字符串类型是UTF-16编码的，这也是为什么会碰到api接口返回字符串在前端出现乱码，因为多数服务都使用utf-8编码，前后编码方式不一致。...
2022-06-22 09:45:37
3466
原创 使用CSS自定义属性实现页面的主题切换
CSS自定义属性(Custom Properties)，在一个css选择器内部进行定义，使用两个短横连接线 `--` 作为开头命名的名称即被称为自定义属性。
2022-04-29 10:18:05
2772
1
原创 详解JSON.parse 和 JSON.stringify
JSON格式，(简写JavaScript Object Notation)，是一种用于数据交换的文本格式，书写简单。基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。在ES5中，增加了一个JSON对象，专门用
2022-01-25 09:16:00
16885
原创 搞懂JavaScript中的进制与进制转换
进制介绍JavaScript 中提供的进制表示方法有四种：十进制、二进制、十六进制、八进制。对于数值字面量，主要使用不同的前缀来区分：十进制(Decimal)：取值数字 0-9；不用前缀。二进制(Binary)：取值数字 0 和 1 ；前缀 0b 或 0B。十六进制(Hexadecimal)：取值数字 0-9 和 a-f ；前缀 0x 或 0X。八进制(Octal)：取值数字 0-7 ；前缀 0o 或 0O (ES6规定)。需要注意的是，非严格模式下浏览器支持：如果有前缀0并且后
2022-01-23 11:19:17
1536
原创 如何快速实现一个颜色选择器
目录颜色模型HSV 与 HSL 的区别实现选择器色相计算色相柱的滑块位置饱和度和明亮度计算这两个值hsv转rgb透明度基于HSL的颜色选择器使用canvas设置面板在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。针对这个问题，第一想法，自然是H5提供了input color，可以实现。但不出意外的，IE并不支持。而且，chrome的实现方式和firefox也不太一样，见下图：左图是chrome的，浏览器自身实现的一个颜色选择器控件
2022-01-21 10:12:50
2587
原创 禁止触摸屏触控板手指缩放，需要这样处理
要禁止触控板的缩放行为，需要处理鼠标滚轮事件：wheel。要禁止触摸屏的手指缩放，可以使用如下的CSS和JS两种方法。
2021-12-31 15:40:22
3794
1
nodejs实现统计项目代码行数的代码资源
2023-04-06
微信小程序 图片裁剪功能 (完整源码)
2023-03-01
Web开发图片放大镜功能
2022-12-07
前端JS获取图片文件的真实格式信息
2022-11-17
JS前端图片裁剪功能(完整详细代码)
2022-11-02
颜色选择器 前端JS实现(完整代码)
2022-01-21
颜色选择器 前端JS实现(完整代码)
2022-01-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人