之前其实有写过一篇类似的文章《深度优先遍历(DFS)-栈和广度优先遍历(BFS)-队列的理解》。
再次复习一下，写了不一样的注释。而且之前是用 dom 做的遍历，这次还是回到数据来。

// 深广度优先遍历

const tree = {
  value: 1,
  children: [
    {
      value: 2,
      children: [
        {
          value: 4,
          children: [
            {
              value: 8
            },
            {
              value: 9
            },
          ],
        },
        {
          value: 5,
          children: [
            {
              value: 10
            },
            {
              value: 11
            },
          ],
        },
      ],
    },
    {
      value: 3,
      children: [
        {
          value: 6,
          children: [
            {
              value: 12
            },
            {
              value: 13
            },
          ],
        },
        {
          value: 7,
          children: [
            {
              value: 14
            },
            {
              value: 15
            },
          ],
        },
      ],
    }
  ],
};

Read More

链表的概念这里就不赘述了，直接上代码吧。
其他都没什么问题，主要是反转的做法。

class Node {
  constructor(element) {
    this.element = element;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = new Node('head');
    this.length = 0;
  }
  insert(newElement, element = null) { // 加在某个元素后面，如果该元素不在，则加在 head 后面
    let currNode = this.find(element);
    if (!currNode) {
      currNode = this.head;
    }
    const newNode = new Node(newElement);
    newNode.next = currNode.next;
    currNode.next = newNode;
    this.length++;
    return this;
  }
  remove(element) {
    const prevNode = this.prev(element);
    if (prevNode && prevNode.next) {
      const currNode = prevNode.next;
      prevNode.next = currNode.next;
      this.length--;
    }
    return this;
  }
  find(element) {
    let node = this.head;
    while(node) {
      if (node.element === element) {
        break;
      }
      node = node.next;
    }
    return node;
  }
  getAll() {
    const result = [];
    let node = this.head;
    while(node && node.next) {
      node = node.next;
      result.push(node.element);
    }
    return result;
  }
  prev(element) {
    let node = this.head;
    while(node) {
      if (node.next && node.next.element === element) {
        break;
      }
      node = node.next;
    }
    return node;
  }
  next(element) {
    const currNode = this.find(element);
    if (currNode) {
      return currNode.next;
    }
    return null;
  }
  reverse(element) {
    // 直接倒序重新生成的不正规解法
    // let node = this.head;
    // this.getAll().reverse().forEach((element) => {
    // 	node.next = new Node(element);
    // 	node = node.next;
    // });
    // node.next = null;

    // 只需要循环一次的正规解法
    let head = this.prev(element); // 这个后面的元素要反转，所以也有可能是链表的 head
    let first = this.find(element); // 一直指向要反转的链表第一个
    if (!first) {
      head = this.head;
      first = this.head.next;
    }
    if (!first) return this;

    const node = first; // node 是不需要变的，一直都是一开始的第一个，因为每次循环 node 都会变位置，它的 next 指向也会一直变
    while(node && node.next) {
      const nextNode = node.next;
      node.next = nextNode.next;
      nextNode.next = first;
      first = nextNode;
    }
    head.next = first;
    // 每次都把 1 的 next 挪到 first 的前面，同时 1 也会相应的变位置
    // 12345：first = 1，node = 1，把 1 的 next 指向 3，2 的 next 指向 1，即把 2 放到 1（frist） 前面
    // 21345：first = 2，node = 1，把 1 的 next 指向 4，3 的 next 指向 2，即把 3 放到 2（frist） 前面
    // 32145：first = 3，node = 1，把 1 的 next 指向 5，4 的 next 指向 3，即把 4 放到 3（frist） 前面
    // 43215
    // 54321
    return this;
  }
}

下面是运行结果

Read More

一、现象与结果

先说结果，要不从问题到结果可能太大相庭径，都看不下去。

结论就是：

• webpack + react 的业务项目，使用了一份由 webpack 打包出来的 umd（不了解 umd 可以看知乎上大佬的文章） 库 library。
• library 源代码是用 es6 语法写的。
• 业务项目 这边对于这个 library 的 import 出来的值只是个空对象，没有源代码导出的东西。
• 在 react 脚手架（create-react-app）创建出来的项目使用 library，却可以得到导出值。
  抽丝剥茧后发现是 @babel/plugin-transform-runtime 插件，将 library 处理为 es module，导致项目在使用 library 的时候，因为 webpack 自身的包装函数作用，使得 library 使用出现了偏差而有问题。

二、从头看起

上面描述还是有点难理解，需要结合代码来看，否则云里雾里。
起因是需求为，想要把一些 react 组件或者页面打包成一个完整的功能块，发成依赖库。选择了用 webpack 打出 umd 功能的包。
（这里说一下，对于打包库的工具，还是不建议用 webpack，可以选择 rollup 等其他。因为 webpack 为了处理模块化，引入了自身的包装函数，导致代码不太“纯净”。对此需求其实之前已经对 vue 工程有过这样的实操，用 rollup 打包，以路由模块的形式引入。）

同事试了之后，就是没导出值。找我一起探讨，我看到网上说，webpack4 似乎不支持产出 es module 的包，只有 umd 格式的。由此还有相应专门处理的插件，至此，我以为就单纯是 webpack4 不支持而已。

周末时候有时间，我就想确实自己没细细研究过 webpack 到底能不能打出 es module 的库，知道能打出 umd 格式的。之前做工具库的时候，使用的也是 rollup 和 gulp。正好研究下，看看到底打出来的东西有虾米不同。

首先用 webpack5（这里说一下，webpack 4 和 5 差别挺大，包装函数都大大缩小了） 打包出一份 umd 的 library，然后顺手在一个 react 脚手架 cra 创建出来的项目试了，嗯，可以。webpack5 果然可以。

接着换成 webpack4，同样配置，打包输出，还是在刚刚的项目引入，来看看到底为啥…woc？也可以？webpack 4、5 打包出来的 umd library 在 cra 项目都可以。马上换到实际项目一看，还是没有导出值。也就是和 webpack 版本打包出来无关，和具体的使用方项目的配置有关！这就刺激了，因为不知道原因和原理，只能逐一分析对比，没想到又来到大家来找茬环节。

Read More

nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。

起因

上面是百度百科上的名词定义，就是个服务器容器。之前就听说很好用，配置也很简单，一直没弄过，这次刚好想把申请的域名拆二级子域名，可以做多个服务入口。

我这里是想把其中一个作为静态资源的域名。就是主服务和资源服务器是不同server启动的，意味要不同端口，一个80，另外一个就得是别的。不用代理的话，就会是一个是 “https：//xyz.com”，一个是 “https：//xyz:8080.com”，也没什么，就是比较难看。这还不是什么问题，主要是 https 端口就一个443，协议不同，https网站还不能请求http的资源。

那就只能统一入口了，然后做网络分发，一开始想的是做不同路径映射 “https：//xyz.com/main”，“https：//xyz.com/file”，这样子，返回不同服务，这样子也容易配置。后面觉得这样不够好看，这样需要改动服务的base入口，因为一开始就以根路径为入口。
而且“一个域名同时请求的资源有限，chrome是六个，文件请求可以配置成不一样的域名，不要带cookie等请求头，有助于性能优化”。当然在我这有点扯淡，远远不到要用这个性能优化的手段。不过配置成 “https：//www。xyz.com”，“https：//file.xyz.com”，这样就好看多了。就是要在阿里云申请多一个子域名的解析，不过也很简单，配置多一个“A”解析就行了。

配置

接着就是 nginx 怎么配了，一开始我还是不知道可不可以，直接看配置

Read More

介绍
仓库（当前commit）

核心吸引力：
使用浏览器原生ES模块功能，不做耗时的打包，达到极速的启动速度。同时达到真正的按需加载。

问题一：
第三方不是Esmodule的依赖库要预先处理成ES输出，暂存起来。使用预构建，将处理结果打包输出到node_modules/.vite。记录在 _metadata.json 文件上，这里了称为“优化依赖元数据”。

问题二：
依赖资源的请求。我们代码里写的都是分散地对ES module的引用，但实际请求的确实只有一份打包合并的文件。所以必然在运行时挟持了请求路径。这里借助一下 modern.js 官网的文字给予解释。vite server也是这么处理的。

Read More