- 博客(53)
- 收藏
- 关注
RSS订阅
原创 【封装UI组件库系列】搭建项目及准备工作
【封装UI组件库系列】文章会持续更新，将带着大家从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》最后使用自己封装的组件库。如果文中出现有瑕疵的地方各位通过评论或者私信联系我，我们一起进步！从零开始封装UI组件库完整篇。
2023-11-20 22:05:24
1895
23
原创 基于postCSS手写postcss-px-to-vewiport插件实现移动端适配
目前前端实现移动端适配方案千千万，眼花缭乱各有有缺，但目前来说postcss-px-to-vewiport是一种非常合适的实现方案，是一个基于postCss开发的插件，其原理就是将项目中的px单位转换为vw(视口宽度)。
2024-04-22 17:33:11
1074
原创 postCss基本介绍
我个人的理解postCss就是css界的babel，它提供一个过程，而在这个过程中，去干什么就是你自己的事情，所以很多人写插件，去做代码转换，或者兼容等等。babel 提供过程 @babel/preset-env es6-es5AST ->-> generate(生成)postCss提供过程`css`AST -> transform -> generate(生成)两者都是提供一个过程，只是一个是处理javaScript，一个是处理css。这个过程中AST。
2024-04-22 16:09:11
818
原创 JS浮点数精度问题及解决方案
因为浮点数的计算存在round-off问题，也就是浮点数不能够进行精确的计算。并且：不仅JavaScript，所有遵循IEEE 754规范的语言都是如此；在JavaScript中，所有的Number都是以64-bit的双精度浮点数存储的；双精度的浮点数在这64位上划分为3段，而这3段也就确定了一个浮点数的值，64bit的划分是“1-11-52”的模式，具体来说：就是1位最高位（最左边那一位）表示符号位，0表示正，1表示负；11位表示指数部分；52
2023-12-04 16:45:51
1197
6
原创 函数柯里化
柯里化（currying）又称部分求值。一个柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。
2023-12-03 17:08:13
274
7
原创 JavaScript递归
使用递归时需要注意如下事项：递归函数的优点是定义简单，逻辑清晰。理论上，所有的递归函数都可以用循环的方式来实现。使用递归时需要注意防止栈溢出。在计算机中，函数调用是通过栈（stack）这种数据结构实现的，每当一个函数调用，栈就会加一层，每当函数返回，栈就会减一层。由于栈的大小不是无限的，所以递归调用的次数过多，会导致栈溢出。
2023-12-03 16:52:01
243
1
原创 阻止事件默认行为
如何阻止默认事件？方法一：全支持 event.preventDefault();// 方法二：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。event.returnValue = false;// 方法三：不建议滥用，jQuery 中可以同时阻止冒泡和默认事件return false;
2023-12-03 16:39:01
478
原创 DOM 事件的传播机制
事件委托，又被称之为事件代理。在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面整体的运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。对事件处理程序过多问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就
2023-12-02 18:07:45
158
3
原创 DOM 事件的注册和移除
注册事件的方式常见的有3种方式：HTML元素中注册的事件：这种方式又被称之为行内事件监听器。这是在浏览器中处理事件最原始的方法。DOM0级方式注册事件：这种方式是首先取到要为其绑定事件的元素节点对象，然后给这些节点对象的事件处理属性赋值一个函数。
2023-12-02 14:16:41
227
原创 垃圾回收与内存泄漏
程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。也就是说，不再用到的内存，如果没有及时释放，就叫做内存泄漏（JavaScript。
2023-12-02 09:04:29
133
原创 作用域和作用域链
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。var inVariable = "内层变量2";outFun2();从上面的例子可以体会到作用域的概念，变量inVariable在全局作用域没有声明，所以在全局作用域下取值会报错。作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。ES6之前JavaScript。
2023-12-01 19:17:06
927
6
原创 执行栈和执行上下文
什么是执行上下文？简而言之，执行上下文是评估和执行JavaScript代码的环境的抽象概念。每当Javascript代码在运行的时候，它都是在执行上下文中运行。
2023-12-01 11:20:47
101
2
原创 原型和原型链
在设计JavaScript时，借鉴了Self和Smalltalk这两门基于原型的语言。之所以选择基于原型的对象系统，是因为一开始就没有打算在JavaScript中加入类的概念，因为JavaScript的设计初衷就是为非专业的开发人员（例如网页设计者）提供一个方便的工具。由于大部分网页设计者都没有任何的编程背景，所以在设计JavaScript时也是尽可能使其简单、易学。这因为如此，JavaScript。
2023-11-30 20:26:21
233
4
原创 JavaScript中数据类型的转换
JavaScript是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。var x = y?1 : 'a';上面代码中，变量x到底是数值还是字符串，取决于另一个变量y的值。y为true时，x是一个数值；y为false时，x是一个字符串。这意味着，x的类型没法在编译阶段就知道，必须等到运行时才能知道。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的。如果运算符发现，运算子的类型与预期不符，就会自动转换类型。
2023-11-30 16:44:14
324
4
原创 JavaScript包装类型
在ES中，数据的分类分为基本数据类型和引用类型。按照最新ES标准定义，基本数据类型（primitive value）包括undefined、null、boolean、number、symbol、string。引用类型包括Object、Array、Date、RegExp等。
2023-11-29 19:59:53
339
11
原创 JavaScript值和引用
引用一个复杂对象时，使用它的名称（即变量或对象属性）通过内存中的引用地址获取该对象值。直接赋值，就是指将简单值赋值给变量，而引用赋值是指将一个复杂值的引用赋值给变量，这个引用指向堆区实际存在的数据。复杂值支持动态对象属性，因为我们可以定义对象，然后创建引用，再更新对象，并且所有指向该对象的变量都会获得更新。基本数据类型的值又被称之为原始值或简单值，而引用数据类型的值又被称之为复杂值或引用值。基本数据类型的值又被称之为原始值或简单值，而引用数据类型的值又被称之为复杂值或引用值。中，对象就是一个引用值。
2023-11-29 17:35:23
118
3
原创 【封装UI组件库系列】封装Button图标组件
上一篇我们已经封装了第一个Icon组件，接下来我们就开始封装Button组件。分析封装组件所需支持的属性与事件。
2023-11-28 22:57:36
578
4
原创 【封装UI组件库系列】封装Icon图标组件
在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-uiAnt Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。
2023-11-23 22:03:34
879
15
原创 【封装UI组件库系列】全局样式的定义与重置
在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-uiAnt Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。
2023-11-21 21:53:19
482
16
原创 浏览器自动播放音视频-前端实现方案
在开发中可能有遇到这样的需求，当用户打开页面后，需要自动播放视频或音频，按理说那就打开页面时play()一下不就搞定了吗，但实际情况很明显不是，不然也没得这篇文章喽，要实现这个需求，我们得先了解一下浏览器自动播放策略。再给出相应解决方案。
2023-11-06 17:49:03
3812
11
原创 VSCode安装使用（含插件保姆级教程）
点击查看更多实用技巧及对于我们每一位软件工程师来说，都要有自己顺手的 IDE 开发工具，它就是我们的武器。一个好用的 IDE 不仅能提升我们的开发效率，还能让我们保持愉悦的心情，这样才是非常 Nice 的状态！技术。
2023-10-24 10:35:58
6584
14
原创 Vue项目中集成TinyMCE富文本编辑器(图片批量上传等)
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。因为项目原因，本文章是在Vue2中封装TinyMce富文本组件。
2023-10-20 15:58:52
3513
18
原创 Canvas--》使用Canvas完成基本绘图
Canvas是一个可以使用脚本 (通常为) 来绘制图形的元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。如上面效果示例就是使用 来实现示例，后续将一步步实现上面效果。Canvas 的默认大小为 300 像素 ×150 像素（宽 × 高，像素的单位是 px）。但是，可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。
2023-10-06 16:54:26
403
15
原创 项目上线部署--》服务器部署流程（二）安装Nginx、Node.js、MySQL
远程服务器安装Nginx、Node.js、MySQL详细操作教学
2023-09-18 06:30:00
416
17
原创 图片拖动验证效果(源码)
CSS Sprite，我们一般叫他雪碧图或精灵图，它是一种图像拼合技术。该方法是将小图标和背景图像合并到一张图片上，然后利用 css 的背景定位来显示需要显示的图片部分。我们通过设置 background-position 属性，来调整背景图的位置。
2023-09-16 16:42:57
318
7
原创 前端自适应瀑布流布局
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
2023-09-13 06:30:00
424
12
原创 项目上线部署--》网站运行机制
域名俗称网址，是由一串用点分隔的名字组成，用于标识互联网上的计算机。原本用于标识互联网上计算机使用的是 IP 地址，但是由于 IP 地址不便于记忆，所以人们便设计出来比较容易记忆的域名，然后通过 DNS 将域名和 IP 地址关联，这样人们便可以通过记忆域名直接访问到对应的计算机。
2023-09-11 19:34:20
242
7
原创 包管理工具--》发布一个自己的npm包
1.使用官方镜像源查看当前配置的镜像源：如果是使用的其他源，请改回官方源2.到npm官网注册一个账号，并完成邮箱认证官网可视化注册：命令行注册使用命令依次输入Username、Password、Email完成注册3.本地使用 npm cli 进行登录使用命令npm login登录使用命令npm whoami查看当前登录的账号使用命令npm logout注销4.创建工程根目录根文件夹名一般就用包名，命名的话先去npm官网搜一下，搜不到的话就可以用来命名自己的包。
2023-09-08 22:35:11
620
10
原创 包管理工具--》yarn的配置及使用
yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理过去，yarn 的出现极大的抢夺了 npm 的市场，甚至有人戏言，npm 只剩下一个 registry 了。依赖目录嵌套层次深：过去，npm 的依赖是嵌套的，这在 windows 系统上是一个极大的问题，由于众所周知的原因，windows 系统无法支持太深的目录下载速度慢。
2023-09-06 19:39:22
368
13
原创 包管理工具--》npm的配置及使用（二）
global有一个属性是process，该属性是一个对象，包含了当前运行node程序的计算机的很多信息，其中有一个信息是env，是一个对象，包含了计算机中所有的系统变量。如果允许版本增加，可以让依赖包的bug得以修复（补丁版本号），可以带来一些意外的惊喜（次版本号），但同样可能带来不确定的风险（新的bug）有的时候，我们希望：安装我的依赖包的时候，次版本号和补丁版本号是可以有提升的，但是主版本号不能变化。有的时候，我们又希望：安装我的依赖包的时候，只有补丁版本号可以提升，其他都不能提升。
2023-09-05 18:57:13
761
9
原创 包管理工具--》npm的配置及使用（一）
npm 的出现，弥补了 node 没有包管理器的缺陷，于是很快，node 在安装文件中内置了 npm，当开发者安装好 node 之后，就自动安装了 npm，不仅如此，node 环境还专门为 npm 提供了良好的支持，使用 npm 下载的包更加方便了。node 和 npm 是互相成就的，node 的出现让 npm 火了，npm 的火爆带动了大量的第三方库的发展，很多优秀的第三方库打包上传到了 npm，这些第三方库又为 node 带来了大量的用户。这些库使用 CommonJS 标准书写而成，非常容易使用。
2023-09-05 07:45:00
1121
7
原创 【JS案例】JS实现手风琴效果
因为有多个一级菜单，并且当一个一级菜单展开时，其他的需要收起，那么怎么知道每个菜单当前状态呢，我这里是使用自定义元素属性来实现：给设置status属性，定三个值：1.opened // 表示二级菜单打开状态2.playing // 表示正在打开或关闭状态3.closed // 表示二级菜单关闭状态两个相关方法：setAttribute(name,value) 设置元素属性值getAttribute(name) 获取元素属性值。
2023-08-29 22:08:46
1835
3
原创 【JS案例】滚动效果实现及简单动画函数抽离
实现效果可以看到到滚动到最后一条时，会重新返回第一条循环播放，这个时候其实就是scrollTop从某一个值变为0，会有个瞬间变化的效果，为了优化这一点，在初始化时，我们可以将第一个元素克隆到列表最后一个。实现滚动函数，每次的滚动区间比如从0到30，我们可以定义一个总的时间，及变化间隔，变化间隔越下，动画就越丝滑，也就是频繁但很小的改变scrollTop 的值。接下来就是让元素动起来，在这过程中为了让效果更加丝滑，需要用上动画，动画可以用CSS3写也可以用JS，我这里是选择用JS，动画的本质就是。
2023-08-27 15:17:35
369
原创 一篇文章带你彻底搞懂事件循环
事件循环可谓是考验前端基础功的必问题，在面试中也是频繁出现。不管是html，css还是js，其实都是在浏览器上运行，所以要说清楚事件循环，那浏览器是必不可少，接下来就从浏览器开始，一起谈谈事件循环吧。
2023-04-03 08:45:00
731
27
原创 WebSocket之socket.io的基本使用
使用WebSocket可以实现非常多有趣又实用的功能，后面再写一个在线聊天室巩固一下知识。推荐阅读【微信小程序&uniapp系列文章】【Vue实用插件及技巧系列文章】
2023-03-19 15:39:29
3875
3
原创 【高德地图WEB开发】 入门篇（地图/搜索/经纬度/缩放层级）
本篇文章是高德地图web开发入门篇，实现地图搜索等基本功能，后续会继续更新地图标记点、驾车、骑行、货车等单地点\多地点导航、公交路线、兴趣周边点、及其他地图功能开发文章，所有功能均使用js实现，这样在各个框架均可使用。
2023-03-05 16:02:49
2489
1
前端自适应瀑布流源码.zip
2023-09-12
JS实现图片放大镜功能文章资源下载
2023-09-03
JS实现积分抽奖图片素材及源码
2023-09-01
微信小程序地图导航实现
2023-12-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人