- 博客(143)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 探索算法在Web前端的意义与作用：优化性能与提升代码稳定性
在当今快节奏的Web开发环境中，算法扮演着至关重要的角色，对于前端开发者而言，深入了解算法不仅是一种挑战，更是提升技能水平的必要途径。让我们一起探讨算法在Web前端中的意义和作用。
2024-03-11 14:26:39
357
原创 【结构型设计模式】桥接模式
桥接模式（Bridge）：桥接模式是一种结构型设计模式，其目的是将抽象部分和实现部分分离，允许它们可以独立地变化。该模式通过创建一个桥接类，连接抽象和实现，使得它们可以独立地进行扩展和变化，而不会相互影响。桥接模式支持在多个维度上的变化，并提供了一种灵活的设计方法。桥接模式的参与者包括抽象部分（Abstraction）、扩展抽象部分（Refined Abstraction）、实现部分（Implementation）和扩展实现部分（Concrete Implementation）。
2023-07-02 11:02:34
351
原创 【结构型设计模式】装饰者模式
装饰者模式是一种允许在不修改现有对象的情况下，动态地向对象添加新的功能和行为的设计模式。它基于组合而非继承的原则，通过将一个对象与一个或多个装饰器进行组合来实现这一目的。使用装饰者模式的主要目的是提高代码的可重用性和可扩展性。通过将新的功能封装在装饰器中，我们可以将其应用到多个不同的对象上，并且可以轻松地添加或删除特定的功能。比如，假设你正在开发一个在线商店，你可能有一个名为 "Product" 的基本商品类，但是你需要在每个产品上添加额外的属性（例如颜色、尺寸、价格等）。使用装饰者模式，你可以创建
2023-04-22 13:05:51
296
1
原创 Printjs 打印样式丢失,字体无法更改的处理方法
Print.js 主要是为了帮助我们直接在浏览器中开发打印功能，这篇文章主要是介绍了Vue中使用Printjs插件实现打印功能,并出现的部分bug及样式丢失的问题,需要的朋友可以参考下。
2022-10-24 19:26:35
7142
1
原创 【前端知识总结系列】第03篇
本期系列是JavaScript的一些知识点总结，这是笔者对自己多年以来学习和使用的一些技术的巩固与复习。已经很久没有这样从头到尾的学习过了，这系列文章也是作为一个复习的过程的一些记录，若作者本人对此有理解错误的地方也请各位朋友帮忙指出，让我们一起来复习和巩固一些曾经的一些知识吧！学而不思则罔，思而不学则殆。下面正式开始，每篇文章10个知识点。一个拥有length属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。...
2022-07-20 15:59:33
385
原创 【前端知识总结系列】第02篇
本期系列是JavaScript的一些知识点总结，这是笔者对自己多年以来学习和使用的一些技术的巩固与复习。已经很久没有这样从头到尾的学习过了，这系列文章也是作为一个复习的过程的一些记录，若作者本人对此有理解错误的地方也请各位朋友帮忙指出，让我们一起来复习和巩固一些曾经的一些知识吧！学而不思则罔，思而不学则殆。下面正式开始，每篇文章10个知识点。......
2022-07-17 12:06:39
324
1
原创 解决vue-area-linkage 无法回显的bug
最近写的项目,前几天有一个需求是要写省市区联动选择，我们项目组的一个妹子上网搜罗了一遍之后发现了vue-area-linkage这个插件，应该是专门为vue准备的省市区插件。但是后面发现这插件有个数据无法回显的bug.将源码下载到本地跑了一遍,发现两个地方的代码没执行,导致默认值无法显示,就无法回显了.下面两段代码是已经修改过后的,1.移除 if (!this.isSetDefault && isArray(val) && val.length === this.level + 2) 此判断条件中的取反!
2022-06-26 19:28:21
788
1
原创 【JavaScript知识点总结】第01篇
本期系列是JavaScript的一些知识点总结，这是笔者对自己多年以来学习和使用的一些技术的巩固与复习。已经很久没有这样从头到尾的学习过了，这系列文章也是作为一个复习的过程的一些记录，若作者本人对此有理解错误的地方也请各位朋友帮忙指出，让我们一起来复习和巩固一些曾经的一些知识吧！学而不思则罔，思而不学则殆。下面正式开始，每篇文章10个知识点。js 一共有6种基本数据类型，分别是 undefined、null、boolean、number、string以及ES6新增的symbol类型。symbol类型代表创建
2022-06-11 12:03:12
269
1
原创 nestjs上线之后常见的一些bug及异常
写在前面最近在部署nestjs项目的时候发现的一些bug1.本地环境与服务器环境差异问题,可能某一些方法用不了2.打包编译之后的文件与本地开发的文件引用路径的异常.例如引用的某个模板会出现找不到的问题,这个情况一般是打包之后由于编译后的文件输出的文件夹不一样,以及TypeScript打包编译的时候不会对.ts文件 以外的其它文件进行copy,例如图片的.png,html模板等,这个需要额外注意.此文持续更新中,测试出现bug之后继续记录....
2022-03-23 18:32:42
1139
原创 续费域名涨价了?这里有域名续费优惠口令【非营销】
一、写在前面Hi，朋友们周末好！最近在收到阿里云的催缴费邮件了。然后我登录上去一看。咋域名还涨价了呢。以前不是才60多的吗？不过别怕，我有办法了。有域名的小伙伴可以接着往下看。二、使用优惠口令进行续费为了薅羊毛，我想了好多的办法，终于找到这个优惠口令：“商标优选即买即用”，在域名续费的页面，输入优惠口令即可便宜15个大洋。如图所示：能少一点，就赚一点。三、写在后面上面就是本期的全部内容了，你的域名续费了吗？有问题请留言或者@博主,谢谢支持o(￣︶￣)o~感谢您的阅读,如果此文章
2022-01-09 11:41:46
1206
原创 typeorm中最简单的事务使用【typeorm系列】
一、写在前面喜欢nestjs的小伙伴在开发后台接口的时候可能会遇到同时给2个或者以上的表写入数据的情况，那么万一其中的某一张表失败了，那其它的表又成功了。这样就会导致一个很严重的问题，数据的一致性与准确性异常了。很简单的一个例子，假如小明给小张转账10块钱，需要的操作如下：1、小明的账户需要减去10块钱。2、小张的账户需要加上10块钱。3、给小明的转账记录表里面写入一条转出数据。4、给小张的转账记录表里面写入一条转入数据。上述的简介，你能想到这样的四个步骤是怎么样操作的吗？本系列文章，迟来
2021-11-06 17:11:14
2615
1
原创 ③【结构型设计模式】代理模式
一、写在前面代理模式(Proxy)：由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介的作用。上述的简介，你能想到这个模式是怎么样的吗？本系列文章，迟来的更新。关注公众号“笔优站长”可阅读全部文章哟。二、场景实例 —— 跨域请求地址的更新变换假如有这样的一个场景，由于用户相册模块上传的照片量越来越大，导致服务器端需要将图片上传模块重新部署到另外一个域（可理解为另一台服务器）中，这样对于前端来说，用户上传图片的请求路径发生变化，指向其他服务器，这就导致跨域问
2021-09-25 14:37:14
779
5
原创 ②【结构型设计模式】适配器模式
一、写在前面适配器模式(Adapter)：将一个类(对象）的接口(方法或者属性）转化成另外一个接口，以满足用户需求，使类(对象）之间接口的不兼容问题通过适配器得以解决。上述的简介，你能想到这个模式是怎么样的吗？本系列文章上次更新是一个月前了，很抱歉，最近项目太忙了，我已经加了一个月的班了，月平均工时12.1个小时。回到家的时候基本上都是23点左右了，实在太累了。关注公众号“笔优站长”可阅读全部文章哟。二、场景实例 —— JQuery生活中的适配器可能直接说适配器，还是有朋友会出现一脸懵逼
2021-08-08 12:24:27
1433
22
原创 5分钟实现一个可拖拽矩形
一、写在前面写这个原因很简单，有这么一个需求如下：编写代码实现以下要求：画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。要求如下：整个矩形的最小大小为 5px * 5px，缩放到最小时不能发生移动；鼠标快速移动时移动和缩放效果要保持流畅。二、直接上代码还是按照步骤一步一步的来吧。首先是要创建一个矩形，然后再写逻辑，下面一个矩形就画好了。。。但是似乎屏幕上啥也没有。。 是的没宽高，所以就看不到了。别着急，继续画。<!DOCTYPE htm
2021-06-27 22:34:50
1163
9
原创 5分钟入门JavaScript队列(Queue)数据结构【JavaScript数据结构与算法系列】
本文目录一、什么是JavaScript队列数据结构二、创建一个JavaScript队列三、封装队列方法①向队列添加元素②检查队列是否为空③获取队列的长度④从队列移除元素⑤查看队列头元素⑥清空队列⑦创建toString方法五、使用Queue类四、本章小结五、写在后面一、什么是JavaScript队列数据结构在上一篇文章中，我们了解并学习了JavaScript栈数据结构，本章开始JavaScript的队列数据结，第一章先认识队列与怎么去封装一个队列。前面的文章里我们已经学习了栈。队列和栈非常类似，但是使用
2021-06-23 09:19:00
922
69
原创 5分钟教会学妹使用JavaScript栈解决问题(三)【JavaScript数据结构与算法系列】
本文目录一、用栈解决问题的领域二、从十进制到二进制三、进制转换算法四、本章小结五、写在后面一、用栈解决问题的领域在上一篇文章中，我们了解并学习了JavaScript使用不同的方法来定义栈数据结构，那么本章就是使用JavaScript的栈数据结构来解决一些问题的举例。栈的实际应用非常广泛。在回溯问题中，它可以存储访问过的任务或路径、撤销的操作(后面的章节会讲述如何应用这个例子)。Java和C#用栈来存储变量和方法调用，特别是处理递归算法时，有可能抛出一个栈溢出异常(后面的章节也会介绍)。既然我们已经了
2021-06-20 10:13:29
313
23
原创 震惊!5分钟封装JavaScript栈数据结构Stack类(二)【JavaScript数据结构与算法系列】
本文目录一、创建JavaScript栈结构Stack类二、封装基本功能与方法①向栈中插入元素②验证一个栈是否为空和它的大小③从栈中弹出元素④查看栈顶的值并将栈清空⑤创建tostring方法三、保护数据结构内部元素①下划线命名约定②用ES6的限定作用域Symbol实现类③用ES6的WeakMap实现类④ECMAScript类属性提案四、本章小结五、写在后面一、创建JavaScript栈结构Stack类在上一篇文章中，我们了解并学习了JavaScript是怎么来定义的栈数据结构，那么本章就是来创建一个Jav
2021-06-19 23:02:39
537
57
原创 你们要的后台管理系统全套，今天它来了【开源推荐】
一、写在前面最近又我发现了一个好东西，给你们分享一下：cool-admin(midway版)一个很酷的后台权限管理系统，开源免费，模块化、插件化、极速开发CRUD，方便快速构建迭代后台管理系统，支持serverless、docker、普通服务器等多种方式部署。其实看到这里可能会有小伙伴抬杠:"GitHub上开源的管理后台那么多,那这个有啥不一样的吗?"站长解说:开源的确实不少,当然软件更新很快嘛,这个还是比较新的技术，更好的是，不仅仅有前端部分，还有nodejs后台和java后台，你说是不是从这
2021-06-13 20:23:08
1162
15
原创 手把手5分钟掌握JavaScript栈数据结构(一)【JavaScript数据结构与算法系列】
本文目录一、JavaScript栈数据结构二、一个基于数组的栈①创建一个基于数组的栈②向栈添加元素③从栈移除元素④查看栈顶元素⑤检查栈是否为空⑥清空栈元素三、使用Stack类四、本章小结五、写在后面一、JavaScript栈数据结构JavaScript中本无“栈”的这种类型，但是我们有时候又需要用到这类的数据结构，还记得上一篇文章提到的数组吗？JavaScript中的栈数据结构就是基于Array类型来进行封装的。让我们拭目以待吧！栈是一种遵从后进先出（LIFO）原则的有序集合。新添加或待删除的元素都保
2021-06-12 22:37:17
2025
78
原创 手把手5分钟入门JavaScript数组，万字文超详细手绘操作执行过程【②JavaScript数据结构与算法系列】
本文目录一、数组的简介二、JavaScript数组的基本操作三、JavaScript的基础（变量、常量、运算符、真假值）四、本章小结五、写在后面一、数组的简介几乎所有的编程语言都原生支持数组类型，因为数组是最简单的内存数据结构。JavaScript里也有数组类型，尽管它的第一个版本并没有支持数组。本章将深入学习数组数据结构和它的能力。数组存储一系列同一种数据类型的值。虽然在JavaScript里，也可以在数组中保存不同类型的值，但我们还是遵守最佳实践，避免这么做(大多数语言都没这个能力)。为
2021-06-06 17:21:17
370
35
原创 5分钟快速入门JavaScript数据结构与算法的基础【①JavaScript数据结构与算法系列】
本文目录一、JavaScript的简介二、JavaScript的环境搭建三、JavaScript的基础（变量、常量、运算符、真假值）四、本章小结五、写在后面一、JavaScript的简介JavaScript是一门非常强大的编程语言。它也是最流行的编程语言之一，也是互联网上最卓越的语言之一。在GitHub(世界上最大的代码托管站点)上，托管了 30w+ 的JavaScript代码仓库(用JavaScript开发的项目数量也是最多的，参看http://githut.info)。使用JavaScript的项
2021-06-05 11:17:36
1483
113
原创 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一、echarts 折线图(折线统计图)折线图在我们也是我们的数据可视化图表中最常用的一种图表之一，是用折线将各个数据点标志连接起来的图表，不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况以及变化趋势。看着官网示例的这些花花绿绿的折线图，相信在日常的开发中，只要稍加配置调一下，已经可以满足9成的需求了。二、echarts的下载、安装与使用在上一篇的文章里，我们主要是学习如何快速上手Echarts的一些属性设置，我们演示的时候用的引入方式是一次性引入所有的资源。如这样：i
2021-05-30 12:17:29
3824
62
原创 你们要的Echart系列，今天它来了，教你一招快速上手echarts的属性设置，手把手教程系列
一、echarts简介以前的百度echart（echarts.baidu.com），不过现在的ECharts 正在 Apache 开源基金会孵化中，因此域名（echarts.baidu.com）已不再使用，请访问 echarts.apache.org。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰
2021-05-30 08:53:56
5974
91
原创 ①【结构型设计模式】外观模式
一、写在前面外观模式（Facade）：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。还记得前两天的设计模式吗？但是今天的这个虽然你可能没听过，但是日常的开发中你肯定用到过了。关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 添加一个点击事件现在为页面文档document对象绑定了一个click事件来实现隐藏提示框的交互功能，直接用onclick为document绑定
2021-05-18 22:22:41
116
1
原创 【结构型设计模式】分类与简介
一、写在前面在前面的文章中，创建型模式的介绍以及使用以及讲述完成了，后面进入新的一个篇章“结构型设计模式”，它与创建型模式有何不同呢？结构型设计模式关注于如何将类或对象组合成更大、更复杂的结构，以简化设计。关注公众号“笔优站长”可阅读全部文章哟。结构型设计模式可分为以下几种：外观模式适配器模式代理模式装饰者模式桥接模式组合模式享元模式后面的文章会依次对上述的几种模式进行拆分与解析，若写的不好的地方请指出！废话不多说，下一篇正式开始。二、写在后面有问题请留言或者@博主,谢谢
2021-05-11 21:37:30
189
1
原创 ⑥【创建型设计模式】单例模式
一、写在前面单例模式（Prototype）：关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 创建一个焦点图假设页面中有很多焦点图(网页中很常见的一种图片轮播，切换效果)，那么我们要实现这些焦点图最好的方式就是通过创建对象来一一实现，所以我们就需要有一个焦点图类，比如我们把这个类定义为LoopImages。/** * 图片轮播类 * @param {*} imgArr 轮播图数组 * @param {*} container 轮播图图片容器 */var LoopImages
2021-05-04 11:15:31
117
原创 ⑤【创建型设计模式】原型模式
一、写在前面原型模式（Prototype）：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。语言中的原型：在JavaScript中的继承是靠原型链实现的，那么这就是JavaScript中的原型模式。原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性。当然JavaScript是基于原型链实现对象之间的继承，这种继承是基于一种对属性或者方法的共享，而不是对属性和方法的复制。关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 创建一个焦点图假
2021-05-03 17:07:36
90
原创 ④【创建型设计模式】建造者模式
一、写在前面建造者模式（Builder）：将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。前几天的工厂模式学习，你会认为创建任何对象只需要工厂模式就可以了吗？关注公众号“笔优站长”可阅读全部文章哟。二、场景小例子 —— 发布用户简历今天，在公司里临时接到在页面发布用户简历的需求，具体的如下：有一些找工作的人，想借助咱们的网站发布自己的简历，但是这些简历有一个要求，除了可以将他们的兴趣爱好以及一些特长发布在页面里，其他信息，如他们的联系方式，不要发布在网站上。要让需求公司来
2021-05-02 01:32:50
153
2
原创 ③【创建型设计模式】抽象工厂模式
一、写在前面抽象工厂模式（Abstract Factory）：通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。还记得前两次在讨论工厂方法模式时提到的抽象类么……关注公众号“笔优站长”可阅读全部文章哟。二、一个小例子 —— 抽象类上次介绍工厂方法时曾提到过抽象类，那么在JavaScript中如何创建一个抽象类呢?抽象类有什么用?与抽象类相关的又有哪些模式呢?抽象类?你知道abstract在JavaScript中还是一个保留字吗？所以目前来说还不能像传统面向对象语言那样轻松
2021-04-24 22:12:04
121
1
原创 ②【创建型设计模式】安全的工厂方法模式
一、写在前面工厂方法模式（Factory Method）：通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。关注公众号“笔优站长”可阅读全部文章哟。二、一个小场景广告是公司主要的一个经济来源，这不，很多企业等着要来公司首页打广告呢。需求如下：新来了一批广告资源需要投放，关于计算机培训的，一批是Java的，用绿色的字体。还有一批是PHP的，要用黄色的字体，红色背景。（PHP是世界上最好的语言，所以要用黄色的字体 ）于是我们就准备创建这样两个类，然后通过实例对象方式来完成这个需求。代码如下
2021-04-15 21:48:21
146
1
原创 ①【创建型设计模式】简单工厂模式
一、写在前面简单工厂模式（Simple Factory）：又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象的实例。主要用来创建同一类对象。二、一个小场景有这样的一个场景，假如我们要做一个登录模块，需求如下：用户名输入框的地方，如果用户输入的内容不符合规范就自定义个警示框警示一句“用户名不能多于16个字母或者数字”。大多数的情况下会这样写var LoginAlert = function (text){ this.content = text;}LoginAlert.show = fu
2021-04-06 21:04:06
92
原创 【创建型设计模式】分类与简介
一、写在前面创建型设计模式是一类处理对象创建的设计模式，通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。创建型模式可分为以下几种：简单工厂模式工厂方法模式抽象工厂模式建造者模式原型模式单例模式后面的文章会依次对上述的几种模式进行拆分与解析，若写的不好的地方请指出！废话不多说，下一篇正式开始。...
2021-04-05 17:55:25
116
原创 微信登录,服务端回调文件 get-weixin-code.html
记录一下,微信公众号登录,这个文件是需要放到服务端做回调跳转的.<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>微信登录</title> </head> <body> <script> var GWC = {
2021-04-01 16:07:58
1195
1
原创 微信js-sdk开发 config:fail,Error: 系统错误的巨坑
一、踩个坑还是要说一下最近在做微信公众号网页里面使用"微信扫一扫"的功能,用到了微信的jssdk,后面啥都配置对了,但是还是一直报错config:fail,Error: 系统错误，错误码：63002,invalid signature [20210401 15:17:57][]二、报错内容如下后台返回的数据如下:微信官方的配置项如下:最大的错误: 后台返回的参数最好自己拿着校验一下,nonceStr 的S 需要大写,特别是里的大小驼峰,必须区分.否则就掉坑了… 仅此为自己的坑记录一下.
2021-04-01 15:34:37
3392
1
原创 原生js手撸拖拽矩形移动与缩放
一、写在前面写这个原因很简单，有这么一个需求如下：编写代码实现以下要求：画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。要求如下：整个矩形的最小大小为 5px * 5px，缩放到最小时不能发生移动；鼠标快速移动时移动和缩放效果要保持流畅。二、直接上代码还是按照步骤一步一步的来吧。首先是要创建一个矩形，然后再写逻辑，下面一个矩形就画好了。。。但是似乎屏幕上啥也没有。。 是的没宽高，所以就看不到了。别着急，继续画。<!DOCTYPE htm
2021-03-31 14:22:39
1573
4
原创 JavaScript设计模式
一、大类简介根据每种设计模式的侧重点不同，可以分为以下几种：创建型模式结构型模式行为型模式技巧型模式架构型模式开发人员通常想知道在他们的工作流程中是否有一个（或一组）理想的模式。这个问题没有一个真正的单一答案：我们要完成的每个脚本和Web应用都可能会有它自己的独特需求，我们需要思考模式对实现来说在哪些方面能够提供真正的价值。例如，有些项目可能很需要观察者模式提供的解耦（降低应用中各部分的彼此依赖）好处，但对其它根本不关切解耦的项目来说几乎用不上这个模式的好处。换言之，一旦我们对设计模式
2021-03-29 22:26:17
166
5
原创 nestjs发送邮件验证码和附件使用ejs模板做邮件主体 nestjs开发邮件服务器
一、写在前面当你看到这篇文章的时候，站长想猜你肯定已经找了好几个网页的资料了，还是没看到你合适的吧？此篇文章肯定是史上最详细的教程之一，这边文章内容主要是基于nestjs来开发邮件服务器，实现发送邮件验证码、发送文件附件等功能。好了，话不多说，进入主题……二、方案分析第一步肯定是要选择使用的邮件服务商了，这里呢，我们选择腾讯企业邮箱作为邮件服务器的服务商。注册地址： https://exmail.qq.com/login ，具体的注册方法就不再介绍了，按官网的步骤一步一步走就可以了。注册好账号之后
2021-03-19 08:48:07
4590
18
Vue图片上传剪裁组件 AppCropper.zip
2020-04-25
vue-aliplayer-v2.zip
2019-11-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人