文章列表

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