JavaScript底层原理之垃圾收集

JS自动管理内存, 不像C提供 malloc 和 free 可以自己控制内存的使用和释放, 因此掌握JS垃圾收集的原理才能让我们写出配合JS…

Read

webpack是如何打包代码的?

从模块化规范说起 在实现webpack之前我们先回顾一下js模块化的规范, 因为webpack的编译模版代码的原理和commonjs模块的原理相同. commonjs commonjs的模块实现原理是: 读取目标模块内容并运行, 参数传入一个module…

Read

express核心原理实现

express是Node.js写服务端的常用框架之一, 集成了路由系统, 使我们很方便的开发web应用, 之前写了一篇Koa的实现原理对比express, 本篇就来接着写一个express的轻量级实现, 来复习下express…

Read

Redux Saga核心原理实现

Saga解决了什么问题? react-redux无法处理异步任务, 通常我们使用 redux-thunk 来处理异步任务 thunk 是如何解决处理异步任务的? redux的action是一个plain object: {type: ACTION_TYPE, payload…

Read

webpack的HRM是如何实现的?

很久之前写过一篇Live Server的实现 从webpack-dev-server看Dev Server功能设计 , 里面讲到了到开发服务器serve一个index.html后是如何动态刷新页面的: 在目标index.html中注入client websocket…

Read

文件上传最佳实践

本篇文章实现一个文件上传的功能, 有以下特性: 断点续传 重复文件秒传 小文件整体上传 大文件分片上传 断点续传(单个分片续传和浏览器刷新续传) 暂停和恢复 技术栈为 React + Node.js…

Read

从Koa核心功能实现对比与Express的区别

很久没有看express源码了, 温故知新, 现在时间充足可以将express的核心源码实现一遍, 说起express不得不提Koa, 本篇文章将回顾Koa的核心实现, 以及与Express做一个对比。 文件结构 看Koa和Express的源码可以看出他们最明显的区别是: Koa…

Read

https原理之https是如何保障web安全的

Why https HTTPS = HTTP + TLS/SSL, http端口80, https端口443 HTTP和TCP之间, 即应用层和网络层中间, 信息加密(防窃听), 完整性校验(防篡改), 信息劫持(身份验证) 多个client与server…

Read

深入 Ant Design Button 内部原理 (翻译)

Ant Design是React生态中一个高质量的UI组件库, 本文带领大家深入了解最经典的Button在 Antd 中是如何实现的。 handleClick 首先让我们看一下按钮的点击事件处理函数 handleClick…

Read

在React中使用Renderless组件处理数据 (翻译)

划重点: 在React应用中,你应该使用无渲染组件去管理数据和状态为了组件的复用性和可组合性, 讲真! 很多React的使用者容易疏忽一个问题: 不是所有的组件都需要渲染UI。举个例子, 当获取数据时候很多人会这样写 重构: composition, SRP and SOC…

Read

编写React组件的最佳实践(翻译)

众知React应用是一种基于组件的架构模式, 复杂的UI…

Read

React Router源码分析及实现

介绍 React Router 的实现依赖于一个操作 HTML5 histroy API 的库 history , 每个路由组件都会创建一个 history 对象来追踪当前的地址 (history.location)并且之前的地址会保存在 history stack…

Read

搭建React脚手架 create-react-app原理分析

构建 React 应用的第一步是搭建 React 开发环境, 开发环境是项目的基石也是比较复杂繁琐的一个部分, 因此搭建一个脚手架工具来完成自动化的流程是必不可少的。Facebook 官方提供了一个有效且功能齐全的 React 应用脚手架工具 create-react-app…

Read

从webpack-dev-server看Dev Server功能设计

Development Server 是我们在开发和调试中必备的工具, gulp、webpack、fis 等前端构建工具都支持这个功能。 Dev Server的核心特性之一就是live reloading, 正如 webpack-dev-server 官方的介绍一样 Use…

Read

实现Chrome Web Push服务

介绍 推送类型的广告作为一种新型的广告形式已经兴起很久了, 通过适(欺)当(骗)的文案相比传统Banner广告有着不可思议的转化率。用户很乐意去点击感兴趣的推送而进入我们想让他进入的网站。HTTP Web Push协议中描述Web推送服务的架构如下 在这个架构中我们看可以看到有…

Read

回顾CSS float属性

现在再来讨论float属性似乎已经是outdated. 因为现在人们现在为了兼容性和开发效率更多的使用Grid system或者Flexbox布局代替float. 到现在为止对于float人们还有很多争议, 比如到底该如何使用float, 甚至该不该使用float. float…

Read

如何有效提升英文写作

最近要写的 paper 很多, 在写的时候一直在思考一个问题: 如何有效的提升英文写作能力. 查看了一些相关资料并结合自己经验总结了一种有效提升英文写作能力的解决方案(只针对Academic Writing). 对于 Academic Writing…

Read