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

1、在输入框中输入 @ ，弹出浮窗，然后可以选择浮窗中相关的数据；2、在输入框中输入 # ，弹出浮窗，然后可以选择浮窗中相关的数据；3、@ 和 # 引用的数据要包含名称和id等，最终要传给后端；4、删除 @ 和 # 引用的数据时，需要整体删除；5、@ 和 # 引用的数据需要被标注成不同的颜色。

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

想要表示web中的各种颜色，大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中，是远不止这两种的。今天这篇文章就和大家聊一聊，在web中颜色的各种表示方法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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