Better

由于项目比较忙，因此该篇来的稍微晚了一点，但我一定会坚持下去的，尤其 leetcode 刷题部分，优先级在我看来是最高的。

Algorithm

本周继续完成 easy part，名为 Merge Two Sorted Lists，给定两个链表式的已经排序的结构，合并成一个。

一开始想到一个很蠢的方式，直接将两个 ListNode 转成 Array，然后 concat Array 在进行 sort，然后转成 ListNode 结构。这种方式有多蠢我就不说了好吧，结果就是执行效率贼慢，因此我都不好意思贴代码了。

接下来说说高效的两种实现方式，一种是递归，一种是非递归。

使用递归

var mergeTwoLists = function(l1, l2) {
    if(l1 === null) {
        return l2;
    }
    if(l2 === null) {
        return l1;
    }
    if(l1.val < l2.val) {
        l1.next = mergeTwoLists(l1.next, l2);
        return l1;
    } else {
        l2.next = mergeTwoLists(l1, l2.next);
        return l2;
    }
};

使用递归可能没那么好理解，看看非递归的方式就很容易明白了

function ListNode(val) {
    this.val = val;
    this.next = null;
}
var mergeTwoLists = function(l1, l2) {
    var res = new ListNode(0);
    var temp = res;
    while(l1 !== null && l2 !== null) {
        var min = Math.min(l1.val, l2.val);
        temp.next = new ListNode(min);
        temp = temp.next;
        if(l1.val < l2.val) {
            l1 = l1.next;
        } else {
            l2 = l2.next;
        }
    }
    if(l1 === null) {
       temp.next = l2;
    } else {
        temp.next = l1;
    }
    return res.next;
}

Review

本周看的文章来自 medium，是我随手翻的一篇文章，标题为 The deepest reason why modern JavaScript frameworks exist。主要讨论的是现在 JavaScript 框架存在的最大理由。作者想说的是并不是下述理由

• They are based on components;
• They have a strong community;
• They have plenty of third party libraries to deal with things;
• They have useful third party components;
• They have browser extensions that help debugging things;
• They are good for doing single page applications.

最大的理由是：Keeping the UI in sync with the state is hard，保持 UI 和状态同步。

是如何实现的呢，有两种策略

• 以 React 为代表的，渲染整个组件，当组件状态改变时，在内存中渲染 DOM，然后与已经存在的 DOM 进行比较，涉及到 diff 算法，查出差异后进行 patch
• 以 Angular 和 Vue 为代表，使用观察者监听数据改变

web components：最大的问题就是不支持数据和UI同步。

你可以通过virtual-dom，手动实现类似的 React.Component，关键代码如下

const dom = require('virtual-dom/h')
const diff = require('virtual-dom/diff')
const patch = require('virtual-dom/patch')
const createElement = require('virtual-dom/create-element')

// Base class to create components
module.exports.Component = class Component {
  constructor(root) {
    this.root = root
    this.tree = h('div', null)
    this.rootNode = createElement(this.tree)
    this.root.appendChild(this.rootNode)
    this.state = this.getInitialState()
    this.update()
    this.componentDidMount()
  }

  componentDidMount() {}

  setState(state) {
    this.state = Object.assign(this.state || {}, state)
    this.update()
  }

  update() {
    const newTree = this.render()
    const patches = diff(this.tree, newTree)
    this.rootNode = patch(this.rootNode, patches)
    this.tree = newTree
  }

  getInitialState() {
    return {}
  }

  render() {
    return null
  }
}

Tip

最近在安装一个使用 TypeScript 的 React 项目时，碰到各种环境问题，真的人让人很自闭。也总结三个经验吧

• 安装 windows-build-tools 试试：npm install -g windows-build-tools
• 实在不行可以安装 nvm 切换 node 版本
• typescript 报错：安装各种 @types/xxx

Share

这里分享一篇自己最近关于代码设计的思考，关于代码设计的一点思考