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

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

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

<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最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且...

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

了解移动端页面与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...

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

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

原理用了很长时间的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个...

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超...

受制于同源策略，一个域去请求另一个域的资源时，就会出现跨域的现象，而在我们开发中，经常需要跨域去请求资源（例如：本地localhost,去请求测试环境的资源），所以我们也就需要一些方法去解决这个跨域的问题复制代码一、使用jsonp 解决跨域缺点：不安全，容易造成xss攻击；只能是GET请求原理：1.<script>标签的src属性不受同源策略的限制2.跨域请求的接口...

在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块必须有一个描述文件，即 package.json。它是我们最常见的配置文件，但是它里面的配置你真的有详细了解过吗？配置一个合理的 package.json 文件直接决定着我们项目的质量，本章就带大...

前端常见的设计模式主要有以下几种：1. 单例模式2. 工厂模式3. 策略模式4. 代理模式5. 观察者模式6. 模块模式7. 构造函数模式8. 混合模式单例模式这种设计模式的思想是确保一个类只有唯一实例，一般用于全局缓存，比如全局window，唯一登录浮窗等。采用闭包的方式实现如下：工厂模式工厂模式是创建对象的常用设计模式，为了不暴露创建对象的具体逻辑，将逻辑封装在一个函数中，...

使用过localStorage的小伙伴都知道，localStorage本身没有时间过期的功能，那么如何实现localStorage过期功能呢？思路1、使用localStorage时，设置一个定时器，比如10分钟后过期，那就十分钟后清除localStorage。但是面临的问题是，如果浏览器关闭，定时器也就失效。如果解决呢？10分钟后过期，那就知道了截至时间，每次打开网址，就去检测...

我们每天上网使用APP、微博、刷朋友圈，都是通过HTTP协议实现的，是绝对的中心化网络。当然，背后繁杂的技术层面是普通用户感知不到的。网络上产生的所有数据都是被集中存放于特定的服务器中，即使这样的服务器在全世界不计其数,对于数据存储还是非常之中心化的，两个字总结：危险。为什么这么说呢？用户在特定的网站，或者客户端上使用之后所产生的用户数据也都是存储在这家中心化公司的服务器上的，...

点击“了解更多”获取DevExpress ASP.NET v19.2正式版下载DevExpress ASP.NET Controls 中的控件具有优良的性能和高效的内存使用，且能保证其性能和功能不受影响。无论使用 ASP.NET AJAX 还是 ASP.NET MVC 作为编程目标，DevExpress ASP.NET Controls 中所提供控件和扩展程序都可帮助您创建卓越...