引言grep是Linux中用于文件处理的最有用和最强大的命令之一。grep在一个或多个输入文件中搜索与正则表达式匹配的行，并将每个匹配的行写入标准输出。在本文中，我们将探索如何在grep的GNU版本中使用正则表达式的基础知识，该版本在大多数Linux操作系统中默认可用。grep的正则表达式正则表达式（regex）是与一组字符串匹配的模式。模式由操作符、构造文字字符和元字符组成，...

1. 心跳重连原由心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着，避免丢包发生。websocket连接断开有以下两种情况：前端断开在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时关闭，这时候websocket的连接已经断开，而不同浏览器有不同的机制，触发onclose的时机也不同，并不会理想执行websocket的onclose...

引言在一个完善的即时通讯应用中，websocket是极其关键的一环，它为web应用的客户端和服务端提供了一种全双工的通信机制，但由于它本身以及其底层依赖的TCP连接的不稳定性，开发者不得不为其设计一套完整的保活、验活、重连方案，才能在实际应用中保证应用的即时性和高可用性。就重连而言，其速度严重影响了上层应用的“即时性”和用户体验，试想打开网络一分钟后，微信还不能收发消息的话，是...

FlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（rem伸缩布局（转））连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题），布局还是要传统布局的。flex-插图1布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非...

一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么...

前言项目中有即时聊天的需求，经过调研我们采用了socket.io自己实现了一个聊天服务器。开始的一段时间由于用户不是很多，消息的发送接收都还算流畅，最近随着在线用户数量飙升，每过一段时间就会发生发送消息卡顿和接收消息延时的问题，最后只能通过重启socket服务来暂时解决问题。那有没有办法从根本上解决这个问题呢？目录什么是socket.io？用socket.io实现一个简易的即时...

<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法，不会做过多的基础说明~没想到，这些选择器居然跟 i...

现在的我们基本上都是使用 webpack 模式开发，修改了代码之后，页面会直接进行改变，但是很少有人想过，为什么页面不刷新就会直接改变了？初识 HMR 的时候，觉得神奇的同时，脑海中一直有一些疑问：一般来说， webpack 会将不同的模块打包成不同 bundle 或 chunk 文件， 但是在使用 webpack 进行 dev 模式开发的时候，我并没有在我的 dist 目录中...

一、多线程与单线程像java、python这个可以具有多线程的语言。多线程同步模式是这样的，将cpu分成几个线程，每个线程同步运行。而node.js采用单线程异步非阻塞模式，也就是说每一个计算独占cpu，遇到I/O请求不阻塞后面的计算，当I/O完成后，以事件的方式通知，继续执行计算2。事件驱动、异步、单线程、非阻塞I/O，这是我们听得最多的关于nodejs的介绍。看到上面的关键...

前言作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲：文字处理本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且...

优点：1、支持用例管理2、支持get、post、文件上传、响应验证、变量管理、环境参数管理等功能3、支持批量运行4、支持用例导出、导入5、支持云端保存用例【付费用户】可以说POSTMAN满足了HTTP接口测试的大部分功能，只有少部分的功能不被支持，比如：请求流程的控制；前面说了这么多，接下来我们就看看POSTMAN的安装与使用吧。 1、什么是POSTMANPOSTMAN是一个C...

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是<img>标签，或者是通过CSS background 属性，还可以使用 SVG<image>。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。HTML img 元素最简单的情况下，i...

1.spring-boot-paySpring Boot 的支付服务：支付宝，微信，银联详细代码案例。项目地址：https://gitee.com/52itstyle/spring-boot-pay 2.springboot-bucketSpringBoot 全家桶 —— 本项目对目前Web开发中常用的各个技术，通过和SpringBoot的集成，并且对各种技术通过“一篇博客 +...

我们在使用 MyBatis 的时候，都用的是 Dao 接口和 XML 文件里的 SQL 一一对应来进行使用的。那你是否思考过二者是如何建立关系的？在开始正文之前，首先解释 Dao 接口和 XML 文件里的 SQL 是如何一一对应的？一句话讲完就是：MyBatis 会先解析这些 XML 文件，通过 XML 文件里面的命名空间 （namespace）跟 DAO 建立关系；然后 XM...

了解移动端页面与PC端页面开发的区别，学习移动端页面的开发流程。移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，...

一、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答： ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。二、问：ES5、ES6和ES2015有什么区别?答： E...

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目...

前言以下内容大多来自互联网总结，和一些自定日常收集的正则函数。希望能给各位前端老铁们带来帮助，毕竟工具函数这种东西，就是增加开发效率。独乐乐不如众乐乐~正文验证股票代码(A股)/** * @param { string } value */export const isAShare = value => /^(s[hz]|S[HZ])(000[\d]{3}|002[\d...

一 URL设计动词+宾语动词的覆盖宾语必须是名词复数 URL避免多级 URL二、状态码状态码必须精确2XX状态码3xx 状态码4xx 状态码5xx 状态码三、服务器回应不要返回纯本文发生错误时，不要返回 200 状态码提供链接四、参考链接RESTful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计。它的大原则容易把握，但是细节不容易做对。本文总结 RESTfu...

介绍 自定义表单设计器，这是一个现代化应用中一个加分的模块，目前很多大型的系统都会存在很多表单，针对不同的客户，可能表单都会不一样，而且不够灵活，可能针对不同的场景都得去定制化的开发很多不一样的表单，因此现在很多大型应用程序都提供了自定义表单的功能，今天就为大家介绍一些在github上发现的比较符合需求的基本实现，需要自己配合后台，但是最难的部分，也就是前端设计器的部分基本上...

做前端工程师得你，一定经常会使用到npm install，那你真的了解npm install 执行之后的流程细节么? 嵌套结构 我们都知道，执行 npm install 后，依赖包被安装到了 node_modules ，下面我们来具体了解下，npm 将依赖包安装到 node_modules 的具体机制是什么。 在 npm 的早期版本， npm 处理依赖的方式简单粗暴，以递归的...

Spring Cloud Config为分布式系统中的外部化配置提供服务器端和客户端支持。 使用config组件只需要以下几步：1. 引入依赖在springboot项目pom文件中添加如下依赖<!--config-server依赖--><dependency> <groupId>org.springframework.cloud<...

原理用了很长时间的RGB方式来作为CSS中的颜色样式，却不知道它是什么原理，据说这还是一道面试题，这篇文章就用来总结一下它的原理。我们生活中最常见的光就是太阳光，据说在1672年牛顿用三棱镜将太阳光分离成了赤橙黄绿蓝紫青七色光。随着科技的进步，人们发现肉眼细胞对红绿蓝三种颜色较为敏感，而且这三种颜色按照不同比例混合会制造出很多其他的颜色，比如7色光中的其他4种颜色就可以用红绿蓝...

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

弹性是动态设计领域中一种常见的表达方式。不同于影视特效、动画 CG 等设计输出即为最终产物的生产环境，UI 动效始终面临着动效还原带来的种种问题，弹性动效的还原就是其中之一。当设计师完成弹性动效的设计，与工程师进行交接时，双方会发现参数无法对齐 —— 在设计工具中调节效果的参数与在工程开发环境下设定效果的参数无论是名称还是数量都存在差异。基于以上背景，我们通过研究一些常见原型设...

介绍TNWX是笔者在码云上发现的一个微信系列的开发脚手架项目，看了一下不少人的评论就是两个字——专业，下面简单介绍；TNWX:TypeScript + Node.js + WeiXin 微信系开发脚手架，支持微信公众号、微信支付、微信小游戏、微信小程序、企业微信/企业号、企业微信开放平台。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest、Egg、...

Photo by Charles Deluvio on Unsplash介绍我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性，很容易感到不知所措和困惑。 浏览器当前支持16种度量单位：像素，英寸，皮卡，厘米，毫米，点，百分比，em，rem，视口尺寸（vw，vh），ex，ch，Vmax（最大视口）和vmin （viewportmin）在这16个...