qq_43623970的博客

今天给大家介绍的是KeyDB，KeyDB项目是从redis fork出来的分支。众所周知redis是一个单线程的kv内存存储系统，而KeyDB在100%兼容redis API的情况下将redis改造成多线程。线程模型KeyDB将redis原来的主线程拆分成了主线程和worker线程。每个worker线程都是io线程，负责监听端口，accept请求，读取数据和解析协议。如图所示：KeyDB使用了SO_REUSEPORT特性，多个线程可以绑定监听同个端口。每个worker线程做了cpu绑核，读取数据也

长沙这边面试了几个三年的前端，给我整哭了，简历简历不带，问点基础题，一问三不知，问个水平垂直居中布局，支支吾吾半天说不出来，还有个弟弟说你这样问我不知道怎么回答，累了。我只想说，这真的有三年的经验嘛？如果有收获？希望老铁们来个三连，点赞、收藏、转发创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客知乎可以观看更多我的优质文章：打造小白进阶web前端高级工程师资料库，看完学的更加快，知识更牢固。你值得拥有（持续更新）~...

标题开个玩笑，实际上CSS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。三角形利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。<style>.triangle { width: 0; height: 0; border-style: solid; box-sizing: b

前几天，有粉丝用javascript实现滚动条功能的时候，问我怎么实现滚动条功能，除了javascript实现以外，我还跟他说了用纯css实现滚动条的功能。那么到底如何使用 CSS 实现下述滚动条效果？[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnPeg6K0-1594629381255)(https://user-gold-cdn.xitu.io/2019/1/9/168314f06c5dee8a?imageslim)]就是顶部黄色的滚动进度条，随着页面的滚动进度

今天为什么要给大家讲解这个东西呢，因为css这部分，尤其是数值这部分感觉非常简单，但是尤其是简单的，却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。width height 百分比当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。<div class="container"> <div class="inner">注意这里</div> <div class=

今天面试了一个前端实习生，我问了一个比较简单的问题，就是css如何实现元素垂直居中的问题，但是要说出多种方案。其实他说的不错，基本上说到了flex布局，grid布局等下面提到的布局。还不错，但是这几种都是已经经常用的，老生常谈，但是我想听到他说一种用的比较少的解决方案，了解一下他学习的深度和广度。但是很遗憾他没有说出来。今天就给大家讲一讲这个解决方案吧众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下：

只能在render函数里面使用JSX吗当然不是，你可以定义method，然后在method里面返回JSX,然后在render函数里面调用这个方法，不仅如此，JSX还可以直接赋值给变量，比如下面这段代码 methods: { $_renderFooter() { return ( <div> <ElButton>确定</ElButton> <ElButton>取消</ElBut

是时候使用JSX代替createElement了接着上面的讲，当我们看到上面用createElement去实现组件，太麻烦了，别说工作效率提高了，就是那些嵌套可以嵌套正确就很赞了，所以我们需要用JSX去简化整个逻辑。当年我做项目的时候就遇到过这样的情况，嵌套太多，自己都快搞不明白了，在崩溃的边缘。methods: { $_handleInputUser(value) { this.formInline.user = value }, $_handleChangeRegion(valu

学习JSX,先了解一下createElement提到JSX,不可避免的就要提到createElement,当你看完本节，你会发现，奇怪的知识又增多了。ok，我们接着上一部分继续讲。这一次的准备工作是了解createElement。从Vue编译后的代码看createElement你是否看过写的Vue代码经过编译之后的样子，比如下面这段代码<template> <div>我喜欢<span class="emphasize">前端</span></

最近在做一个项目，然后里面也用到了jsx。因为其实有一些功能也需要更加灵活的去处理。介绍一下JSXJSX 简介JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。应用场景为了让大家更方便的去理解JSX的作用及用法，我先为大家罗列了几个可能会用到JSX的应用场景。在消息框内添加html在开发过程中，经常会用到消息框，使用

最近在教我老婆学习前端，她说想要学习前端，自己在家赚点外快，自己赚点家用。我也拗不过她，而且其实我也挺佩服的。所以就教她了。最近我想考一考她对css中伪类的了解，所以就问了她了解css多少个伪类，伪类是什么？她说css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。我点了点头，答得不错继续。然后她慢慢的说了几个常用的伪类元素，答得还不错，但是她掌握的伪类还是太少了。所以我让她将接

前言前几天，我接到了一个项目，模块中要写一个卡券效果，当时没有图片，也就是要用css来实现，当时我是懵逼的，也没有写过这样的，一时间不知道怎么写，毕竟要写的像UI设计的一样美观。我就只好求救我的大神级别的同事了。不仅css玩的溜，人家JavaScript玩的更溜，阁下实在是佩服。常见的卡券样式如下：同事二话没说，直接给我写了一种，那真的是快如闪电就给我实现了一个。是用伪元素实现的使用伪元素实现（Less 版本）ticket.less.ordinary-mixins-ticket-horizo

今天看见徒弟写个css属性这么慢，是在是看不下去了，就问了他有没有用过一些辅助工具，他说没有，额。。。我也是很无语，没办法，谁叫我是他师傅呢。还是要尽到一个师傅的责任。所以就利用休息时间给他讲了19个辅助工具，满满的干货呀。我这也是第一次给别人说这么多，这么详细，想想还不错，教给别人东西的感觉是不一样的，别说是徒弟呢。CSS代码生成器我："你曾经是不是想记住如何声明渐变，文本阴影，Flexbox或Grid的CSS属性。徒弟：“是的”我：“那你还真是不容易呀，你如果不是一直在用某些css功能和属性，不

首先，为什么说叫所谓呢？因为在2007年之前Js给予我们typeof解析数据类型的一共有六种（一直有争议，但是我们暂时就按typeof来算）‘function’‘Number’‘Object’‘boolean’‘String’‘undefined’但当我们去 typeof Symbol () 的时候，会惊奇的发现，返回了一个‘symbol’首先肯定要有疑问，这货是啥？当然第一种想法其实就是肯定很强大。因为前六种已经强大的一种地步了，这货肯定也一定非常强大。首先我们先带着我们的好奇心一

display: none;DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；事件监听：无法进行 DOM 事件监听；性能：动态改变此属性时会引起重排，性能较差；继承：不会被子元素继承，毕竟子类也不会被渲染；transition：transition 不支持 display。visibility: hidden;DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；事件监听：无法进行 DOM 事件监听；性 能：动态改变此属性时会引起重绘，性能较高；

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列表中的重复项。/* BEFORE */.embed .save-button:hover,.attachment .save-button:hover { opacity: 1;}/* AFTER */:is(.embed, .attachment) .sav

接下来就好好介绍一下这七个开发调试工具，用起来是真的爽啊。建议收藏使用哦！Web浏览器中的开发工具任何现代的 Web 浏览器都配有功能强大的工具来调试应用程序。 如使用控制台语句cconsole.log()，使用alert()的弹出窗口，还可以使用debugger语句暂停代码执行，这些对于我们的调试都很有帮助。我们还可以使用网络检查器或CSS样式检查器让调试变得更轻松流畅。任何现代网络浏览器都配备了强大的工具来帮助调试您的应用程序。它可以简单到使用console.log()的控制台语句，使用aler

下面是总结的css技巧，建议大家收藏，以后用的时候就不用到处查资料了。当然这些也不是所有的，大家如果有什么好的css有趣样式技巧也可以发出来哦三角形最常见的一种形状了。切图，不存在的。/** 正三角 */.triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129,

元编程是一种强大的技术，使你能够编写可以创建其他程序的程序。ES6借助代理和许多类似功能，使在JavaScript中利用元编程变得更加容易。ES6 Proxy（代理） 有助于重新定义对象的基本操作，从而为各种可能性打开了大门。本指南可以帮助您理解为什么ES6代理如此之好，尤其是对于元编程而言：什么是ES6代理如何以及何时实施代理如何使用ES6代理执行访问控制，数据绑定和缓存ES6代理不是性能密集型任务的理想选择先决条件和结果本教程主要针对有JavaScript经验的开发人员，至少要熟悉ES

一、Why choose front-end2015.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这

不知道大家有没有注意过对象中的一些通用方法，例如所有所有的对象都有 toString、constructor 等等一些方法。当然如果要仔细看的话，大家可以：var a = {}; console.log(a);我们可以清晰的看到他有很多的内置方法。当然，也可以看到最下面有两个比较怪的方法 get 和 set ，只要是对象就可以找到这两个方法，但是究竟怎么使用这两个方法呢？我自己研究了半天，发现可以这样使用，就拿最简单的对象 json 来举例。var Json = { set

想学习 TypeScript 的小伙伴看过来，本文将带你一步步学习 TypeScript 入门相关的十四个知识点，详细的内容大纲请看下图：一、TypeScript 是什么TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 De

开发人员将 JavaScript 设计模式作为解决问题的模板是很合适的，但并不是说这些模式可以代替开发人员的工作。通过设计模式，我们可以将许多开发人员的经验结合起来，以优化过的方式来构造代码，从而解决我们所面对的问题。设计模式还提供了用于描述问题解决方案的通用词汇表，而不是去枯燥地描述代码的语法和语义。JavaScript 设计模式可帮助开发人员编写出井井有条、美观且结构合理的代码。尽管设计模式很容易重用，但它们并不是要取代开发人员的工作；它们是开发人员的支持与辅助，提供了与特定应用程序无关的通用解决方

前端开发如何看待“别更新了，学不动了”？Deno、TypeScript 等新轮子层出不穷，未来前端重点方向在哪？前端开发在大前端浪潮下如何持续学习、成长？SpriteJS 3.0 的特性和规划SpriteJS 是由 360 奇舞团开源的跨平台高性能图形系统，它能够支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果，不久前刚发布了 3.0 版本。与 SpriteJS 2.0 相比，SpriteJS 3.0 是真正优先使用 WebGL2 和 WebGL 进行渲染的跨平台图形系统。3.0 版

在日常的项目中，有时候还是不可避免的会维护一些jq官网项目等。面对此类需求，很多还是以前的老套路，前端写页面交给后端去套数据。很烦有木有～～而改动之后还得交给后端再次修改，时间和沟通都是个麻烦。同时开发中，写静态页面也很麻烦，不能复用，不能使用现在的工具，心累有木有～～当然了，解决办法很多自己写个webpack脚本维护起来，把工程化的那一套东西搬过来。使用现成的nust\next等服务端渲染框架借助于node+模板引擎等…而本文介绍一下node的egg.js框架配合模板引擎来快速开发项目的模式

核心思路采用CSS3的transition（过渡效果），给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下（浏览器前缀可自行添加）：#pointer { transition: transform 6.5s; transition-timing-function: ease-in-out;}这样，给定结束角度后，元素就会旋转，结束角度可以自由控制旋转的圈数，例如结

不用说我也知道，此类文章太多太多了，常见的譬如：viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????1. 弹出数字键盘<!-- 有"#" "*"符号输入 --><input type="tel"><!-- 纯数字 --><inp

延迟函数delayconst delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail')})const getRes = async (data) => { try {

因为所出标签太多，所以我们很难都用得上或者意识到需要用。 但其实也有许多有趣但是我们未曾发掘的标签，本文所要介绍的 **** 便是一个。是什么？**** 标签一个类似于 **** 标签一样可以通过包裹 **** 来表示控件可选值的，唯一不同的就是 **** 需要配合 **** 来使用，而且 **** 不表示任何内容，仅作展示。 我们康个栗子：嗯，就芥末简单。 下面是它的兼容性情况：搜索提示在我们的日常开发中，如果我们要实现一个搜索框的搜索提示，实际上我们还要写一堆的事件监听跟数据绑定，但是如果

盒模型盒模型主要两种，标准盒模型和怪异和模型标准盒模型：width指content部分的宽度怪异盒模型：width指content、padding、border的总宽度解决方法：box-sizing属性，值为content-box（标准盒模型），值为border-box（怪异盒模型）垂直居中方法已知宽高，左上50%，坐上外边距缩进长宽一半的负值 div.box{ weight:300px; height:400px; position:absolute;

powertools可以称得上插件界的瑞士军刀。相对于VS Code中大多数插件的出现为了解决某一项弊端和不足，powertools则聚合了很多强大且实用的功能，能够增强VS Code的功能，并提升VS Code的使用体验。powertools就如同之前使用iOS系统时使用过的一款软件Workflow，它相对于大多数插件功能更加丰富，但是门槛也更高一些。也就是说，想要最大发挥这款插件的价值，仅凭默认的配置是不行的，还需要结合脚本使用。换句话说，需要自己会用js开发一些脚本，如同开发一款简易版的vs c

问题描述基于vscode的方式创建wps加载项在获取类型之后，无法自动生成wps加载项，在网上查询相关问题内容也无果。不过Wps官方文档又更新了通过npm全局的方式创建wps加载项，下面就来具体介绍一下。解决方案创建步骤：1.准备开发环境（1）安装wps 2019（2）安装node.js环境（3）安装 Visual Studio Code2.创建wps加载项打开命令窗口（win+R 输入cmd），然后输入安装命令npm install -g wps js图 2.2.1 执行安装命令输

前言BootStrap4作为最出色的前端响应式框架之一，能够根据不同的设备，调整页面显示效果。但是，仅仅依靠调整原有元素的大小、排列，很难有好的呈现效果和用户体验。因此对于电脑及手机端用户，要根据设备的不同适当更换页面的内容，来达到更好的页面呈现效果及用户体验。案例先来看一个小案例，这是同一个网页分别在电脑及手机端的显示效果。(源码在最后)图一 电脑端显示效果图二 手机端显示效果分析根据不同设备的两种显示效果可以看到，在电脑及手机端中有相同的部分，也有不同的部分。相同的是中间内容部分，不

我们在写笔试题的时候，经常碰到涉及隐式转换的题目，例如"1" + 2obj + 1[] == ![] [null] == false=== 和 ===== 叫做严格运算符，对象类型指向地址相同或原始类型（ 数值、字符串、布尔值）值相同；叫做相等运算符，类型不同会进行转化再比较，undefined、null相等，对象类型还是比较引用。运算符将原始值和其包装对象视为相等，但=运算符将它们视为不等。 所有obj.anull（相当于obj.a=== null || obj.a ===undefined

初学编程的小伙伴经常会遇到的问题，1.没资源 2.没人带 3.不知道从何开始 ，小编也是从新手期过来的，所以很能理解萌新的难处，现在整理一些以前自己学习的一些资料送给大家，希望对广大初学小伙伴有帮助！给你学习前端的新手几个建议：第一：切记学习前端开发不可以依赖任何人，我做了开发这么久，十年了，见过很多依赖老师的学生，这样的后果就是自己没有解决问题的能力，也没有自主学习的能力，面试不能通过，找工作会非常难，因为学习开发就是锻炼这种自我学习的能力。第二：必须而且一定要有一个老师带着学，无论是学习JAV