梦想的港湾

2019-12-312019-12-31

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 的配置如下

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "sourceMaps": true,
    "ast": false,
    "minified": false,
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-optional-chaining"
    ]
}

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

"sourceMaps": true,

"ast": false,

"minified": false,

"plugins": [

"@babel/plugin-proposal-class-properties",

"@babel/plugin-proposal-export-default-from",

"@babel/plugin-proposal-export-namespace-from",

"@babel/plugin-proposal-object-rest-spread",

"@babel/plugin-proposal-optional-chaining"

]

}

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

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

非 JS 的东西去哪了？

继续阅读

2019-12-302019-12-30

bit-react-tutorial 体验

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

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

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

了解 Bit

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

https://docs.bit.dev/docs/quick-start 新手指引，快速了解整个 bit 是做什么的
https://docs.bit.dev/docs/tutorials/bit-react-tutorial 基于 bit 从一个 CRA 工程中，提取已有的组件进行分发的教程

Bit 的一些亮点

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

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

继续阅读

2018-12-062018-12-06

AST 基础学习以及躲坑技巧

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

const blog = 'mxgw.info';

1	const blog = 'mxgw.info';

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

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

这里面，每一个包含 type 的层次结构，都叫一个节点（Node）。

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

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

2018-09-292018-10-30

捉到 Edge 的渲染 BUG 一只

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

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

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

Demo

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

2018-09-212018-10-30

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

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

{!state.isEditing ? (
  <button type="button" onClick={() => this.setState({isEditing: true})}>修改</button>
) : (
  <button form="form-1" type="submit">确定</button>
)}

{!state.isEditing ? (

<button type="button" onClick={() => this.setState({isEditing: true})}>修改</button>

) : (

)}

以为仅仅是切换下按钮？

其实是会执行下面的流程

当 isEditing 为 false 的时候，点击 button，
isEditing 变成了 true
重新 render，在 virtualDOM 进行 diff 的时候，给 button 添加了 type=submit 以及 form='form-1'
#form-1 表单被意外的 submit 了

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

2018-03-152018-05-30

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

结构定义

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

import styled from "styled-components";

export const Skin = styled.div`
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 2px 4px 3px 0px rgba(0, 0, 0, 0.34);
  margin: 50px;
  padding: 10px 5px;

  background-color: ${props => props.theme.a};

  .title {
    color: #fff;
  }

  input {
    visibility: hidden;
    width: 0;
    height: 0;
    float: left;
  }

  label {
    display: block;
    margin: 5px 5px;
    border: 1px solid ${props => props.theme.e};
    border-radius: 3px;
    background-color: ${props => props.theme.b};

    &:hover {
      background-color: ${props => props.theme.c};
    }

    &:active {
      background-color: ${props => props.theme.d};
    }
  }
`;

import styled from "styled-components";

export const Skin = styled.div`

border: 1px solid #000;

border-radius: 3px;

box-shadow: 2px 4px 3px 0px rgba(0, 0, 0, 0.34);

margin: 50px;

padding: 10px 5px;

background-color: ${props => props.theme.a};

.title {

color: #fff;

}

input {

visibility: hidden;

width: 0;

height: 0;

float: left;

}

label {

display: block;

margin: 5px 5px;

border: 1px solid ${props => props.theme.e};

border-radius: 3px;

background-color: ${props => props.theme.b};

&:hover {

background-color: ${props => props.theme.c};

}

&:active {

background-color: ${props => props.theme.d};

}

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

2018-02-272018-02-28

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

背景

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

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

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

传统的实现方案

1.理想的实现情况

let session_id = wx.getStorageSync('session_id');

wx.request({
    url: '/api/create',
    header: {session_id},
    method: 'POST',
    data: 'hello world',
    success: (resp) => {
        let {id} = resp.data;
        // 创建成功后，跳转去目标页面
        wx.navigateTo({url: `/article?id=${id}`})
    }
})

let session_id = wx.getStorageSync('session_id');

wx.request({

url: '/api/create',

header: {session_id},

method: 'POST',

data: 'hello world',

success: (resp) => {

let {id} = resp.data;

// 创建成功后，跳转去目标页面

wx.navigateTo({url: `/article?id=${id}`})

}

})

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

// 调用创建接口
function create() {

    let session_id = wx.getStorageSync('session_id');

    wx.request({
        url: '/api/create',
        header: {session_id},
        method: 'POST',
        data: 'hello world',
        success: (resp) => {
    
            let {status, data} = resp;
    
            if (status === 'session_id error') {
                // 与后端通信，重新下发并更新本地存储中的 session_id
                // 然后再重新自行一次创建行为
                updateSession().then(create);
            } else {
                let {id} = resp.data;

                // 创建成功后，跳转去目标页面
                wx.navigateTo({url: `/article?id=${id}`})
            }
        }
    })
}

// 调用创建接口

function create() {

let session_id = wx.getStorageSync('session_id');

wx.request({

url: '/api/create',

header: {session_id},

method: 'POST',

data: 'hello world',

success: (resp) => {

let {status, data} = resp;

if (status === 'session_id error') {

// 与后端通信，重新下发并更新本地存储中的 session_id

// 然后再重新自行一次创建行为

updateSession().then(create);

} else {

let {id} = resp.data;

// 创建成功后，跳转去目标页面

wx.navigateTo({url: `/article?id=${id}`})

}

})

}

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

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

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

2017-06-08

await 性能猜想

前言

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

测试基准

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

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

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

同步访问文件

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

const fs = require('fs')
const http = require('http')

let server = http.createServer()

server.on('request', (req, res) => {

  let file = fs.readFileSync('./index.html')

  res.write(file)
  res.end()

})

server.listen(3000)

const fs = require('fs')

const http = require('http')

let server = http.createServer()

server.on('request', (req, res) => {

let file = fs.readFileSync('./index.html')

res.write(file)

res.end()

})

server.listen(3000)

测试结果

QPS 为 3195

异步访问文件

const fs = require('fs')
const http = require('http')

let server = http.createServer()

server.on('request', (req, res) => {

  fs.readFile('./index.html', (err, data) => {

    if (err) {
      res.statusCode = 500
      res.end()
      return
    }

    res.write(data)
    res.end()

  })

})

server.listen(3001)

const fs = require('fs')

const http = require('http')

let server = http.createServer()

server.on('request', (req, res) => {

fs.readFile('./index.html', (err, data) => {

if (err) {

res.statusCode = 500

res.end()

return

}

res.write(data)

res.end()

})

server.listen(3001)

测试结果

QPS 为 2945

使用 async 来封装异步操作

const fs = require('fs')
const http = require('http')

let server = http.createServer()

server.on('request', onRequest)

async function onRequest(req, res) {

  let file = await readFile()

  res.write(file)
  res.end()

}

function readFile () {
  return new Promise((resolve, reject) => {

    fs.readFile('./index.html', (err, data) => {
      if (err) reject(err)

      resolve(data)
    })

  })
}

server.listen(3002)

const fs = require('fs')

const http = require('http')

let server = http.createServer()

server.on('request', onRequest)

async function onRequest(req, res) {

let file = await readFile()

res.write(file)

res.end()

}

function readFile () {

return new Promise((resolve, reject) => {

fs.readFile('./index.html', (err, data) => {

if (err) reject(err)

resolve(data)

})

}

server.listen(3002)

测试结果

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，这下傻眼

2017-04-142017-04-14

尝鲜 Ubuntu 17.04

冲着自带 Kernel 4.10 去的

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

apt-mark hold linux-generic linux-headers-generic linux-image-generic

1	apt-mark hold linux-generic linux-headers-generic linux-image-generic

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

proxy_pass 的结尾要不要 “/” ?

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

location ^~ /3rd/ {
  proxy_pass http://127.0.0.1:3000;
}

location ^~ /3rd/ {
  proxy_pass http://127.0.0.1:3000/;
}

location ^~ /3rd/ {

proxy_pass http://127.0.0.1:3000;

}

location ^~ /3rd/ {

proxy_pass http://127.0.0.1:3000/;

}

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

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

2017-01-232017-01-23

Backbone源码研究 – Backbone.Model

前言

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

伪代码

先来看看 Model 的构造函数

var Model = Backbone.Model = function(attributes, options) {
    var attrs = attributes || {};
    options || (options = {});
    
    // 钩子
    this.preinitialize.apply(this, arguments);
    
    // 每个实例分配一个唯一的 cid
    this.cid = _.uniqueId(this.cidPrefix);
    // 数据对象
    this.attributes = {};
    
    // 不重要的内容
    if (options.collection) this.collection = options.collection;
    if (options.parse) attrs = this.parse(attrs, options) || {};
    
    // 获取预设在 defaults 字段中的初始键值对或匿名函数
    // 这里使用 _.result() 来兼容函数和对象两种类型
    var defaults = _.result(this, 'defaults');
    
    // 避免 attrs 中的 undefined 值覆盖掉 defaults 中的默认值
    attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
    
    // 初始化赋值
    this.set(attrs, options);
    this.changed = {};
    
    // 钩子
    this.initialize.apply(this, arguments);
  };

var Model = Backbone.Model = function(attributes, options) {

var attrs = attributes || {};

options || (options = {});

// 钩子

this.preinitialize.apply(this, arguments);

// 每个实例分配一个唯一的 cid

this.cid = _.uniqueId(this.cidPrefix);

// 数据对象

this.attributes = {};

// 不重要的内容

if (options.collection) this.collection = options.collection;

if (options.parse) attrs = this.parse(attrs, options) || {};

// 获取预设在 defaults 字段中的初始键值对或匿名函数

// 这里使用 _.result() 来兼容函数和对象两种类型

var defaults = _.result(this, 'defaults');

// 避免 attrs 中的 undefined 值覆盖掉 defaults 中的默认值

attrs = _.defaults(_.extend({}, defaults, attrs), defaults);

// 初始化赋值

this.set(attrs, options);

this.changed = {};

// 钩子

this.initialize.apply(this, arguments);

};

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

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

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

set: function(key, val, options) {
  if (key == null) return this;

  // 统一 'key', 'val' 和 {key:val} 这两种形式
  // attrs 最终为变动的对象
  var attrs;
  if (typeof key === 'object') {
    attrs = key;
    options = val;
  } else {
    (attrs = {})[key] = val;
  }

  options || (options = {});

  // 规则验证.
  if (!this._validate(attrs, options)) return false;

  var unset      = options.unset;
  var silent     = options.silent;
  var changes    = [];
  var changing   = this._changing;
  this._changing = true;

  // 预留上一次的值
  if (!changing) {
    this._previousAttributes = _.clone(this.attributes);
    this.changed = {};
  }

  // 备份一个当前的数据对象
  var current = this.attributes;
  var changed = this.changed;
  var prev    = this._previousAttributes;

  // 遍历传入的新数据对象
  for (var attr in attrs) {
    val = attrs[attr];
    
    // 如果新数据与当前不一致，则标记变动的键名
    if (!_.isEqual(current[attr], val)) changes.push(attr);
    
    // 如果新数据与旧数据不一致，则更新已变动的数据备份
    if (!_.isEqual(prev[attr], val)) {
      changed[attr] = val;
    } else {
      delete changed[attr];
    }
    
    // 真正干活的代码，更新数据或者删除数据
    unset ? delete current[attr] : current[attr] = val;
  }

  // 更新 id 字段
  if (this.idAttribute in attrs) this.id = this.get(this.idAttribute);

  if (!silent) {
    if (changes.length) this._pending = options;
    
    // 遍历变动清单，并且逐个触发 `change:` 事件
    for (var i = 0; i < changes.length; i++) {
      this.trigger('change:' + changes[i], this, current[changes[i]], options);
    }
  }

  if (changing) return this;
  if (!silent) {

    // 触发一个总的 `change` 事件
    // 注释说这里用 while 是确保嵌套场景也只触发一个 `change` 事件
    while (this._pending) {
      options = this._pending;
      this._pending = false;
      this.trigger('change', this, options);
    }
  }
  this._pending = false;
  this._changing = false;
  return this;
},

set: function(key, val, options) {

if (key == null) return this;

// 统一 'key', 'val' 和 {key:val} 这两种形式

// attrs 最终为变动的对象

var attrs;

if (typeof key === 'object') {

attrs = key;

options = val;

} else {

(attrs = {})[key] = val;

}

options || (options = {});

// 规则验证.

if (!this._validate(attrs, options)) return false;

var unset = options.unset;

var silent = options.silent;

var changes = [];

var changing = this._changing;

this._changing = true;

// 预留上一次的值

if (!changing) {

this._previousAttributes = _.clone(this.attributes);

this.changed = {};

}

// 备份一个当前的数据对象

var current = this.attributes;

var changed = this.changed;

var prev = this._previousAttributes;

// 遍历传入的新数据对象

for (var attr in attrs) {

val = attrs[attr];

// 如果新数据与当前不一致，则标记变动的键名

if (!_.isEqual(current[attr], val)) changes.push(attr);

// 如果新数据与旧数据不一致，则更新已变动的数据备份

if (!_.isEqual(prev[attr], val)) {

changed[attr] = val;

} else {

delete changed[attr];

}

// 真正干活的代码，更新数据或者删除数据

unset ? delete current[attr] : current[attr] = val;

}

// 更新 id 字段

if (this.idAttribute in attrs) this.id = this.get(this.idAttribute);

if (!silent) {

if (changes.length) this._pending = options;

// 遍历变动清单，并且逐个触发 `change:` 事件

for (var i = 0; i < changes.length; i++) {

this.trigger('change:' + changes[i], this, current[changes[i]], options);

}

if (changing) return this;

if (!silent) {

// 触发一个总的 `change` 事件

// 注释说这里用 while 是确保嵌套场景也只触发一个 `change` 事件

while (this._pending) {

options = this._pending;

this._pending = false;

this.trigger('change', this, options);

}

this._pending = false;

this._changing = false;

return this;

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

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

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

文章

bit-react-compiler-in-depth

bit.envs/compilers/react

非 JS 的东西去哪了？

bit-react-tutorial 体验

了解 Bit

Bit 的一些亮点

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

AST 基础学习以及躲坑技巧

捉到 Edge 的渲染 BUG 一只

Demo

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

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

结构定义

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

背景

传统的实现方案

await 性能猜想

前言

测试基准

同步访问文件

异步访问文件

使用 async 来封装异步操作

对比

尝鲜 Ubuntu 17.04

proxy_pass 的结尾要不要 “/” ?

Backbone源码研究 – Backbone.Model

前言

伪代码

more