文章列表

通俗易懂的红黑树图解(下)

回顾一下[通俗易懂的红黑树图解(上)](https://juejin.im/post/5dff59cb6fb9a0163c53ce1d),上篇首先介绍了二叉树的定义以及二叉树的查找,然后介绍了红黑树的五点性质以及红黑树的变色、左旋以及右旋等操作,最后结合变色、左旋及右旋详细讲解了插入节点的五种场景。而本篇通俗易懂的红黑树图解(下)是在上篇的基础上讲解红黑树最后一种操作-删除节点,删除节点相对插入节点会复杂一点,但通过分类归纳出不同的场景,能更容易理解和记忆。

五分钟看懂 Nginx 负载均衡

对于电商平台而言,随着业务的不断发展壮大,网站访问量和数据量也随之急剧增长,该情况的产生给服务器带来了一定的负担。从用户体验层面而言,由于服务器端数据处理带来的时延,往往导致页面的响应速度过慢、操作流畅性受阻等问题。这在某种程度上甚至会潜在影响平台的成交量。提供高效率,高质量的服务成为亟待解决的问题。负载均衡策略的出现和发展成为缓解上述问题的有效途径。本文将带你了解基于 Nginx 实现的负载均衡。

webpack-dev-middleware 源码解读

Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务,大家只需在 Webpack 的配置中,增加 [devServer](https://www.webpackjs.com/configuration/dev-server/) 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能,而 webpack-dev-middleware 则是这个包的底层依赖。本文将为解读 webpack-dev-middleware 源码。

关于 vertical-align 你应该知道的一切

vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。本文讲解了 vertical-align 的基本属性以及各种表现,同时对一些实际应用中 vertical-align 无效现象做了简单的分析阐述,并为解决此类问题提供了思路。

前端工程师的自我修养-关于 Babel 那些事儿

随着 Nodejs 的崛起,编译这个昔日在 Java、C++ 等语言中流行的词,在前端也逐渐火了起来,现在一个前端项目在开发过程中没有编译环节,总感觉这个项目是没有灵魂的。说起前端编译就不得不提前端编译界的扛把子 Babel ,大部分前端攻城狮对 Babel 并不陌生,但是在这个 Ctrl+C 和 Ctrl+V 的年代,大多数人对它也只是知道、了解或者听过,少数可能配置过 Babel,但也仅此而已。作为一个有想法和灵魂的前端攻城狮仅仅知道这些是不够的,你需要对 Babel有一个系统的了解,今天就来聊聊 Babel 那些事儿。

小白必看,JSBridge 初探

JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS,JS 调用 Native ,是双向通信的通道。本文简要介绍了 JSBridge 的部分原理,希望对从未了解过 JSBridge 的同学能有所帮助。

Antd Form 实现机制解析

表单页面的需求往往更复杂和定制化,除了基本操作,还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景,在一些大型表单页面中还要考虑性能的问题,表单页面的需求往往是新同学摔得第一个跤。本文分为两个部分,第一部分会通过对 Antd Form 源码的分析来帮助大家对 Form 的整体设计和流程有一个清晰的概念,第二部分会分享一些复杂场景的解决方案。希望可以帮助大家更容易的处理表单需求和快速定位表单场景中的问题。

你可能不是那么了解的 CSS Background

Background,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,背景嘛。MDN 中对其的定义如下:Background 是一种 CSS 简写属性,一次性定义了所有的背景属性,包括 color, image, origin 还有 size, repeat 方式等等。本文主要介绍 background 属性的一些基础和进阶用法。

通俗易懂的红黑树图解(上)

红黑树(英语:Red-Black-Tree)是在 1972 年由[鲁道夫·贝尔](https://zh.wikipedia.org/wiki/鲁道夫·贝尔)发明,被称为"**对称二叉 B 树**",是一种由红黑节点组成并能自平衡的二叉查找树。本文主要是介绍红黑树的基础知识以及增加节点操作,删除操作会放到《通俗易懂的红黑树图解(下)》。

性能!!让你的 React 组件跑得再快一点

React 提供的虚拟 DOM 和高效的 Diff 算法的完美搭配,实现了对 DOM 最小粒度的更新。在大多数情况下,React 对 DOM 的渲染效率可以满足我们的开发需求。但是个别复杂业务场景下,性能问题在所难免,我们需要采取一些措施来提升性能,其中 React 组件的渲染性能优化很重要的一点就是避免不必要的渲染。

纯 JS 实现放大缩小拖拽踩坑之旅

最近团队需要做一个智能客服悬浮窗功能,需要支持拖动、放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法,在这里和大家分享交流一下。

WebSocket 原理浅析与实现简单聊天

随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高,为了应对诸如此类的高实时性场景,比如即时通讯等,WebSocket 协议应运而生,实现了高效的客户端和服务端双向通信。本文简单和你聊聊 WebSocket 协议实现聊天功能。

茶余饭后聊聊 Vue3.0 响应式数据那些事儿

Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的,在很多方面进行了重构。本文主要和大家聊聊重构后的响应式数据。

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

工欲善其事,必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具,最近半年 Chrome 更新了 6 个版本,其中的 5 个版本里 Chrome Devtools 也更新了一些新功能,我们对最近的一些更新做了翻译整理,下面我们一起来看看近半年有哪些值得关注的新功能。

浏览器里的本地数据库:IndexedDB

在现代浏览器的本地存储方案中,indexedDB 是一项重要的能力组成, 它是可以在浏览器端使用的本地数据库,可以存储大量数据,提供接口来查询,还可以建立索引,这些都是其他存储方案 Cookie 或者 LocalStorage 无法提供的能力。单从数据库类型来看,IndexedDB 是一个非关系型数据库(不支持通过 SQL 语句操作)。

DIY VSCode 插件,让你的开发效率突飞猛进

Visual Studio Code(简称 VSCode)凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点,从众多 IDE 中脱颖而出,受到了广大开发人员的青睐。工欲善其事,必先利其器。选择适合自己的 VSCode 插件,能够让你的开发效率突飞猛进。[VSCode 插件市场](https://marketplace.visualstudio.com/VSCode) 上面插件百花齐放,但实际开发过程中问题复杂且多变,有时候并不能找到完全满足你实际开发需求的插件,那就自己动手 DIY 一个吧。VSCode 提供以下扩展能力:代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。你可以根据自己的需要随意组合使用。

看完这篇,面试再也不怕被问 Webpack 热更新

Webpack 热更新( Hot Module Replacement,简称 HMR,后续均以 HMR 替代),无需完全刷新整个页面的同时,更新所有类型的模块,是 Webpack 提供的最有用的功能之一,本文将深入剖析Webpack 热更新原理

基于 Vue 的商品主图放大镜方案

在做电商类应用时,难免会遇到商品主图实现放大镜效果的场景,现有的基于`Vue`的第三方包不多并且无法直接复用,今天,我来分享一种高鲁棒性的基于 `Vue` 的图片放大镜方法。

前端工程师需要了解的 Babel 知识

在前端圈子里,对于 Babel,大家肯定都比较熟悉了。如果哪天少了它,对于前端工程师来说肯定是个噩梦。Babel 的工作原理是怎样的可能了解的人就不太多了。 本文将主要介绍 Babel 的工作原理以及怎么写一个 Babel 插件。

看完这篇,你也能把 React Hooks 玩出花

React Hooks 的出现使函数式组件变得焕然一新,其带来的最大的变化在于给与了函数式组件类似于类组件生命周期的概念,扩大了函数式组件的应用范围。 目前函数式组件基本用于纯展示组件,一旦函数式组件耦合有业务逻辑,就需要通过 Props 的传递,通过子组件触发父组件方法的方式来实现业务逻辑的传递,Hooks 的出现使得函数组件也有了自己的状态与业务逻辑,简单逻辑在自己内部处理即可,不再需要通过 Props 的传递,使简单逻辑组件抽离更加方便,也使使用者无需关心组件内部的逻辑,只关心 Hooks 组件返回的结果即可

CSS 层叠上下文(Stacking Context)

在网页制作的过程中,元素与元素之间的位置关系,在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚,而 Z 轴 则相对较为模糊,或者说不能全面的理解Z轴的显示逻辑。大多数人都知道可以使用 `position` 属性配合 `z-index` 属性解决元素的 Z 轴显示问题,对于更深层次的原理却不太了解。本文主要介绍了层叠上下文、层叠等级、层叠顺序等概念。目的就是为了理清元素的 Z 轴显示顺序的内部逻辑。

Vue 组件数据通信方案总结

组件是 Vue 应用的主要构成部分,但组件内部的作用域是相对独立的。复杂业务场景下,组件与组件之间的数据通信较为频繁,对于 Vue 组件之间的数据通信的不同方案,本文提供了一些常用的总结。
责任编辑:猴哥

JAVASCRIPT OBJECTS

ECMAscript 说明文档对这门语言的定义是“一门适于在宿主环境中执行计算及操作计算对象的面向对象的编程语言”。简单的说,JavaScript是一门面向对象(OO)的语言。 面向对象讲究的是专注于对象本身——它们的结构,它们互相间是如何影响的。本文是@堂主 对《Pro JavaScript with Mootools》一书的第三章 Object 部分的翻译,最早译于 2012 年。因为面向对象编程本身已经超出了本书的叙述范围,所以我们在本章所谈的只是 JavsScript 自身在面向对象方面的那些特点。 本篇译文字数约 3 万字,各位看官如发现翻译错误或有优化建议,欢迎留言指教,共同成长。另外,同样的建议——非本土产技术类书籍,建议还是优先阅读英文原版。
责任编辑:堂主

JAVASCRIPT FUNCTIONS

本文是@堂主 对《Pro JavaScript with Mootools》一书的第二章函数部分知识点讲解的翻译。该书的作者 Mark Joseph Obcena 是 Mootools 库的作者和目前开发团队的 Leader。虽然本篇文章实际译于 2012 年初,但个人感觉这部分对 Javascript 函数的基本知识、内部机制及 JavaScript 解析器的运行机制讲的非常明白,脉络也清楚,对初学者掌握 JavaScript 函数基础知识很有好处。尤其难得的是不同于其他 JavaScript书籍讲述的都是分散的知识点,这本书的知识讲解是有清晰脉络的,循序渐进。换句话说,这本书中的 JavaScript 知识是串起来的。 虽然这本《Pro JavaScript with Mootools》国内并未正式引进,但我依然建议有需求的可以从 Amazon 上自行买来看一下,或者网上搜一下 PDF 的版本(确实有 PDF 全版下载的)。我个人则是当初花了近 300 大洋从 Amazon 上买了一本英文原版的,还是更喜欢纸质版的阅读体验。这本书其实可以理解为 “基于 MooTools 实践项目的 JavaScript 指南”,总的脉络是 “JavaScript 基础知识 - 高级技巧 - MooTools 对原生 JavaScript 的改进”,非常值得一读。 本篇译文字数较多,近 4 万字,我不知道能有几位看官有耐心看完。如果真有,且发现@堂主 一些地方翻译的不对或有优化建议,欢迎留言指教,共同成长。另外,非本土产技术类书籍,优先建议还是直接读英文原版。
责任编辑:堂主