- 博客(42)
- 收藏
- 关注
RSS订阅原创 前端web实现（@、At、艾特）选人或引用数据
在我们日常的网络社交中，@XXX功能可以说是一个比较常见的功能了。本文将结合实践，介绍一种可以快速实现@选人或引用数据的方式。
2022-09-29 22:20:11
3809
4
原创 推荐一些有趣实用的前端可视化工具库，助力可视化开发
前端可视化一直是人们常谈到的词，随着SVG，Canvas，WebGL等技术的发展，也涌现了一大批的优秀的可视化库。本文将从中选择一些有趣实用的推荐给大家，工具使用好了，开发效率自然也就提升了。
2022-05-22 18:21:42
2512
原创 关于web中的颜色表示方法，你知道多少？
想要表示web中的各种颜色，大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中，是远不止这两种的。今天这篇文章就和大家聊一聊，在web中颜色的各种表示方法。
2021-12-09 21:16:07
4129
原创 手把手实现一个web代码模板快速生成CLI工具
前言在上一篇文章中，我们实现了一个web工程通用脚手架工具，目的是快速搭建项目。在实际开发中，特别是后台管理系统，有很多相似的代码实现。于是乎，我们可以继续实现一个快速生成web代码模板的工具，告别复制/粘贴。基本流程基本思路其实很简单，就是通过命令调取定义好的模板，然后生成代码文件：项目结构xman-tcli├─ bin│ └─ xmant.js├─ command│ ├─ createFile.js│ └─ createManyFiles.js├─ config│ └─
2021-11-17 22:28:02
938
原创 手把手从0到1实现一个web工程通用脚手架工具
前言前端工程化是人们常常提到的东西，其目的基本上都是为了提高开发效率，降低成本以及保证质量。而脚手架工具则是前端工程化中很重要的环节，一个好用的web工程通用脚手架工具可以在很大程度上做到上面所提到的。我们不仅要会用市面上很多成熟的脚手架，还要能根据实际的项目情况，去实现一些适合自己项目的脚手架。本文就将和大家一起实现一个基础的通用脚手架工具，后续就可以随意拓展了。项目结构项目的整体结构如下，后面我们会一步步编写代码，最终实现整个脚手架工具。xman-cli├─ bin│ └─ xman.j
2021-10-18 10:09:59
624
原创 整理了一系列的JavaScript树操作方法，不用再一遍又一遍的百度了
前言树结构的数据操作对于一个开发者来说是一个必备的技能。在实际的业务开发中，我们也会遇到许多树结构的体现，比如最常见的地域树，以及企业结构树、校级组织树等等。下面整理了一系列的关于JavaScript树的操作方法，结合示例，相信大家在实际开发工作中或多或少都会用到。数组扁平化示例const arr = [1, [2, [3, 4]], 5, [6]];方法1、递归const flatten = (arr) => { let res = []; arr.map(item
2021-10-10 15:32:21
516
原创 从项目搭建到发布插件到npm
前言在我们平时的开发工作中，我们可以把很多可以公用的组件和方法抽离出来，以npm插件的形式发布在npm或者自己的npm私库上，以达到复用效果。本文会以一个react插件为例，经历开发工程搭建—插件编写—npm打包发布等一系列步骤，和小伙伴们一起开发一个npm插件。工程搭建项目工程以为webpack5+、react17+、less、TypeScript为主体进行搭建。项目结构|-- demo |-- .babelrc |-- .gitignore |-- package.j
2021-09-15 20:51:49
248
原创 前端批量获取文件并打包压缩解决方案
前言前端文件下载我相信很多小伙伴并不陌生，下载文件的形式也有很多，例如，后端返回一个文件地址，我们把地址放在<a></a>标签里面点击下载；或者是通过后端接口返回文件流，我们再对流进行一系列的操作等等。单个件下载的解决方法有很多，但是当我们需要批量下载文件的时候，我们该怎么去做呢？方案面对这样的需求，我们提出了以下几个方案：方案一：直接获取后端返回文件地址数组，然后一个一个的去下载。但是这样每次下载一个文件，浏览器会显示比较多的下载任务；方案二：后端对先对文件进行打包压缩
2021-06-16 09:17:11
1603
3
原创 nrm和yrm ，npm源管理器，可以快速在源间进行切换
前言我们在开发时，有时需要进行npm源的切换。nrm和yrm作为npm / yarn的镜像源管理工具，可以快速地在 npm 源间切换，提高我们的效率。nrm安装npm install -g nrm使用查看可用源列表nrm ls其中带*为当前使用的源 npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.or
2021-06-07 10:07:38
1449
原创 纯函数是什么？怎么合理运用纯函数？
前言纯函数这个这个词我相信小伙伴们多多少少都听说过，它是函数式编程的基础。本文主要是对纯函数进行探讨，包括基本概念，优点，运用的经典案例以及我们日常该如何去合理的使用等等。纯函数的概念首先我们来看看纯函数的基本概念：相同的输入，总是会的到相同的输出，并且在执行过程中没有任何副作用。该怎么去理解上面的概念呢？我们要把上面这句话拆成两部分来看。相同的输入，总是会得到相同的输出。来看看下面的例子：let a = 1;function xAdd(x) { return x + a;
2021-04-12 08:38:07
1203
原创 工作效率upup，一起来实现一个Node.js-CLI开发工具吧
前言我们平时项目开发中，经常会有很多类似的代码文件，而我们在使用的时候也会经常的去复制粘贴。为此我之前也写过一篇文章，探讨过提高开发效率的方法，但是说实话，也并不是很好用。看如今火热的前端框架，都有自己的CLI工具，例如Vue CLI，creat-react-app等等，搭建项目十分的方便。所以我也在想，要不也实现一个CLI工具，不一定要和前面几个那样高大上，但只要能提高工作的效率，就值得试一试。初始化项目首先，我们要打开CLI界面，用npm初始化一个项目：npm initpackage.js
2021-01-28 09:26:16
182
原创 利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者，我们总是会不经意间的遇到一些令人头疼的需求。比如五彩斑斓的黑，根据手机壳变换APP的颜色等等，你说怎么办。虽然在一般情况下不会这么棘手，但是有些需求刚拿到的时候还是会一筹莫展。表格间数据传递曾经遇到一个类似这样的需求：A表的数据需要沿用B表中的数据，而且要尽量少的步骤。具体什么意思呢，意思就是完成一个类似于下面这种效果：这个该这么搞，直接给产品说，对不起实现不了。可是产品却告诉我，不行不行，必须实现。没办法，只好妥协。梳理OK，我们来理理思路，首先确定一下现有的主要开发环境
2021-01-11 10:16:03
527
原创 如何在Vue和React中优雅的使用ECharts
前言俗话说：“工欲善其事，必先利其器”。现如今已经有许多成熟易用的可视化解决方案，例如ECharts，AntV等等。我们可以把这些解决方案比作是一套套成熟的“工具”，那我们如何将这些“工具”应用于当前最热门的两个前端框架中呢？不慌，现在我们就以ECharts为例，来尝试“工具”的各种用法。Vue中运用ECharts首先我们要把ECharts下载下来：npm install echarts --save全局引用全局引用的好处就是我们一次性把ECharts引入项目后，就可以在任何一个组件中使用E
2020-08-27 09:43:41
819
原创 分享一些可能会用到的原生前端CSS例子，要不进来看看？
前言今天来分享一些原生的CSS或者是CSS+JS的实际例子，这些例子比较的简单，但是都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~css时间轴效果时间轴算是很常见效果，我们可以通过CSS的相对定位和绝对定位来实现，在开发的时候我们可以根据实际情况来调整各个属性的值，以满足需求。效果：代码：HTML<div class="message_item"> <div class="message_time">2020-05-13 19:11</div
2020-07-08 09:09:51
244
原创 寻找超出容器水平宽度的元素——CSS outline
由于元素的宽度过宽，有些元素会导致出现水平滚动条。找到这个问题的原因最简单的方法就是使用 CSS outline。Addy Osmani 分享了一个非常方便的脚本，可以添加到浏览器控制台，列出页面上的每个元素。[].forEach.call($$("*"), function(a) { a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);});...
2020-06-27 16:54:18
298
原创 node.js获取本机mac地址
原理：调用node.js的os.networkInterfaces()返回一个对象，该对象包含已分配了网络地址的网络接口。返回的对象上的每个键都标识了一个网络接口。 关联的值是一个对象数组，每个对象描述了一个分配的网络地址。分配的网络地址的对象上可用的属性包括：address<string> 分配的 IPv4 或 IPv6 地址。netmask <string> IPv4 或 IPv6 的子网掩码。family <string> IPv4 或 IPv6。m
2020-06-27 16:46:27
2402
原创 想要试试Electron ，不如看看这篇爬坑总结
前言web端能做的事情很多，但是当涉及到操作系统的时候，可能就有点力不从心了。前段时间在开发一个web系统的时候，就遇到了类似的情况。我们需要获取电脑操作系统的一些信息，比如mac地址等。我们的web系统是完全放在服务器上，通过浏览器来运行的，但是通过web端并不能直接实现我们想要的效果。问题就是留给人们来解决的。经过同事之间的讨论，因为系统本身并不复杂，而且要进行快速的开发。决定用Electron + 原web系统的页面，来解决涉及操作系统信息的问题。这篇文章总结了我在使用Electron 时所遇到
2020-06-09 09:44:24
2084
原创 厌烦了Ctrl+CV ？试试用node自动生成重复代码文件
前言相信在我们日常遇到的项目中，无论是在前端网站还是后台管理系统中都会有功能类似的页面。我们在开发这些功能类似的页面的时候，为了提高效率，一般都会运用我们的CV大法。但是当我们CV久了之后，会不会觉得这样的开发方式有些许枯燥？我们能不能通过代码来生成代码，进一步提高我们的效率呢？下面我们就来通过一个例子来探索一下怎么通过node来生成我们需要的前端代码。实例假设我们正在做一个后台管理系统（r...
2020-04-20 09:29:20
386
原创 StompJS+SpeechSynthesis实现前端消息实时语音播报
前言前端消息的实时推送我相信很多人不陌生，我们可以想到利用WebSocket，服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其优点有很多，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时侯，通过听觉来获取需要信息。这篇文章主要介绍的是基于websocket，利用Stomp...
2020-04-05 10:37:11
1739
3
原创 react+echarts实现全国客户数据展示
前言数据可视化一直都是一个流行的话题。我们平时做项目可能就避免不了与图图表表打交道。所幸的是现在有许多优秀成熟的数据图表库，例如Echarts和Highcharts，我们可以在里面寻找自己需要的图表，方便快捷~需求假设我们有这样一个需求：把统计到的全国客户数据，利用可视化的方案展示出来。针对这样一个需求，一个比较好的方案就是把客户数据展示在地图上，这样可以清晰直观的了解到客户在全国各地的分...
2020-03-29 10:02:48
645
原创 js四舍五入到指定位数
直接上代码const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);round(1.005, 2); // 1.01
2020-03-15 16:32:58
446
1
原创 利用reduce计算数组或多个数字的总和
直接上代码const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);sum(1, 2, 3, 4); // 10sum(...[1, 2, 3, 4]); // 10
2020-03-15 16:31:15
1428
原创 js中判断鼠标滚轮方向的方法
判断鼠标滚轮的方向，有着两个派别：一是谷歌、IE派别（这次IE没有搞特殊）；二是火狐派别 1、在谷歌、IE派别中，给我们提供了onmousewheel方法，该方法给我们提过了一个wheelDelta属性，该属性的返回值：正值与负值，其中正值表示滚轮向上滚动；负值表示滚轮向下滚动。 2、而在火狐中，给我们提供了DOMMouseScroll方法，该方法给我们提供了一个detail属性，该属性的...
2020-03-15 16:28:07
853
原创 jQuery实现对滚动条距顶部高度的监听
直接上代码：$(window).scroll(function(){ //开始监听滚动条 var top = $(document).scrollTop(); //滚动条距离顶部的高度 if(top > 120 ) { $(".header-nav").css({ 'position': 'fixed',...
2020-03-15 16:22:07
554
原创 js给指定元素插入元素insertAdjacentHTML
前言insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。'beforebegin'：元素自身的前面。'afterbegin'：插入元素内部的第一个子节点之前。'beforeend'：...
2020-03-15 16:18:55
530
原创 js+css实现移动端抽屉式导航
前言移动端导航多种多样，抽屉式导航就是常见之一，下面我们通过javascript和css相结合来实现移动端的抽屉式导航。先看看实现的效果：index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv...
2020-03-09 11:04:09
2794
1
原创 for...of和for...in
for…of vs for…in 语句for..of 和 for..in 均可迭代一个列表；但是用于迭代的值却不同，for..in迭代的是对象的 键 的列表，而for..of则迭代对象的键对应的值。let list = [4, 5, 6];for (let i in list) { console.log(i); // "0", "1", "2",}for (let i of...
2020-03-08 20:26:22
133
原创 JavaScript 类(class)实例和静态的字段和方法
前言总结一下类的实例和静态的字段和方法，附上代码对比。1、字段类字段是保存信息的变量，字段可以附加到两个实体：一是类实例上的字段；二是类本身的字段（静态字段）实例字段：class User { constructor(name) { this.name = name; }}const user = new User('前端车站');user.name; // =&...
2020-03-08 20:09:25
758
原创 js判断数据类型的几种方式
前言这里总结了前端JavaScript判断数据类型的几种方式。第一种方式： typeoftypeof null ---> "object"typeof undefined ---> "undefined"typeof true | false ---> 'boolean'typeof 42 ---> 'number'typeof "42" ---...
2020-03-08 20:00:23
194
原创 git最常用的基本命令
前言在日常的开发中，Git可以说是必不可少的工具之一，下面是一些在开发中最常用的命令及简单的说明，也是一般代码管理的流程。常用命令及操作git init初始化本地仓库，先在本地建一个文件夹，点开文件夹在里面打开cmd，然后输入这个命令git clone "http://github.com"把远程代码克隆到本地，后面跟的是远程仓库的地址git branch lin创建分支，如lin...
2020-03-08 19:46:07
145
原创 前端响应式布局原理与实践
前言作为一个前端开发者，响应式网站开发是必备技能之一。响应式有它的很好的优点，也有它一定的缺点。这就需要我们在开发的时候做出取舍。对于内容较少、主要为展示类网站，故采用响应式；对于内容多，管理类的网站采用分开开发的方式，不同设备采用不同的一套代码。本文会主要探讨响应式布局原理和技巧，并结合实例来加深印象。响应式与自适应我们很多人其实把这响应式和自适应两种网站当成一回事，但事实上这两种网站的布...
2020-03-06 10:18:04
991
原创 TypeScript真香系列-高级类型
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。交叉类型交叉类型是将多个类型合并为一个类型，相当于一种并的...
2020-02-20 10:43:13
265
原创 TypeScript真香系列-类型推论和类型兼容性
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。类型推论基础TypeScript中的类型推论，就是当我们...
2020-02-15 14:36:38
441
原创 TypeScript真香系列-枚举
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。概念枚举是对JavaScript标准数据类型集的扩充，常被...
2020-02-06 12:37:08
198
原创 TypeScript真香系列-泛型
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。概念TypeScript的泛型与其他面向对象的语言中的定义...
2020-02-03 09:27:36
175
原创 TypeScript真香系列-函数
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。函数的基础函数是JavaScript应用程序的基础，同样T...
2020-01-31 13:14:40
296
原创 TypeScript真香系列-类
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。类的基础TypeScript中的类和ES6中的类十分相似，...
2020-01-28 10:32:13
287
原创 TypeScript真香系列-接口
前言TypeScript真香系列的内容将参考中文文档，但是文中的例子基本不会和文档中的例子重复，对于一些地方也会深入研究。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。概念TypeScript的核心原则之一是对值所具有的结构进...
2020-01-24 09:49:30
1470
原创 TypeScript真香系列-基本类型和变量声明
基本类型布尔值TypeScript和JavaScript一样，这是最简单的数据类型为boolean，也就是true和false。let isDone: boolean = false;数字TypeScript和JavaScript一样，TypeScript里的所有数字都是浮点数，类型为number。和ES6中一样，TypeScript支持十进制，十六进制，二进制和八进制字面量。let...
2020-01-21 19:59:27
364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人