利用React实现多个场景下的鼠标跟随框提示框

2023-02-19
阅读 8 分钟
1.2k
鼠标跟随框的作用如下图所示,可以在前端页面上,为我们后续的鼠标操作进行提示说明,提升用户的体验。本文将通过多种方式去实现,从而满足不同场景下的需求。

前端web实现(@、At、艾特)选人或引用数据

2022-09-29
阅读 10 分钟
2.2k
1、在输入框中输入 @ ,弹出浮窗,然后可以选择浮窗中相关的数据;2、在输入框中输入 # ,弹出浮窗,然后可以选择浮窗中相关的数据;3、@ 和 # 引用的数据要包含名称和id等,最终要传给后端;4、删除 @ 和 # 引用的数据时,需要整体删除;5、@ 和 # 引用的数据需要被标注成不同的颜色。

推荐一些有趣实用的前端可视化工具库,助力可视化开发

2022-05-22
阅读 4 分钟
1.9k
前端可视化一直是人们常谈到的词,随着SVG,Canvas,WebGL等技术的发展,也涌现了一大批的优秀的可视化库。本文将从中选择一些有趣实用的推荐给大家,工具使用好了,开发效率自然也就提升了。

关于web中的颜色表示方法,你知道多少?

2021-12-09
阅读 4 分钟
3.4k
想要表示web中的各种颜色,大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中,是远不止这两种的。今天这篇文章就和大家聊一聊,在web中颜色的各种表示方法。

手把手实现一个web代码模板快速生成CLI工具

2021-11-17
阅读 9 分钟
2.5k
在上一篇文章中,我们实现了一个web工程通用脚手架工具,目的是快速搭建项目。在实际开发中,特别是后台管理系统,有很多相似的代码实现。于是乎,我们可以继续实现一个快速生成web代码模板的工具,告别复制/粘贴。

手把手从0到1实现一个web工程通用脚手架工具

2021-10-18
阅读 11 分钟
2.3k
前端工程化是人们常常提到的东西,其目的基本上都是为了提高开发效率,降低成本以及保证质量。而脚手架工具则是前端工程化中很重要的环节,一个好用的web工程通用脚手架工具可以在很大程度上做到上面所提到的。

整理了一系列的JavaScript树操作方法,不用再一遍又一遍的百度了

2021-10-10
阅读 18 分钟
3.7k
树结构的数据操作对于一个开发者来说是一个必备的技能。在实际的业务开发中,我们也会遇到许多树结构的体现,比如最常见的地域树,以及企业结构树、校级组织树等等。

从项目搭建到发布插件到npm

2021-09-16
阅读 8 分钟
2.5k
前言在我们平时的开发工作中,我们可以把很多可以公用的组件和方法抽离出来,以npm插件的形式发布在npm或者自己的npm私库上,以达到复用效果。本文会以一个react插件为例,经历开发工程搭建—插件编写—npm打包发布等一系列步骤,和小伙伴们一起开发一个npm插件。工程搭建项目工程以为webpack5+、react17+、less、TypeScri...

前端批量获取文件并打包压缩解决方案

2021-06-16
阅读 4 分钟
11k
前端文件下载我相信很多小伙伴并不陌生,下载文件的形式也有很多,例如,后端返回一个文件地址,我们把地址放在<a></a>标签里面点击下载;或者是通过后端接口返回文件流,我们再对流进行一系列的操作等等。

nrm和yrm ,npm源管理器,可以快速在源间进行切换

2021-06-07
阅读 2 分钟
4.9k
前言我们在开发时,有时需要进行npm源的切换。nrm和yrm作为npm / yarn的镜像源管理工具,可以快速地在 npm 源间切换,提高我们的效率。nrm安装 {代码...} 使用查看可用源列表 {代码...} 其中带*为当前使用的源 {代码...} 快速切换 {代码...} 新增如果我们需要增加特定的源,比如自己的私有源,可以执行以下命令进行添加...

纯函数是什么?怎么合理运用纯函数?

2021-04-12
阅读 3 分钟
8.4k
纯函数这个这个词我相信小伙伴们多多少少都听说过,它是函数式编程的基础。本文主要是对纯函数进行探讨,包括基本概念,优点,运用的经典案例以及我们日常该如何去合理的使用等等。

工作效率upup,一起来实现一个Node.js-CLI开发工具吧

2021-01-28
阅读 7 分钟
7k
我们平时项目开发中,经常会有很多类似的代码文件,而我们在使用的时候也会经常的去复制粘贴。为此我之前也写过一篇文章,探讨过提高开发效率的方法,但是说实话,也并不是很好用。

利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互

2021-01-11
阅读 7 分钟
4.7k
作为开发者,我们总是会不经意间的遇到一些令人头疼的需求。比如五彩斑斓的黑,根据手机壳变换APP的颜色等等,你说怎么办。虽然在一般情况下不会这么棘手,但是有些需求刚拿到的时候还是会一筹莫展。

在Vue和React中使用ECharts的多种方法

2020-08-27
阅读 7 分钟
9.4k
俗话说:“工欲善其事,必先利其器”。现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等。我们可以把这些解决方案比作是一套套成熟的“工具”,那我们如何将这些“工具”应用于当前最热门的两个前端框架中呢?

分享一些可能会用到的原生前端CSS例子,要不进来看看?

2020-07-08
阅读 6 分钟
4k
前言 今天来分享一些原生的CSS或者是CSS+JS的实际例子,这些例子比较的简单,但是都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~ css时间轴效果 时间轴算是很常见效果,我们可以通过CSS的相对定位和绝对定位来实现,在开发的时候我们可以根据实际情况来调整各个属性的值,以满足需求。 效果: 代码: HTML ...

想要试试Electron ,不如看看这篇爬坑总结

2020-06-09
阅读 8 分钟
8.8k
web端能做的事情很多,但是当涉及到操作系统的时候,可能就有点力不从心了。前段时间在开发一个web系统的时候,就遇到了类似的情况。我们需要获取电脑操作系统的一些信息,比如mac地址等。我们的web系统是完全放在服务器上,通过浏览器来运行的,但是通过web端并不能直接实现我们想要的效果。

厌烦了Ctrl+CV ?试试用node自动生成重复代码文件

2020-04-20
阅读 7 分钟
4.1k
相信在我们日常遇到的项目中,无论是在前端网站还是后台管理系统中都会有功能类似的页面。我们在开发这些功能类似的页面的时候,为了提高效率,一般都会运用我们的CV大法。但是当我们CV久了之后,会不会觉得这样的开发方式有些许枯燥?我们能不能通过代码来生成代码,进一步提高我们的效率呢?下面我们就来通过一个例子...

StompJS+SpeechSynthesis实现前端消息实时语音播报

2020-04-05
阅读 11 分钟
7.1k
前端消息的实时推送我相信很多人不陌生,我们可以想到利用WebSocket,服务端主动向客户端推送数据,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。其优点有很多,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时...

react+echarts实现全国客户数据展示

2020-03-29
阅读 7 分钟
3.4k
数据可视化一直都是一个流行的话题。我们平时做项目可能就避免不了与图图表表打交道。所幸的是现在有许多优秀成熟的数据图表库,例如Echarts和Highcharts,我们可以在里面寻找自己需要的图表,方便快捷~

书到用时方恨少,一大波JS开发工具函数来了

2020-03-15
阅读 28 分钟
7.6k
在我们日常开发的时候,可能会遇到各种各样的需求,但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少,下面的这些JavaScript的工具函数可能就会派上大用场了,我们可以进行复用,提高我们的工作效率。

前端响应式布局原理与实践

2020-03-06
阅读 10 分钟
9.7k
作为一个前端开发者,响应式网站开发是必备技能之一。响应式有它的很好的优点,也有它一定的缺点。这就需要我们在开发的时候做出取舍。对于内容较少、主要为展示类网站,故采用响应式;对于内容多,管理类的网站采用分开开发的方式,不同设备采用不同的一套代码。本文会主要探讨响应式布局原理和技巧,并结合实例来加深...

TypeScript真香系列-高级类型

2020-02-20
阅读 7 分钟
1.2k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-类型推论和类型兼容性

2020-02-15
阅读 6 分钟
2.9k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-枚举

2020-02-06
阅读 3 分钟
2.2k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-泛型

2020-02-03
阅读 3 分钟
1.5k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-函数

2020-01-31
阅读 2 分钟
1.7k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-类

2020-01-28
阅读 5 分钟
1.5k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-接口

2020-01-24
阅读 4 分钟
4.3k
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

TypeScript真香系列-基本类型和变量声明

2020-01-21
阅读 4 分钟
3k
TypeScript真香系列的内容将大量参考中文文档,但是文中的例子基本不会和文档中的例子重复。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。

前端的各种日期操作【值得收藏】

2020-01-12
阅读 9 分钟
5k
虽然现在处理日期方面已经有了很成熟的也很好用的库,例如(momentjs和date-fns),但是在实际开发中,我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作,也算是比较全的了。其中一部分来自自己,还有一部分来源于我们万能的网友~