- 博客(213)
- 资源 (2)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 设计模式学习之代理模式
设计模式系列往期文章代理模式是结构型设计模式的一种，如下图所示——这种设计模式通过提供一个代理供调用方使用，代理控制着对于原对象的访问， 并允许在将请求提交给对象前后进行一些处理。
2023-07-01 18:59:56
560
原创 设计模式学习之模板方法模式
模板方法模式是行为型设计模式的一种，它在基类中定义了一个执行框架（类似于pipeline），允许子类覆写该框架中的子方法，使得子类可以在不改变算法结构的情况下重写算法的特定步骤。从这个描述中就能大概理解为什么叫模板方法模式了——基类中定义的执行框架就类似于一个模板，而子类可以通过重新实现其中的方法对模板中的功能进行自定义。
2023-07-01 18:06:08
776
原创 设计模式学习之观察者模式
这是设计模式系列的第7篇文章，在这之前我们已经介绍过了设计模式中最常使用的工厂模式和策略模式，本文将详细介绍一下观察者模式。
2023-06-29 00:12:42
262
原创 设计模式学习之策略模式和简单工厂模式的对比
在这之前我们已经介绍过了策略模式和简单工厂模式，也清楚策略模式属于行为模式，简单工厂模式属于创建型模式，但是在实际使用的过程中经常把它们混淆在一起，有些分不清楚，本文对比一下这两种设计模式。
2023-06-28 23:58:52
462
原创 设计模式学习之抽象工厂模式
什么是抽象工厂模式呢，我们可以把工厂方法模式看做是极端情况下的抽象工厂模式——即工厂类只生产一类产品，如果每个工厂类能够生产多类产品，这样的工厂模式就是抽象工厂模式。
2023-06-26 23:55:44
625
原创 设计模式学习之工厂方法模式
在上一篇文章中我们学习了简单工厂模式——这是工厂模式中最简单的一种模式，通过工厂类提供的方法创建类（可以类比为产品），将对象创建的具体逻辑屏蔽了起来。以下图为例，我们需要开发一个跨平台的UI工具库，该工具库至少能够在Windows应用和网页端运行，很明显同一个组件（如Button）在这两个平台的实现代码是不一样的，在这种情况下使用简单工厂模式进行实现就有些麻烦了，因为现在有两个维度：平台和组件，那么应该怎么做呢？之所以可以这么写，是因为产品数量比较少并且工厂产出的数据都是同一个维度的。
2023-06-26 00:17:14
837
原创 three.js进阶之动画系统
一般情况下，我们很少会使用three.js的动画系统去手动创建动画——因为这真的很麻烦，更高效便捷的做法还是直接在建模软件如Blender中完成动画的制作，然后在three.js中进行播放。不过，学习了动画系统对我们还是会有帮助的，下面进入正文。创建动画涉及三个概念：关键帧Keyframes，关键帧轨迹和动画剪辑。
2023-04-29 17:36:01
2188
1
原创 React从入门到入土系列3-使用React构建你的应用
这是我自己系统整理的React系列博客，主要参考2023年3月开放的最新版本内容，欢迎你阅读本系列内容，希望能有所收货。
2023-04-09 22:57:17
410
原创 React从入门到入土系列2-实战：井字游戏
这是我自己系统整理的React系列博客，主要参考2023年3开放的最新版本react官网内容，欢迎你阅读本系列内容，希望能有所收货。
2023-03-22 23:14:40
375
原创 React从入门到入土系列1-快速上手
这是我自己系统整理的React系列博客，主要参考2023年3开放的最新版本内容，欢迎你阅读本系列内容，希望能有所收货。
2023-03-22 21:43:50
924
原创 Mock.js介绍及使用总结
Mock.js用于生成随机的模拟数据，拦截 Ajax 请求，返回伪造的数据。因此在前端开发阶段就可以通过这个工具进行沉浸式开发，实现数据自产自销，降低和后端的沟通成本，实现真正意义上的前后端开发解耦合。相信我，使用这个工具，一定能够提高你的工作效率。那么Mock.js有哪些特点呢？前后端分离：让前端攻城师独立于后端进行开发。增加单元测试的真实性：通过随机数据，模拟各种场景。开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单：符合直觉的接口。数据类型丰富。
2023-03-05 23:37:11
804
原创 GLSL shader学习系列1-Hello World
这段代码用于描述绘制的精度，默认情况下设置为mediump即可，后面再使用到的时候再深入学习。你甚至可以直接将这段代码删除，程序仍能正常运行。后即可在屏幕中看到预览效果，一张全红的图片。至此，恭喜你已经完成了Hello world程序的编写，是不是非常简单？下面对代码做个介绍。函数你就应该知道，这也是程序的入口。是一种数据类型，其中分别存储RGB和透明度数据。是GLSL内置的变量，用输出最终的颜色。这是着色器的主要代码，看到。然后在VSCode中按下。
2023-02-27 22:43:52
552
原创 Java系列之SPI机制
使用Java SPI机制的优势是实现解耦，使得第三方服务模块的装配控制的逻辑与调用者的业务代码分离，而不是耦合在一起。应用程序可以根据实际业务情况启用框架扩展或替换框架组件。
2023-02-20 22:14:16
214
原创 React系列之Redux
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux 和react没有必然关系，redux可以应用于各种框架，包括jquery，甚至js都可以使用redux，只不过redux和react更加搭配。redux也推出了专门应用于react的react-redux。
2023-02-20 22:12:19
439
原创 Java系列之Predicate
Java8引入了许多函数式接口（Functional Interface），Predicate（断言）就是其中一个，它的主要作用可以简单描述为：向其传入一个对象（可以理解为参数），将得到一个布尔值作为输出。
2023-02-16 20:23:54
5636
原创 three.js进阶之实现3D模型粒子化效果
参考腾讯UP2017网站的效果：https://up.qq.com/act/a20170301pre/index.html。
2023-01-05 19:18:08
911
原创 CSS高级篇之纯CSS绘制iPhone界面
https://www.zubach.com/blog/how-i-made-an-iphone-4-in-css
2022-10-31 16:24:38
358
原创 UML图系列之序列图
下图是一个完整的序列图示例序列图包是一个二维结构图，多个参与交互的对象在水平方向从左到右展开，每个对象都有一条竖向的虚线（生命线），序列图中的数据传递将沿着生命线从上向下进行。关于序列图的详细介绍可以参考这篇博客，如果你想快速上手序列图，我建议看这个视频学习一下。返回消息使用虚线。...
2022-07-19 21:00:53
3043
1
原创 前端CSS篇之手写一个横向滚动的消息通知组件
如果让你自己写一个横向滚动的消息通知组件，你会怎么写呢？网上能找到很多相关的代码，不过大部分实现都不够完美——无法根据消息的长度自动计算滚动所需时间，因此每次改变通知后就得手动调整css动画的时间。我在这里提供一个用vue实现的横向滚动的消息通知组件，该组件能够根据消息长度自动计算单次消息滚动所需时间，并且可以自定义部分属性如：内容显示框的宽度、颜色、滚动速度等。.........
2022-06-06 00:02:50
1737
1
原创 前端CSS篇之手写一个正在加载中转圈动画
前端CSS篇之手写一个正在加载中转圈动画。提供一个Google风格的加载中动画，使用SVG+CSS实现，无需javascript。
2022-06-05 23:29:23
1185
原创 前端中级篇之给localStorage和sessionStorage设置失效时间
BOM提供了localStorage和sessionStorage用于在浏览器中保存页面数据，区别在于：使用localStorage存储的数据将会一一直存在（除非使用removeItem或者清除缓存），而sessionStorage的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失效了。并且，这两种web存储方式都不支持设置过期时间，那如果业务中有需求需要设置过期...
2022-06-02 23:06:43
5330
原创 前端提升篇之flex或grid布局实现多列均分布局
提供一个使用弹性盒布局的多列均分布局终极解决方案，能够实现下图的效果：其特点有：列数可控子元素的宽度相同列和列之间有空隙，左右两边对齐（没有空隙）子元素按照从左到右、从上到下的顺序排布父元素使用flex布局：.container { width: 100%; height: auto; border: solid 1px gray; /* 使用flex布局，设置gap*/ display: flex; flex-wrap: wrap;
2022-05-11 12:19:48
6038
原创 Java学习之Spring核心机制IoC和AOP
Java学习之Spring IoC和AOP1 IoC常规情况下，对象都是开发者手动创建的，使用IoC开发者不再需要创建对象，而是由IoC容器根据需求自动创建项目所需的对象。IoC（Inverse of Control:控制反转） 是一种设计思想，而不是一个具体的技术实现。IoC 的思想就是将原本在程序中手动创建对象的控制权，交由 Spring 框架来管理。不过， IoC 并非 Spring 特有，在其他语言中也有应用。1.1 不适用IoC创建对象举个例子，现在有一个DataConfig类：@Dat
2022-05-09 00:46:17
471
原创 Git使用总结之分支管理与合并冲突
这是Git系列的第二篇文章，历史相关文章：Linux管理github项目笔记Git使用总结之分支管理与合并冲突1 分支管理一般我们直接使用git clone [代码仓]将远端的代码仓克隆到本地，如果远端代码仓中除了master分支外还有其他的分支，而你需要在其他分支的基础上进行开发（如dev分支），有两种方法：可以直接使用git clone -b [分支名] [代码仓]直接拉取对应的分支到本地先执行git clone [代码仓]将所有分支都克隆下来，然后执行git checkout [分支
2022-05-08 20:39:50
528
原创 Java学习系列之抽象类和接口的区别和联系
在Java中被abstract关键字修饰的类称为抽象类，被abstract关键字修饰的方法称为抽象方法，抽象方法只有方法的声明，没有方法体。}关于抽象类的命名，《阿里的 Java 开发手册》上有强调，“抽象类命名要使用 Abstract 或 Base 开头”。比如说，AbstractPlayer 抽象类中定义了一个抽象方法 play()，表明所有运动员都可以从事某项运动，但需要对应子类去扩展实现，表明篮球运动员打篮球，足球运动员踢足球。
2022-05-03 20:43:59
794
原创 Typescript学习系列2-基础类型
本篇内容偏基础，参考自Typescript中文版handbook。Typescript学习系列2-基础类型Typescript支持与Javascript几乎相同的数据类型，此外还提供了枚举类型方便我们使用。1 布尔值只有两种取值true/false，在js和ts中都叫做boolean：let isFinished: boolean = false;2 数字和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面
2022-05-02 23:02:46
172
原创 Typescript学习系列1-快速上手
本文基于Typescript中文版handbook整理而成。Typescript学习系列1-快速上手1 安装Typescript有两种主要的方式安装Typescript：通过npm安装，或者通过Visual Studio的TypeScript插件，这里我使用npm安装的方式，对于前端开发人员来书更方便。使用npm安装typescript：npm install typescript -g2 编写第一个Typescript代码在编辑器中新建一个helloWorld.ts文件，在其中编写如下代码
2022-05-02 22:26:55
362
原创 设计模式学习之策略模式在前端的应用
策略模式是23种基本设计模式中的对象行为型模式，在我的设计模式学习之策略模式一文中已经对其进行了简单的介绍，不过使用的是Java语言编写示例代码。本文将介绍这一模式在前端中的应用，我将使用js代码进行举例说明。1 使用JS实现策略模式策略模式本身的思想比较简单，就是在我们有众多实现方法可以选择的时候，如何封装代码以符合优秀代码的基本原则如封闭原则等。在Java中需要很多个类来实现，有策略接口类、其多个实现类、上下文Context类和调用类等等，在Js中就没有这么复杂了，看下面的例子：假如现在你需要完成
2022-05-02 15:18:38
722
原创 设计模式学习之策略模式
1 策略模式的功能策略模式的功能是把具体的算法实现，从具体的业务处理里面独立出来，实现成为单独的算法类，从而形成一系列的算法，并让这些算法可以相互替换。策略模式的重心不是如何实现算法，而是如何组织和调用这些算法，从而让程序的结构更灵活，具有更好的维护性和扩展性。1.1 实现一个计算器以菜鸟教程中的计算器示例代码为例，使用if-else实现和策略模式两种实现方式进行对比。本文的代码均使用Java语言编写。1.1.1 使用if-else实现package dp.strategy.example4;
2022-05-02 14:48:35
917
原创 纯CSS实现内容切换入门篇
如果不能使用js及其扩展库，你能实现一个带标签的可切换内容panel吗？仅仅使用CSS和HTML就可以做到哦~ 您可以先观看一下这个视频感受一下。其实主要是借助了单选框raido的CSS选择器:checked（:checked 选择器匹配每个选中的输入元素，仅适用于单选按钮或复选框）。效果实现代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title><
2022-04-24 21:14:49
748
2
原创 纯CSS实现内容切换进阶篇
使用纯CSS也能作出element-ui中的panel组件效果，而且经过精心设计还可以作出嵌套的panel效果，如下图所示：贴出源码，欢迎批评指正：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { widt
2022-04-24 19:57:34
532
js实现简易计时器
2018-12-29
Ubuntu16.04安装mysql的时候遇到如下问题，求解？
2018-04-27
农夫过河问题用深度优先遍历和广度优先遍历？
2016-03-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人