源码共读 | github访问慢如蜗牛，如何1秒打开？

侃如
272 阅读3分钟

我正在参与掘金会员专属活动-源码共读第一期，点击参与

github阅读、调试

大家好，我是侃如，姗姗来迟的参加了若川大佬和官方的源码共读活动。第一期是【omit.js剔除对象中的属性】，很快啊，我啪一下就点开了omit.js的源码仓库，然后就没有然后了...

2e847c0d193e07ed826e5f7fc709ffc.png 尝试了几次，有时可以访问，但还是比较慢，看来得先解决github访问的问题，源码都打不开，怎么阅读呢？经过一番调研，总结了下面几种方法大家可以尝试下：

github1s

简单粗暴、非常好用，专为阅读源码而生！我们在访问开源项目的github仓库时，只需要在github.com中的github后面加上1s就可以，像这样：github1s.com/benjycui/om…， 访问后，打开了一个在线vscode编辑器，内容就是我们访问仓库源码。没有1s那么夸张，但是和访问github官网的速度比起来，简直是云泥之别。

852e3ff2534b28124b3ef552850e0d4.png

Watt Toolkit

原Steam++，现更名为 Watt Toolkit，看之前的名字就知道是一个游戏加速器，挺多大佬推荐的，简单尝试了一下，好像没下载下来，大家可以试下。

image.png

Codespaces

官方提供的在线调试功能，Code里面除了下载到本地，还有一个Codespaces。 image.png

同样会打开一个在线vscode编辑器，可以自主调试，刚开始因为要加载一些依赖，可能会比较慢。但是还是受网络限制，如果github访问慢还是不太行。 1670681697(1).png

建议还是自己搞一个用着顺手的加速器，或者配置下代理，网上相关的教程很多。

omit.js

言归正传，来看下omit.js的源码，比较简单，通过Object.assign方法实现一个浅拷贝，遍历需要剔除的对象键，然后删除即可。

function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  const shallowCopy = Object.assign({}, obj);
  for (let i = 0; i < fields.length; i += 1) {
    const key = fields[i];
    delete shallowCopy[key];
  }
  return shallowCopy;
}

export default omit;

虽然比较简单，建议最好自己调试下，把不清晰的地方捋顺。 image.png

再看下测试用例

import assert from 'assert';
import omit from '../src';

describe('omit', () => {
  it('should create a shallow copy', () => {
    const benjy = { name: 'Benjy' };
    const copy = omit(benjy, []);
    assert.deepEqual(copy, benjy);
    assert.notEqual(copy, benjy);
  });

  it('should drop fields which are passed in', () => {
    const benjy = { name: 'Benjy', age: 18 };
    assert.deepEqual(omit(benjy, ['age']), { name: 'Benjy' });
    assert.deepEqual(omit(benjy, ['name', 'age']), {});
  });
});

作者这里用的assert模块，主要用于断言（判断表达式是否符合预期，不符合则报错），这个模块一共有11个方法，作者在这里使用了deepEqual和notEqual；

deepEqual方法用来比较对象，键和值是否相等，一一对应；

notEqual方法相当于 != ，如果这两个值相等则会抛出错误；

作者这里写的两个断言，第一个用于判断对象浅拷贝是否成功，第二个用于判断属性剔除是否成功。

实现深度剔除对象属性

简单修改下，通过递归我们可以实现一个深度剔除对象属性的方法；

function omit(obj, filds) {
    for (let i = 0; i < filds.length; i++) {
        const keyd = filds[i];
        Object.keys(obj).forEach(key => {
            if (typeof obj[key] == 'object') {
                omit(obj[key], filds)
            } else {
                delete obj[keyd];
            }
        });

    }
    return obj;
};
const obj = {
    a: 1,
    b: 2,
    c: {
    a: 1,
    b: 2,
    c: {
            a: 1,
            b: 2,
            c: 3
        }
    }
}
//{c:{c:{c:3}}}
console.log(omit(obj, ["a", "b"]))

总结

本期源码阅读到这里就结束了，收获有三点：

  • 通过阅读omit.js源码，树立了自信心，得到了正反馈；
  • 清楚了源码阅读、调试的基本流程，为后面阅读更复杂源码打下基础；
  • 源码本身的知识点，总结、实现了剔除对象属性的方法；

第一期源码阅读相对比较简单，除了源码本身，我们还应该关注阅读源码的方式、方法，合适的方法能让我们节省大量的时间，提高阅读源码的效率。

avatar
文章
阅读
粉丝