小森林

JavaScript 中没有类

是的，JavaScript 中既不存在类（Class）也没有继承，JavaScript 是一门基于原型（Prototype）的语言，在 JS 中使用类的概念的万恶之源应该是 Douglas Crockford：把 JS 当作基于类的语言本来就是容易误导的一个前提，书里写的组合、寄生、组合寄生继承等方式让整个问题更加难以描述清楚了。接下来我们看一下常见的 JS 模拟类机制。模拟类继承12......

Posted by jiananshi on 2019-04-22

[译]Mixins 是反模式

“如何在不同的组件间共用一部分代码？”，这是学习 React 的人最常问的问题之一，对此，我们的答案总是让他们组合使用组件，你可以定义一个组件然后在其他组件中引用他。如何使用组合来解决问题并不总是那么清晰明确，React 受函数式影响，但是在绝大多数 JS 库都是面向对象的，这一点对于无论是 Facebook 内工作的人还是其他开发者都很难放弃他们原本习惯的开发方式。为了降低学习成本......

Posted by jiananshi on 2019-04-10

Etag 和 Last-Modified 的优先级

上一篇文章中了解了常用的 HTTP 缓存头部，不难发现在不同工作阶段有的头部的工作会相互冲突，当发生冲突时服务器应当如何处理呢？ 1. 过期和验证过期的优先级高于验证，如果 expires 和 cache-control 存在且没有过期，那么客户端并不会对 etag 和 last-modified 向服务端发起验证（expires 属于 HTTP 1.0，这里不针对他的优先级做赘述） 2. ......

Posted by jiananshi on 2019-03-10

HTTP 缓存

ETag、cache-control、expires… 涉及到缓存的 HTTP Header 有这么多用的时候很容易混淆，本篇文章就写一下不同的缓存头是如何工作的。网上很多文章将缓存分为「强缓存」和「协商缓存」，原始出处不知道是哪里，在 w3c 草案中有这样一段描述： …在 HTTP 1.1 中，缓存的目标是在大部分情况下尽量不发送请求，在其他情况下尽量不发送全部的响应，前者减少了网络......

Posted by jiananshi on 2019-03-08

Event loop 是什么

终于把 Youtube 上收藏了好几年的 What the heck is the event loop anyway? | Philip Roberts | JSConf EU - YouTube 看了，所以记录下来。在开始了解 Event loop 之前，首先需要对 JavaScript 的执行栈（call stack）有一个基本的了解，如下的代码： 1234567891011func......

Posted by jiananshi on 2019-03-05

与是枝裕和达成和解

最早听到是枝裕和这个名字是在七月份的某天觉得很无聊，于是和 gogu 说一起倒着刷豆瓣电影 250 吧，彼时海街日记还将将够着 250 榜单的最后一名（今天看已经排到 198 了，多半是随着小偷家族上映带来的热度吧 2019.2.19），只记得片子节奏很缓，断断续续看了两天（成年后养成的一个不好的习惯，在家看电影很容易中途做别的事），只记得广濑铃很かわいい，当时的我连长泽雅美都不认识呢，至......

Posted by jiananshi on 2019-02-19

如何在 React 中绑定一个事件处理函数

这篇文章的起因是最近看到同事的在处理一个可以响应用户交互需求时的代码： 1234567891011import React from 'react';class App extends React.Component { render() { return ( <button onClick={() => alert('Clic......

Posted by jiananshi on 2018-07-29

HTTP Response Splitting

前阵子安全部门报过来了一个非常有意思的漏洞，在我们支持 HTTPS 后，HTTP 访问都会被 301 到 HTTPS，在服务端配置如下： 12345server { # ... server_name example.com; return 302 https://$host$request_uri;} 乍一看是非常简单的配置，但其中有一个容易忽视的地方是，我们直接......

Posted by jiananshi on 2018-03-29

keepalive 简介

前端关注的 keep-alive如果你关注过「缓存」这件事，写前端的时候一定会注意到诸如：Cache-control / etag / connection… 诸如此类的 HTTP 头，如下图所示：（注：keep-alive 属于 HTTP/1.1 的内容，h5.ele.me 很多资源上了 h2，这里特意选了一个 HTTP/1.1 的请求做例子）我们都知道 HTTP 请求是很昂贵的，......

Posted by jiananshi on 2018-02-22

Flex 的一些常见问题

记得 Flexbox 刚刚开始有人用时，除了兼容性问题大家一致觉得这个特性节省了前端写页面的时间，记得移动端的美食墙（目前已经这个功能已经下线了）就是利用了 Flex 可以在垂直方向上排列元素的特性来写的。使用 Flexbox 免去了往常写 float 要处理高度坍塌，有的场景要考虑到 BFC（Flex container 本身会创建一个 FFC - Flex Formatting Cont......

Posted by jiananshi on 2017-11-23