- 博客(52)
- 收藏
- 关注
RSS订阅原创 Vite的介绍与使用
无往不利的webpack迎来了新的对手Vite,Vite 是一种新型的前端构建工具，由 Vue.js 核心团队成员尤雨溪开发。它凭借其独特的设计理念和高效的性能，在前端开发领域迅速崭露头角。目前VIte的生态越来越丰富，很多新项目开始采用Vite作为打包构建工具。
2025-04-28 10:56:19
409
原创 前端项目从开发到部署全流程介绍
每次代码推送到仓库时，GitLab CI/CD会自动触发构建、测试和部署流程，确保项目的更新能够快速、准确地发布到生产环境
2024-12-02 18:07:34
2332
原创 获取iframe内部的DOM元素方式（跨域与不跨域）
这里使用contentDocument属性来获取iframe的document对象。由于contentDocument在某些浏览器中可能不被支持，所以使用||操作符来兼容，当contentDocument不可用时，使用contentWindow.document来获取
2024-11-30 09:00:00
3738
原创 滑块自动验证实现
另外，还需要获取滑块组件的宽度,直接选中元素看他的宽度就可以。（0 到 1 之间）计算出一个经过缓动处理的值，使得动画在开始和结束时速度较慢，中间速度较快。手动滑动滑块通常不是匀速，一般开始慢，中间快，结尾慢。因此，我们利用0.5x^3来实现模拟前半段运动，利用0.5（（x - 2）^3 + 2）来模拟后半段运动。另外，需要注意有些登录框放在iframe里，获取滑块DOM的时候需要先拿到iframe,然后从iframe里面获取滑块，例如。），这是通过将元素的中心位置作为鼠标的起始位置来计算的。
2024-11-29 09:00:00
2870
4
原创 405错误（Not Allowed) 的原因及处理方式
在前端开发中，405 状态码表示 “方法不被允许（Method Not Allowed）”。这意味着客户端（通常是浏览器）试图使用一种服务器不允许的 HTTP 方法来访问某个资源。例如，服务器可能只允许使用 GET 方法来获取某个 HTML 文件，但客户端却使用了 POST 方法进行访问，此时就会出现 405 错误。
2024-11-28 09:00:00
42356
1
原创 前端开发设计模式——外观模式
外观模式（Facade Pattern）是一种软件设计模式，它为子系统中的一组接口提供了一个统一的高层接口，这个接口使得子系统更容易使用。在前端开发中，外观模式用于简化复杂的操作或者系统，将多个底层的功能封装在一个简单的接口后面，使得其他部分的代码（比如业务逻辑代码或者其他组件）可以更容易地调用这些功能，而不需要了解底层复杂的细节。
2024-11-27 15:35:47
2000
原创 利用D3.js实现数据可视化的简单示例
svgx// 添加折线d3.line()：创建一个折线生成器。：定义折线在 x 方向上的坐标获取方式。对于每个数据点，通过xScale比例尺将月份数据映射到 x 坐标，并加上 25 是为了使折线稍微偏离坐标轴一点，让数据点在坐标轴刻度的中间位置。：定义折线在 y 方向上的坐标获取方式。通过yScale比例尺将销售金额数据映射到 y 坐标。：在 SVG 元素中添加一个元素，用于绘制折线。：将salesData数组绑定到元素上。：设置填充颜色为无。
2024-11-22 18:35:29
2001
原创 前端数据可视化思路及实现案例
首先通过echarts.init方法初始化一个 Echarts 图表实例，传入图表容器的 DOM 元素。然后定义了图表的配置对象option，包括标题、提示框、坐标轴和数据系列等设置。xAxis的data属性设置为销售数据中每个月的名称数组，yAxis为数值轴，series中定义了一个折线图数据系列，其data为销售金额数组。
2024-11-21 11:28:48
2122
原创 前端数据可视化库介绍Echarts、D3.js、Plotly、Matplotlib
Echarts 是一个由百度开源的数据可视化库，它提供了直观、生动、可交互、可个性化定制的数据可视化图表。Echarts 支持多种图表类型，包括折线图、柱状图、饼图、散点图、地图等，能够满足不同场景下的数据展示需求。
2024-11-14 13:39:37
1763
原创 前端开发设计模式——责任链模式
责任链模式是一种行为设计模式，它允许多个对象依次处理同一个请求。每个对象都有机会处理请求，如果一个对象不能处理请求，它会将请求传递给下一个对象，直到有一个对象能够处理请求或者请求到达链的末尾包含一个指向下一个处理者的引用和一个处理请求的抽象方法。抽象方法通常接受一个请求参数，并返回一个处理结果或者将请求传递给下一个处理者。
2024-11-13 20:15:38
1688
原创 堆排序，学习笔记
在最大堆中，每个节点的值都大于或等于它的子节点的值；在最小堆中，每个节点的值都小于或等于它的子节点的值。例如，对于一个最大堆，根节点的值是整个堆中的最大值。当我们要进行排序时，我们可以利用这个性质，每次将堆顶元素（最大值）取出，然后重新调整堆，使得剩余元素仍然保持堆的性质，如此反复，直到堆为空，就可以得到一个有序的序列。如果它小于子节点的值，就将它和最大的子节点交换位置，然后继续向下调整，直到满足堆的性质。重复上述交换和调整堆的步骤，每次将当前堆中的最大值放到数组的已排序部分的末尾，直到整个数组都被排序。
2024-11-11 12:02:36
392
原创 数据流图，学习笔记
数据流图（Data Flow Diagram，DFD）是一种用于描述系统数据流程的图形化工具。它可以帮助开发人员更好地理解系统的业务流程和数据流动，从而更好地进行系统设计和开发。
2024-11-10 08:00:00
3955
原创 数据库设计——E-R 图，学习笔记
E-R 图（Entity-Relationship Diagram，实体 - 联系图）是一种用于数据库设计的可视化工具，它可以帮助数据库设计人员更好地理解和设计数据库系统。
2024-11-09 09:00:00
2869
原创 UML统一建模语言，学习笔记
目录一、UML 的概述二、UML 的主要图形类型1. 类图2. 对象图3. 用例图4. 序列图5. 协作图6. 状态图7. 活动图三、UML 的关系1. 继承2. 实现3. 关联4. 聚合5. 组合四、UML 的应用场景1. 软件设计系统2. 需求分析3. 项目文档化4. 团队协作
2024-11-08 16:36:45
1128
原创 前端开发设计模式——原型模式
可以定义一个构造函数，并在构造函数的原型上添加属性和方法，然后通过new关键字创建对象，这些对象将继承构造函数原型上的属性和方法。这里通过自定义构造函数创建了对象，同样实现了原型模式的功能。
2024-11-05 09:00:00
2348
原创 前端项目配置文件的各种配置
通过配置文件，可以根据项目的特定需求来定制构建和运行过程。不同的项目可能有不同的构建目标、环境设置和优化需求，配置文件允许开发者灵活地调整这些参数。例如，一个大型企业级应用可能需要更严格的代码压缩和优化，而一个小型个人项目可能更注重开发效率和快速迭代。配置文件可以让开发者根据项目的实际情况进行调整。
2024-11-04 11:37:01
1303
原创 javaScript 和 Java 的语法区别（有前端基础）
在 ES6 中引入了类的概念，但本质上是基于原型的面向对象编程。可以使用class关键字定义类，通过构造函数和原型链来实现继承。是纯粹的面向对象编程语言，使用class关键字定义类，通过类的继承和接口实现多态性。Java 的面向对象编程更加严格和规范。
2024-11-02 09:30:00
1060
原创 js、vue、angular中的函数声明方式及特点
/ 函数体函数声明会被提升，这意味着可以在函数声明之前调用它。在编译阶段，JavaScript 引擎会先读取函数声明，并将其添加到执行环境中，使得函数在整个作用域内都可以被访问。这种方式使得代码结构更清晰，易于阅读和维护，适合定义一些具有明确功能的独立函数。
2024-11-01 11:05:24
1516
原创 jQuery选择器
在这个HTML结构中，大部分元素是动态生成的，但元素结构是固定的。下方第一层的id是我们定义的，不会动态变化，能够稳定获取。开发时遇到些不太好获取的元素时，需要去查获取元素的方式，由此总结了一下jQuery选择器，便于开发中快速获取DOM元素。
2024-10-31 15:39:18
1336
原创 前端性能优化——缓存优化
在前端代码中，可以添加自定义的日志记录，记录资源的加载情况、缓存的命中情况等。通过分析这些日志，可以了解缓存的使用效果，发现潜在的问题并进行优化。
2024-10-30 16:19:01
1932
原创 前端开发设计模式——观察者模式
观察者模式是一种软件设计模式，它定义了对象之间的一种一对多的依赖关系。当一个对象（被观察对象，也称为主题或可观察对象）的状态发生改变时，所有依赖于它的对象（观察者）都会得到通知并自动更新。
2024-10-29 10:39:18
2293
原创 前端性能优化——代码优化
前端性能优化可以从多个方面下手，例如加载性能优化、渲染性能优化、代码优化、缓存优化、性能监测和优化等方面下手，下面针对代码优化分享一下优化思路。
2024-10-28 13:29:48
1173
原创 前端性能优化——渲染性能优化
前端性能优化可以从多个方面下手，例如加载性能优化、渲染性能优化、代码优化、缓存优化、性能监测和优化等方面下手，下面针对渲染性能优化分享一下优化思路。
2024-10-26 09:30:00
962
原创 前端性能优化——加载性能优化
Clean-CSS 是一个 CSS 压缩工具，可以去除 CSS 代码中的注释、空格和换行符，合并相同的样式规则等，从而减小文件大小。ImageOptim 是一个 Mac 平台上的图片压缩工具，可以自动压缩图片文件，去除不必要的元数据等，从而减小文件大小。TinyPNG 是一个在线的图片压缩工具，可以将 PNG 和 JPEG 图片压缩到较小的文件大小，同时保持较好的图片质量。对于一些小的图片，可以使用 Data URI 的方式将图片内联到 HTML 或 CSS 文件中，避免额外的图片请求。
2024-10-25 17:28:26
1661
原创 前端开发设计模式——工厂模式
工厂模式是一种创建对象的设计模式。它提供了一种创建对象的方式，将对象的创建和使用分离。就像是一个工厂，负责生产各种产品（对象），使用者只需要从工厂获取产品，而不需要关心产品是如何生产出来的。
2024-10-22 10:21:43
2308
原创 PDF.js的使用及其跨域问题解决
PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库，用于在浏览器中显示 PDF 文件，无需插件支持。它可以将 PDF 文件解析为可在浏览器中渲染的页面，实现 PDF 文件的预览功能。
2024-10-18 12:03:57
3622
原创 iframe的使用详解
在某些情况下，iframe可以用于展示来自不同域的内容，而无需进行复杂的跨域请求处理。例如，一些数据分析平台可以通过iframe将生成的报表嵌入到客户的企业管理系统中，实现数据的可视化展示。
2024-10-17 17:44:13
1046
原创 前端开发设计模式——命令模式
在前端开发中，命令模式是一种行为设计模式，它将请求封装成一个对象，从而使你可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作
2024-10-15 10:48:53
1426
原创 前端开发设计模式——状态模式
状态模式允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。将状态的行为封装在独立的状态类中，使得状态的转换更加清晰、可维护。减少了条件判断语句，使代码更加简洁、易于理解。实现了状态与行为的解耦，使得状态的变化不会影响到对象的其他部分。
2024-10-15 09:58:36
2274
原创 前端继承：原理、实现方式与应用场景
前端继承是指在面向对象编程中，一个对象可以继承另一个对象的属性和方法。在前端领域，通常是指 JavaScript 中的继承机制，通过这种机制，可以创建具有相似功能的对象，避免重复编写代码。
2024-10-12 13:17:50
1273
原创 LESS、SASS 与 SCSS 预处理器详解
SASS（Syntactically Awesome Style Sheets）是一种强大的 CSS 预处理器，它提供了更丰富的语法和功能，帮助开发者更高效地编写样式代码。SCSS 是 SASS 的一种语法格式，它是 “Sassy CSS” 的缩写。它采用了与 CSS 非常相似的语法，同时继承了 SASS 的强大功能。
2024-10-11 11:51:06
1547
原创 用source Map还原被打包编译的源代码
Source Map 是一种将压缩或编译后的代码映射回原始源代码的文件。它允许在开发工具中调试生产环境中的代码，就好像在调试原始源代码一样。这对于定位错误和优化性能非常有帮助，能极大提升调试效率。
2024-10-10 17:22:35
1449
原创 前端开发设计模式——装饰器模式
装饰器模式是一种结构型设计模式，它允许在不改变对象结构的情况下，动态地给一个对象添加一些额外的功能。这个模式通过创建装饰类来包装原始对象，装饰类与原始对象实现相同的接口，从而可以在运行时根据需要组合不同的装饰类来扩展对象的功能。
2024-10-09 14:08:42
2098
原创 前端开发设计模式——组合模式
组合模式是一种结构型设计模式，它将对象组合成树形结构以表示 “部分 - 整体” 的关系。在前端开发中，这种模式允许将单个的 UI 元素（如按钮、文本框等叶节点）和由多个元素组成的复合元素（如包含多个子元素的面板等组合对象）以统一的方式进行处理。创建一个抽象类或接口，定义叶节点和组合对象共有的方法。// 抽象组件类// 抽象的操作方法，例如渲染render() {
2024-10-08 11:58:30
2333
原创 前端开发设计模式——享元模式
享元模式是一种结构型设计模式，旨在通过共享对象来减少内存使用并提高性能。在前端开发中，它用于处理大量细粒度对象的情况，将对象的状态划分为内部状态（可共享）和外部状态（不可共享）。
2024-10-02 10:00:00
2219
原创 前端开发设计模式——代理模式
代理模式是一种设计模式，它为其他对象提供一种代理以控制对这个对象的访问。在前端中，代理模式可以用于拦截对目标对象的访问，并在访问前后执行一些额外的操作，比如缓存数据、验证权限、记录日志等。
2024-10-01 10:00:00
1302
原创 前端开发设计模式——策略模式
策略模式是一种行为设计模式，它定义了一系列的算法，并将每个算法封装起来，使它们可以相互替换。在前端开发中，策略模式允许根据不同的情况动态地选择和应用不同的算法或行为，而无需修改使用这些算法的主体代码。首先，定义一个策略接口，该接口声明了所有具体策略类必须实现的方法。上下文类持有一个策略对象的引用，并通过该引用调用策略对象的方法。上下文类可以在运行时设置不同的策略对象。
2024-09-29 09:41:52
1934
前端断点调试攻略-原生 JS、模块化打包及 MVVM 框架项目
2024-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人