10/31/2021 记

Posted on 2021-10-31

晚上睡不着。看了一眼 HuoBi

发现自己的合约被强制平仓了。陆续开始清退大陆用户。

也就几百块，取出来也没多大作用。

看了看最近的风口 Meta verse，买了点币。顺便跟着孙割买了点币。

15 个 MANA: 基于 VR 的游戏平台
9600 个 BTT: Bit torrent

之后 HuoBi 清退，还需要把币提出来。麻烦

周一看看能不能把股市内的基金投入到 `恒生30ETF`

恒生ETF中很大一部分是 Meta Verse 概念。
股市还是太难玩了。玩不明白。

Vue中对Array拓展的方法

Posted on 2021-10-14 In Vue

原理

通过改写[].__proto__上的方法，实现对Array原生方法的拦截。

源码位置为 /core/instance/observer/array.js

// cache the original Array.prototype
const originalPrototype = Array.prototype

// create an object from original Array.prototype
const arrayMethods = Object.create(originalPrototype)

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
]

methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    // use original Array methods to get the result
    const result = originalPrototype[method].apply(this, args)

    // proxy here
    console.log(`catch ${method}`)

    return result
  }
})

const a = [1, 2, 3]
a.__proto__ = arrayMethods

a.push(1)
a.reverse()
a.pop()

console.log(a)

Promise a+

Posted on 2021-10-08 In JavaScript

Promise A+ 规范

promise：是一个拥有then方法的对象或函数，其行为符合本规范。
thenable：是一个定义了then方法的对象或函数。这个主要是用来兼容一些老的Promise实现，只要一个Promise实现是thenable，也就是拥有then方法的，就可以跟Promises/A+
兼容。
value：指reslove出来的值，可以是任何合法的 JS 值(包括 undefined , thenable 和 promise等)
exception：异常，在Promise里面用throw抛出来的值
reason：拒绝原因，是reject里面传的参数，表示reject的原因

Promise Status

pending: 一个promise在resolve或者reject前就处于这个状态。
fulfilled: 一个promise被resolve后就处于fulfilled状态，这个状态不能再改变，而且必须拥有一个不可变的值(value)。
rejected: 一个promise被reject后就处于rejected状态，这个状态也不能再改变，而且必须拥有一个不可变的拒绝原因(reason)。

thenable

1	promsie.then(onFulfilled, onRejected)

Optional parameters

如果 onFulfilled 不是函数，其必须被忽略
如果 onRejected 不是函数，其必须被忽略

onFulfilled

如果 onFulfilled 是函数：

当 promise 执行结束后其必须被调用，其第一个参数为 promise 的终值value
在 promise 执行结束前其不可被调用
其调用次数不可超过一次

onRejected

如果 onRejected 是函数：

当 promise 被拒绝执行后其必须被调用，其第一个参数为 promise 的据因reason
在 promise 被拒绝执行前其不可被调用
其调用次数不可超过一次

then

then 方法可以被同一个 promise 调用多次

当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调

Return

then 方法必须返回一个 promise 对象。

1	promise2 = promise1.then(onFulfilled, onRejected)

如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行 Promise 解决过程：[[Resolve]](promise2, x)
如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e
如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因

实现

var PENDING = "pending"
var FULFILLED = "fulfilled"
var REJECTED = "rejected"

function Promise(fn) {
  this.status = PENDING // initial status
  this.value = null // initial value
  this.reason = null // initial reason
  this.onFulfilledCallbacks = []
  this.onRejectedCallbacks = []

  var _this = this

  function resolve(value) {
    if (_this.status === PENDING) {
      _this.status = FULFILLED
      _this.value = value

      _this.onFulfilledCallbacks.forEach((i) => i(_this.value))
    }
  }

  function reject(reason) {
    if (_this.status === PENDING) {
      _this.status = REJECTED
      _this.reason = reason

      _this.onRejectedCallbacks.forEach((i) => i(_this.reason))
    }
  }

  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

function resolvePromise(promise, x, resolve, reject) {
  if (promise === x) {
    reject(new TypeError("The promise and the return value are the same"))
  }

  if (x instanceof Promise) {
    x.then(function (y) {
      resolvePromise(promise, y, resolve, reject)
    }, reject)
  } else if (typeof x === "object" || typeof x === "function") {
    if (x === null) {
      return resolve(x)
    }

    try {
      var then = x.then
    } catch (e) {
      return reject(e)
    }

    if (typeof then === "function") {
      var called = false

      try {
        then.call(
          x,
          function (y) {
            if (called) return
            called = true
            resolvePromise(promise, y, resolve, reject)
          },
          function (r) {
            if (called) return
            called = true
            reject(r)
          }
        )
      } catch (e) {
        if (called) return

        reject(e)
      }
    } else {
      resolve(x)
    }
  } else {
    resolve(x)
  }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
  var checkOnFulfilled = onFulfilled
  if (typeof onFulfilled !== "function") {
    checkOnFulfilled = function (value) {
      return value
    }
  }

  var checkOnRejected = onRejected
  if (typeof onRejected !== "function") {
    checkOnRejected = function (reason) {
      throw reason
    }
  }

  var _this = this

  if (this.status === FULFILLED) {
    // 如果前面的 promise 抛出异常，后面的必须拒绝执行
    var promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          if (typeof onFulfilled !== "function") {
            resolve(_this.value)
          } else {
            var x = checkOnFulfilled(_this.value)
            resolvePromise(promise2, x, resolve, reject)
          }
        } catch (e) {
          reject(e)
        }
      }, 0)
    })

    return promise2
  }

  if (this.status === REJECTED) {
    var promise2 = new Promise(function (resolve, reject) {
      setTimeout(function () {
        try {
          if (typeof onRejected !== "function") {
            reject(_this.reason)
          } else {
            var x = checkOnRejected(_this.reason)
            resolvePromise(promise2, x, resolve, reject)
          }
        } catch (e) {
          reject(e)
        }
      }, 0)
    })

    return promise2
  }

  if (this.status === PENDING) {
    var promise2 = new Promise(function (resolve, reject) {
      _this.onFulfilledCallbacks.push(function () {
        setTimeout(function () {
          try {
            if (typeof onFulfilled !== "function") {
              resolve(_this.value)
            } else {
              var x = checkOnFulfilled(_this.value)
              resolvePromise(promise2, x, resolve, reject)
            }
          } catch (e) {
            reject(e)
          }
        }, 0)
      })

      _this.onRejectedCallbacks.push(function () {
        setTimeout(function () {
          try {
            if (typeof onRejected !== "function") {
              reject(_this.reason)
            } else {
              var x = checkOnRejected(_this.reason)
              resolvePromise(promise2, x, resolve, reject)
            }
          } catch (e) {
            reject(e)
          }
        }, 0)
      })
    })

    return promise2
  }
}

Promise.resolve = function (parameter) {
  if (parameter instanceof Promise) {
    return parameter
  }

  return new Promise(function (resolve) {
    resolve(parameter)
  })
}

Promise.reject = function (reason) {
  return new Promise(function (resolve, reject) {
    reject(reason)
  })
}

Promise.all = function (promises) {
  return new Promise(function (resolve, reject) {
    var count = 0
    var result = []
    var len = promises.length

    if (length === 0) {
      return resolve(result)
    }

    promises.forEach(function (promise, index) {
      Promise.resolve(promise).then(
        function (value) {
          count++
          result[index] = value

          if (count === len) {
            resolve(result)
          }
        },
        function (reason) {
          reject(reason)
        }
      )
    })
  })
}

Promise.race = function (promises) {
  return new Promise(function (resolve, reject) {
    var len = promises.length

    if (length === 0) {
      return resolve()
    } else {
      for (var i = 0; i < len; i++) {
        Promise.resolve(promises[i]).then(
          function (value) {
            return resolve(value)
          },
          function (reason) {
            return reject(reason)
          }
        )
      }
    }
  })
}

Promise.catch = function (onRejected) {
  this.then(null, onRejected)
}

Promise.finally = function (fn) {
  return this.then(
    function (value) {
      return Promise.resolve(fn()).then(function () {
        return value
      })
    },
    function (error) {
      return Promise.resolve(fn()).then(function () {
        throw error
      })
    }
  )
}

Promise.allSettled = function (promises) {
  return new Promise(function (resolve) {
    var len = promises.length
    var result = []
    var count = 0

    if (len === 0) {
      resolve(result)
    } else {
      for (let i = 0; i < len; i++) {
        ;(function (i) {
          var current = Promise.resolve(promises[i])

          current.then(
            function (value) {
              count++
              result[i] = {
                status: "fulfilled",
                value,
              }

              if (count === len) {
                return resolve(result)
              }
            },
            function (reason) {
              count++
              result[i] = {
                status: "rejected",
                reason,
              }

              if (count === len) {
                return resolve(result)
              }
            }
          )
        })(i)
      }
    }
  })
}

// for promises-aplus-tests test
Promise.deferred = function () {
  var result = {}
  result.promise = new Promise(function (resolve, reject) {
    result.resolve = resolve
    result.reject = reject
  })

  return result
}

module.exports = Promise

通用中心路由基座式微前端实现

Posted on 2021-09-13 In Engineering

什么是微前端

微前端架构具备以下几个核心价值

技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权
独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
独立运行时：每个子应用之间状态隔离，运行时状态不共享

现有解决方案

路由分发（nginx）
npm 子包：基座负责打包构建发布，打包时集成；
iframe：应用之间完全独立；需要基座提供通信方案；
通用中心路由基座式：完全独立；需要基座提供通信方案；使用 DOM 实现；（阿里乾坤）
特定中心路由基座式：相同技术栈；复用基座公共基建内容；（美团广告业务）

module导入script方式

Posted on 2021-07-19 In JavaScript

`type="module"`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script type="module">
      // will not block the button
      console.log(this) // undefined
      console.log(import.meta.url) // the url of import file
    </script>
    <script>
      // will block the button
      console.log(this) // window
    </script>

    <script async type="module" src="http://example.com/test.js">
      // will run immediate when the file is load
      // example.com needs the Access-Control-Allow-Origin flag
      import {sayHi} from 'sayHi' // this will get error because no path import in this module block.
    </script>

    <script nomodule>
      alert("The Browser can not support the module import.")
    </script>
  </head>
  <body>
    <button>Button</button>
  </body>
</html>

React Reconciler Diff Example

Posted on 2021-07-19 In React

before: abcd
after: acdb

===第一轮遍历开始===

a（之后）vs a（之前）
key 不变，可复用
此时 a 对应的 oldFiber（之前的 a）在之前的数组（abcd）中索引为 0
所以 lastPlacedIndex = 0;

继续第一轮遍历…

c（之后）vs b（之前）
key 改变，不能复用，跳出第一轮遍历
此时 lastPlacedIndex === 0;
===第一轮遍历结束===

===第二轮遍历开始===
newChildren === cdb，没用完，不需要执行删除旧节点
oldFiber === bcd，没用完，不需要执行插入新节点

将剩余 oldFiber（bcd）保存为 map

// 当前 oldFiber：bcd
// 当前 newChildren：cdb

继续遍历剩余 newChildren

key === c 在 oldFiber 中存在
const oldIndex = c（之前）.index;
此时 oldIndex === 2; // 之前节点为 abcd，所以 c.index === 2
比较 oldIndex 与 lastPlacedIndex;

如果 oldIndex >= lastPlacedIndex 代表该可复用节点不需要移动
并将 lastPlacedIndex = oldIndex;
如果 oldIndex < lastplacedIndex 该可复用节点之前插入的位置索引小于这次更新需要插入的位置索引，代表该节点需要向右移动

在例子中，oldIndex 2 > lastPlacedIndex 0，
则 lastPlacedIndex = 2;
c 节点位置不变

继续遍历剩余 newChildren

// 当前 oldFiber：bd
// 当前 newChildren：db

key === d 在 oldFiber 中存在
const oldIndex = d（之前）.index;
oldIndex 3 > lastPlacedIndex 2 // 之前节点为 abcd，所以 d.index === 3
则 lastPlacedIndex = 3;
d 节点位置不变

继续遍历剩余 newChildren

// 当前 oldFiber：b
// 当前 newChildren：b

key === b 在 oldFiber 中存在
const oldIndex = b（之前）.index;
oldIndex 1 < lastPlacedIndex 3 // 之前节点为 abcd，所以 b.index === 1
则 b 节点需要向右移动
===第二轮遍历结束===

最终 acd 3 个节点都没有移动，b 节点被标记为移动

JSDoc remark

Posted on 2021-07-13 In JavaScript

Class in ES2015

/**
 * Class representing a point.
 */
class Point {
  /**
   * Create a point.
   * @param {number} x - The x value.
   * @param {number} y - The y value.
   */
  constructor(x, y) {}

  /**
   * Get the x value.
   * @return {number} The x value.
   */
  getX() {}

  /**
   * Convert a string containing two comma-separated number into a point.
   * @param {string} str - The string containing two comma-separated number.
   * @return {Point} A point object.
   */
  static fromStringStr(str) {}
}

extends

/**
 * Class representing a point.
 * @extends Point
 */
class Dot extends Point {
  /**
   * Create a dot.
   * @param {number} x - The x value.
   * @param {number} y - The y value.
   * @param {number} width - The width of the dot.
   */
  constructor(x, y, width) {
    super(x, y)
  }

  /**
   * Get the width of the dot.
   * @return {number} The dot's width.
   */
  getWidth() {}
}

@abstract

/**
 * Foo.
 * @constructor
 */
function Foo() {}

/**
 * Check if is solid.
 * @abstract
 * @return {boolean}
 */
Foo.prototype.isSolid = function () {
  throw new Error("Must be implemented by suclass.")
}

/**
 * Bar.
 * @constructor
 * @arguments Foo
 */
function Bar() {}

/**
 * Check if is solid.
 * @return {boolean} Always return false.
 */
Bar.prototype.isSolid = function () {
  return false
}

@assets

/**
 * @constructor
 */
function Foo() {
  /**
   * @assets private
   * @type {number}
   */
  let foo = 0

  /**
   * @assets protected
   * @type {string}
   */
  this.bar = "1"

  /**
   * @assets package
   * @type {string}
   */
  this.barz = "2"

  /**
   * @assets public
   * @type {string}
   */
  this.barm = "3"
}

@author

/**
 * @author Edward <wang.huiyang@outlook.com>
 */
function MyClass() {}

@callback

/**
 * @class
 */
function Foo() {}

/**
 * Send a request.
 * @param {requestCallback} cb - The callback than handles the response.
 */
Foo.prototype.send = function (cb) {}

/**
 * Callback
 * @callback requestCallback
 * @param {number} responseCode
 * @param {string} responseMessage
 */

@event

/**
 * @constructor
 */
function Foo() {}

/**
 * Do some test.
 * @fires Foo#test
 */
Foo.prototype.test = function () {}

/**
 * Foo test.
 * @event Foo#test
 * @type {object}
 * @property {boolean} isPass - Check if is pass.
 */

ES6 Class

Posted on 2021-07-02 In ECMAScript

Class

// class factory
function classFactory(phone) {
  return class {
    getName() {
      return phone
    }
  }
}

let _187 = classFactory("18720128815")
console.log(new _187().getName())

Calculated attribute name

class User {
  ["say" + "Hi"]() {
    console.log("hi")
  }
}

new User()["sayHi"]

Class field

// class field
class User {
  name = "Edward" // is not at the prototype
}

const user = new User()
console.log(user.name) // Edward
console.log(User.prototype.name) // undefined

Extends — How the `super` run

let animal = {
  name: "Animal",
  eat() {
    console.log(this.name + " eat")
  },
}

let rabbit = {
  __proto__: animal, // extends animal
  eat() {
    super.eat()
  },
}

let err = {
  __proto__: rabbit, // extends rabbit
  name: "err obj",
  eat() {
    super.eat()
  },
}

// super.eat() -> [[Rabbit.prototype]].eat
// -> super.eat -> [[Animal.prototype]].eat
// this -> err
err.eat()

class Animal {}
class Rabbit extends Animal {}
console.log(Rabbit.__proto__ === Animal) // class extends link
console.log(Rabbit.prototype.__proto__ === Animal.prototype) // prototype extends link

Prototype

change the basic class

let user = {
  name: "Edward",
  hello(name) {
    console.log(`hi ${this.name}, this is ${name}`)
  },
}

Function.prototype.defer = function (ms) {
  let f = this
  return function (...arg) {
    setTimeout(() => f.apply(this, arg), ms)
  }
}

user.hello = user.hello.defer(1000)
user.hello("Ejklfj") // will delay 1000ms

Magic of the instance of

class Animal {
  static [Symbol.hasInstance](obj) {
    if (obj.canEat) return true
  }
}

let obj = { canEat: true }
console.log(obj instanceof Animal) // it will find from the [[Prototype]]

Static

class User {
  static staticMethod() {
    console.log(this === User)
  }
}

class Article {
  constructor(title, date) {
    this.title = title
    this.date = date
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date
  }
}

let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("Css", new Date(2019, 0, 1)),
]

articles.sort(Article.compare)
console.log(articles)

Decorator 装饰器模式

Posted on 2021-06-21 In ECMAscript

e.g.

let worker = {
  someMethod() {
    return 1
  },

  slow(x) {
    console.log("called with " + x)
    return x * this.someMethod()
  },
}

function decorator(func) {
  const cache = new Map()

  return function (x) {
    if (cache.has(x)) {
      console.log("cache hit")
      return cache.get(x)
    }

    const result = func.call(this, x)
    cache.set(x, result)

    return result
  }
}

worker.slow = decorator(worker.slow)

console.log(worker.slow(2))
console.log(worker.slow(2))

Injection

function injection(func, ...argsBound) {
  return function (...args) {
    return func.call(this, ...argsBound, ...args)
  }
}

// usage
let user = {
  firstName: "Edward",
  say(time, phrase) {
    console.log(`[${time}]: ${this.firstName} ${phrase}`)
  },
}

user.say = injection(
  user.say,
  new Date().getHours() + ":" + new Date().getMinutes()
)

user.say("Hi")

arrow function

function defer(f, ms) {
  return function () {
    setTimeout(() => f.apply(this, arguments), ms)
  }
}

function sayHello(name) {
  console.log(`Hi, ${name}`)
}

const deferSay = defer(sayHello, 2000)
deferSay("Edward")

prototype

let user = {
  name: "Edward",
  hello(name) {
    console.log(`hi ${this.name}, this is ${name}`)
  },
}

Function.prototype.defer = function (ms) {
  let f = this
  return function (...arg) {
    setTimeout(() => f.apply(this, arg), ms)
  }
}

user.hello = user.hello.defer(1000)
user.hello("Ejklfj")

Binary Indexed Array

Posted on 2021-06-19 In Data Structure

Definition

A Fenwick tree or binary indexed tree is a data structure that can efficiently update elements and calculate prefix sums in a table of numbers.

update(index, delta): 将delta加到index位置上。
prefixSum(index): 求 sum[1, index]的值。
rangeSum(from, to): 求 sum[from, to] 的值。

时间复杂度：

update(index, delta): 更新需要循环更新每一个parent的值，从index开始到最后一个parent。复杂度为O(n)。
prefixSum(index): 直接返回sum[index + 1]即可，复杂度为O(1)。
rangeSum(from, to): 直接返回sum[to + 1] - sum[from]即可，复杂度为O(1)。

Build

现在有个nums初始数组，通过这个数组构造一个BITArray。
构造Binary Indexed Array。

实现insert(index, delta):

function insert(index, delta) {
  while (index < this.BITArray.length) {
    this.BITArray[index] += delta
    index += index & -index // BIT中，parent的index计算方法为：parent = child + (child & -child)
  }
}

构造 BITArray:

function MyArray(nums) {
  this.BITArray = new Array(nums.length + 1).fill(0)
  for (let i = 0, len = nums.length; i < len; i++) {
    this.insert(i + 1, nums[i]) // 在每个index处循环插入，delta就是初始值。
  }
}

实现sum(index):

function sum(index) {
  let sum = 0
  while (index > 0) {
    sum += this.BITArray[index]
    index -= index & -index // BIT中，child的计算方法为：child = parent - (parent & -parent)
  }

  return sum
}

实现perfixSum(from, to)

1
2
3

function perfixSum(from, to) {
  return this.sum(to + 1) - this.sum(from)
}

晚上睡不着。看了一眼 HuoBi

周一看看能不能把股市内的基金投入到 恒生30ETF

原理

Promise A+ 规范

Promise Status

thenable

Optional parameters

onFulfilled

onRejected

then

Return

实现

什么是微前端

现有解决方案

type="module"

===第一轮遍历开始===

Class in ES2015

extends

@abstract

@assets

@author

@callback

@event

Class

Calculated attribute name

Class field

Extends — How the super run

Prototype

Magic of the instance of

Static

e.g.

Injection

arrow function

prototype

Definition

Build

周一看看能不能把股市内的基金投入到 `恒生30ETF`

`type="module"`

Extends — How the `super` run