文章列表

浏览器渲染之回流重绘

回流和重绘是前端开发的高频词汇之一,你可以在各种面经,性能优化相关文章可以看到,但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。

你需要知道的项目管理知识

作为一名软件开发工程师,为什么要了解项目管理知识呢?不知你是否在想,程序员只要写好代码就好了,何必要关心项目管理呢。在当今程序员行业愈发饱和的时候,保持竞争力是永恒的话题,而项目管理知识作为程序员的“软技能”,不仅能锻炼你的组织协调、沟通协作的能力,同时也能帮助你在技术道路上越走越宽,越走越好。

React 中的一些 Router 必备知识点

每次开发新页面的时候,都免不了要去设计一个新的 URL,也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接,偶尔也可以去考虑有没有更“优雅”的设计方式和技巧。而在这背后,路由和组件之间的协作关系是怎样的呢?于是我以 React 中的 Router 使用方法为例,整理了一些知识点小记和大家分享

我在工作中是如何使用 Git 的

最近在网上有个真实发生的案例比较火,说的是一个新入职的员工,不会用 Git 拉代码,第二天被开除。由此,可见 Git 对我们工作的重要性,无论是前端后端,都是离不开 Git 的,下面就让我们一探究竟吧。

v8 执行 js 的过程

本文意在简单的介绍一下 V8 执行 JS 的过程,通过了解 V8 执行 JS 的过程,去优化平时我们自己写的代码,真正知道为什么在编写某些代码的时候,效率比较低以及怎么去写好我们的 JS 代码。当然本人也是在陆续探索 V8 ,文章中如有不当之处,还望不吝指正,理性交流。

JS常用的循环遍历你会几种

数组和对象作为一个最基础数据结构,在各种编程语言中都充当着至关重要的角色,你很难想象没有数组和对象的编程语言会是什么模样,特别是 JS ,弱类型语言,非常灵活。本文带你了解常用数组遍历、对象遍历的使用对比以及注意事项。

聊聊Deno的那些事

Deno 是一个简单、现代、安全的 [JavaScript](https://www.javascript.com/)、[TypeScript](https://www.typescriptlang.org/)、[Webassembly](https://webassembly.org/) 运行时环境。 Deno 起源于 Node 的创建者 **Ryan Dahl**,这也是大家对 Deno 项目充满期待的原因之一。在 JSConfEu 上,**Dahl** 在他的的[演讲](https://www.youtube.com/watch?v=M3BM9TB-8yA&vl=en)中说出了自己对 Node 中存在的一些缺陷,并解释了如何围绕 Node 的架构做出更好的决定,在演讲的最后,宣布了 Deno 的第一个原型,并承诺构建一个更好、更安全的运行时环境。

编写高质量可维护的代码:程序范式

什么是编程范式呢? [**编程范式**](https://zh.wikipedia.org/wiki/%E7%BC%96%E7%A8%8B%E8%8C%83%E5%9E%8B)(Programming paradigm)是一类典型的编程风格,是指从事[软件工程](https://zh.wikipedia.org/wiki/软件工程)的一类典型的风格(可以对照[方法学](https://zh.wikipedia.org/wiki/方法学))。如:[函数式编程](https://zh.wikipedia.org/wiki/函數式編程)、[过程式编程](https://zh.wikipedia.org/wiki/过程式编程)、[面向对象编程](https://zh.wikipedia.org/wiki/面向对象编程)、[指令式编程](https://zh.wikipedia.org/wiki/指令式编程)等等为不同的编程范式。

如何用 JS 实现二叉堆

二叉树(Binary Tree)是一种树形结构,它的特点是每个节点最多只有两个分支节点,一棵二叉树通常由根节点、分支节点、叶子节点组成,如下图所示。每个分支节点也常常被称作为一棵子树,而二叉堆是一种特殊的树,它属于完全二叉树。

前端异常的捕获与处理

按键无法点击、元素不展示、页面白屏,这些都是我们前端不想看到的场景。在计算机程序运行的过程中,也总是会出现各种各样的异常。下面就让我们聊一聊有哪些异常以及怎么处理它们。

编写高质量可维护的代码:优雅命名

俗话说得好,万事开头难。而对于前端 coder 来说,每次新项目、新需求来的时候,我想大家最苦恼的往往就是如何去命名,无论是项目名称、页面的文件名称亦或是代码中的方法名称,对于我来说,但凡名字想好了以后,我觉得需求就已经写完一半了。 如何才能更好,更优雅的去解决这些命名问题呢?在这之前,先随我看一些不合适的命名示例吧。

编写高质量可维护的代码:Awesome TypeScript

高质量可维护的代码应具备可读性高、结构清晰、低耦合、易扩展等特点。而原生的 JavaScript 由于其弱类型和没有模块化的缺点,不利于大型应用的开发和维护,因此,TypeScript 也就应运而生。 TypeScript 是 JavaScript 的一个超集,它的设计初衷并不是为了替代 JavaScript,而是基于 JavaScript 做了一系列的增强,包括增加了静态类型、接口、类、泛型、方法重载等等。所以,只要你有一定的 JavaScript 功底,那么 TypeScript 上手就非常简单。并且,你可以在 TypeScript 中愉快的使用 JavaScript 语法。

V8 引擎垃圾回收与内存分配

工欲善其事,必先利其器,本文之器非器具之器,乃容器也,言归正传,作为一个前端打工人,左手刚 const 定义常量,忠贞不二,转头就 new 几个对象,玩的火热,真是个优秀的 jser,风骚的操作背后,必有日夜不辍的 QWER,外加一个走 A,废话不多说,浏览器内核是啥玩意?还不知道都有啥浏览器内核?那就先来看看浏览器内核。

拥抱 Vue 3 系列之 JSX 语法

在过去的一年中,Vue 团队一直都在开发 Vue.js 的下一个主要版本,就在 6 月底,尤大更新同步了 Vue 3 及其周边生态的状态。本文是该系列文章的第一篇,后续会持续更新,覆盖 Vue 3生态常用库。JSX 是一个小众群体使用开发方式,第一篇以 JSX 为切入点,目标是让大多数开发 Vue 的同学也对 JSX 有一定的认知,在用 Vue 开发复杂应用时,也能有更加灵活的方式。

一份值得收藏的 Git 异常处理清单

Git 作为一种分布式版本控制系统已经成为现在开发的宠儿,不仅应用在前端、后端、客户端等开发场景中,也成为各行业互联网企业分工协作的必备技能之一。大家在使用过程中总会碰到这样那样的问题,本文主要针对一些经常发生的异常情况提供解决方案。

这就是你日思夜想的 React 原生动态加载

随着前端应用体积的扩大,资源加载的优化是我们必须要面对的问题,动态代码加载就是其中的一个方案。React.lazy()  和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。 React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件,结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。

图解 HTTP 缓存

HTTP 的缓存机制,可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解,争取做到大家读完整篇文章后,对缓存有一个整体的了解。

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

回顾一下[通俗易懂的红黑树图解(上)](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 万字,我不知道能有几位看官有耐心看完。如果真有,且发现@堂主 一些地方翻译的不对或有优化建议,欢迎留言指教,共同成长。另外,非本土产技术类书籍,优先建议还是直接读英文原版。
责任编辑:堂主