bit-react-compiler-in-depth

没想到,2019年居然还有第二篇。

Bit 定义了一个 Env 的概念,来做构这个事情。例如 https://github.com/teambit/envs 所说,他支持 React JS、React TS、Vue、Angular 等等框架的构建方案。

他把测试环节,也纳入了 Env 里面,专门有一个 bit.envs/testers/mocha 是专门干自动化测试的事情。

bit.envs/compilers/react

这里面的东西还是挺简单的,就是把 .js 和 .jsx 两个后缀的文件,走了一下 Babel。

Babel 的配置如下

而 Babel 相关的代码,则在下面两个文件中

这里面没有什么特殊的东西,主要实现内置 babel 和合并 .babelrc 的方案。

非 JS 的东西去哪了?

继续阅读bit-react-compiler-in-depth

bit-react-tutorial 体验

2019 年的第一篇,也可能是 2019 的最后一篇

上半年在做用研业务群的组件跨业务共享方案的时候,曾经看过 bit.dev ,不过当时只是被他的在线预览组件的特性吸引,并没太深入研究这个站点。

但随着下半年越来越多的进行跨业务代码共享,发现传统的 NPM 方式会过于臃肿,组件孵化速度过慢,所以又回过头再研究下 bit.dev 是怎么解决这方面的问题的。

了解 Bit

bit.dev 的文档非常丰富(复杂),挑一些适合大家快速了解和学习的两篇,本文也是从这两篇进行学习的。

Bit 的一些亮点

  • 从已有的组件或项目工程中,直接提取子组件
  • 每一个子组件,都可以独立的进行构建、测试
  • 每个子组件,都会被包裹成独立的 NPM 包

Bit 如何实现的直接提取呢?

继续阅读bit-react-tutorial 体验

AST 基础学习以及躲坑技巧

AST 的全称是抽象语法树,名字也很抽象,给个容易理解的例子。

上面这个例子,是一个简单的常量定义。

当浏览器不支持 const 这种语法的时候,我们需要把他换成支持的 var,这个时候,AST 就上场了。

这里面,每一个包含 type 的层次结构,都叫一个节点(Node)。

这里我们关注的 const 就在一个 VariableDeclaration 的节点上面,开始位置为 0。

一个个 Node 节点,组成了一份描述我们代码的树状结构,也就是 AST。 继续阅读AST 基础学习以及躲坑技巧

捉到 Edge 的渲染 BUG 一只

最近测试同学发现,用 Edge 浏览器,访问问卷的新版设置界面,部分联动锁总是显示异常,该锁的没锁,不该锁的又锁上了。

期初以为是 React 在 Edge 里面有什么 bug,一圈排查下来,发现状态、样式都是正确的,偏偏就是显示出来的很诡异,鼠标在上面晃动一下又正常了(浏览器绘制BUG,以前 IE7 也遇到过)。

这个 BUG 的特征,当使用 :disabled ~ label 这种伪类 + 相邻元素进行样式定义的时候,如果动态修改 input.disabled 的值,其对应的 label 的表现就不会更新。

Demo

继续阅读捉到 Edge 的渲染 BUG 一只

React Key 在非数组、队列场景下的应用

猜猜这段代码会发生什么事?

以为仅仅是切换下按钮?

其实是会执行下面的流程

  1. isEditingfalse 的时候,点击 button
  2. isEditing 变成了 true
  3. 重新 render,在 virtualDOM 进行 diff 的时候,给 button 添加了 type=submit 以及 form='form-1'
  4. #form-1 表单被意外的 submit 了

来个 DEMO 验证下 继续阅读React Key 在非数组、队列场景下的应用

基于 styled-components 实现一套皮肤系统

结构定义

styled-components 使用模版字符串特性,让我们可以保持原有 CSS 的书写习惯来编写 CSS,同时,利用 ${ props => props.theme.xxx } 的方式,实现皮肤系统中挖空填值的能力。

继续阅读基于 styled-components 实现一套皮肤系统

利用 Promise 实现任务流的自动重试

背景

微信小程序不支持 HTTP 的 cookie ,其会话机制是通过开发自己维护一个 session_id 在小程序的本地存储中,每次调用 wx.request 的时候都带上这个 session_id 来实现的会话机制。

那么,有会话机制,就会存在会话失效、更新等等问题。

传统的 HTTP cookie-session 机制,当会话失效的时候,可以在 HTTP 的返回头里面通过 setcookie 来静默返回一个新的 session_id ,小程序就比较麻烦。

传统的实现方案

1.理想的实现情况

2.为了容错,我们会添加返回判断,但错误的时候,再调用一次

上面这种方式,在接口的返回值中做一次判断,然后再执行一次,好像就解决问题了。

但如果我们业务的接口非常多,返回判断是不是要添加很多次呢?

继续阅读利用 Promise 实现任务流的自动重试

await 性能猜想

前言

以往我们推崇异步 I/O 来实现高并发下的高性能,如今 NodeJS 步入 8.x 时代,async await 可以用同步的写法来实现异步处理,不知道对性能是否会有影响,来做个简单的测试。

测试基准

Linode 1G 配置两台,一台用 ab 发请求,另一台跑4个测试用例。

先用 Nginx 跑一个默认服务,返回一个 html 文件,测试基准性能。

Nginx 访问默认的 html 文件,QPS 为 5162

同步访问文件

fs.readFileSync 是 fs.readFile 的同步版本

测试结果

QPS 为 3195

异步访问文件

测试结果

QPS 为 2945

使用 async 来封装异步操作

测试结果

QPS 为 2855

对比

  • 5162 Nginx
    • -1967
  • 3195 fs.readFileSync
    • -250
  • 2945 fs.readFile
    • -90
  • 2855 await promise fs.readFile

本来猜测的结果,应该是 Nginx >  fs.readFile > fs.readFIleSync > await + promise + fs.readFile

实际结果却是 Nginx > fs.readFileSync > fs.readFile > await + promise + fs.readFile,这下傻眼

 

尝鲜 Ubuntu 17.04

冲着自带 Kernel 4.10 去的

可以不用 apt-mark 来锁住内核版本,避免更新的时候又自动降级了

不知道是今晚线路波动还是其他原因,升级后,明显感觉 SSH 卡了很多,检查过 BBR 已经开启,起了怪了

wget 一个百兆文件,开 vnstat -l 进行统计

proxy_pass 的结尾要不要 “/” ?

这周有个临时需求,需要在我们的业务上面集成一个合作方的站点,这种事情用 proxy_pass 就非常方便

一开始用的第一个方法,结果一直提示 404,还以为 Location 规则没命中,反复查证,却忘了第一个配置会把 path 给透传到 proxy_pass 端,实际上我一直在访问 http://127.0.0.1:3000/3rd/ ,而这个地址显然是不存在的

后来排查后端的日志才发现,在结尾补上 “/” 后,终于把 /3rd/ 这个路径给吃掉了

Backbone源码研究 – Backbone.Model

前言

都因为 IE8 不支持 Object.defineProperty,但是业务还不能脱离 IE7 和 IE8,故研究下 Backbone.Model 的实现机制,找机会给主流的 MVVM 框架补丁

伪代码

先来看看 Model 的构造函数

很简单的代码,做了一些初始化赋值的事情。

用到了一个小技巧  attrs = _.defaults(_.extend({}, defaults, attrs), defaults);  来防止误传入的 undefined 覆盖掉默认的 defaults 值。

Backbone 的精粹都在 set(){} 这个函数里面。

整个 set 里面,实际干活的就是 unset ? delete current[attr] : current[attr] = val;  。

没看明白 this._changing 和 this._pending 的使用场景,感觉是一个当多个 set 同时执行时候的一个标记位,但是 JS 是单线程执行,里面又都是 for 语句,按理说可以不用这两个标记位。又或者是我的理解有误。

more

看到这,给各种Observer打补丁就有了可行性,支持 Object.defineProperty 就用 Object.defineProperty,不支持的则降级到走 Backbone 的这种 for in 方式。