【源码共读之omit.js】如何在线使用github

简介: 【源码共读之omit.js】如何在线使用github


趁着这次源码共读的机会,可以好好玩一下GitHub了,但是令人头疼的问题就是通常情况下,我们只想看一下代码,并不想将代码下载下来,有时候因为源码的环境的问题,我们还要在本地安装很多环境,这是一件很让人头疼的事情,但是现在貌似情况有所转机。


查看 omit.js 源码


首先打开浏览器,输入源码地址,然后回车,源码地址:github.com/benjycui/om…

image.png

这个时候可以看到上面这样的页面,然后点进src,里面只有一个index.js的文件,然后再点开,就可以看到里面的代码了。


这种方式很低效,这个时候通常有两种解决方案:


  1. 直接在当前页面按.(数字键盘小数点),这个时候会打开一个在线的vscode,这个是由GitHub官方提供的方案,会比较慢。
  2. 可以直接在你打开的Github项目的页面,将github.com修改为github1s.com然后回车,效果相同,速度会比较快,这个方案由社区提供。


上面这两种方案都可以在线预览和编辑代码,但是运行好像还差了点意思,于是又有一个域名地址:gitpod.io


在线编辑方案


方案1(未成功,感兴趣可以自己去尝试一下)


可以直接访问这个站点:gitpod.io


这个网站需要安装一个插件,我用的是webstorm,插件地址在这里:gitpod-gateway


我在插件市场没有找到这个插件,所以需要手动安装,这里就不放安装教程了,其他的编辑器上面的站点都有介绍。


虽然我插件都安装了,工作区也创建好了,但是就是没有成功过。


image.png

方案2


这个是由Github官方提供的方案,在Github的代码面板,可以看到code按钮,通常都是通过这里去下载源码然后在本地阅读和调试,但是这里还有一个codespacestab页,可以通过这里创建一个工作区然后自在线编辑调试。

image.png

可以看到我上面的图,已经有一个工作区了,就是从这里创建的。


最终打开的页面也是一个在线的vscode,你也可以通过一些手段,在本地的ide中使用这个功能,官方一提供了完整的教程:codespaces


看我在线打开就是这个熊样:

image.png

接着就在线修改一下代码,并在云控制台中使用:

image.png

刚开始使用这个会很慢,因为要加载插件,要部署环境,而且github慢大家都懂。


真是vscode用户的福音呀,我刚开始用这个弄了好久,因为对vscode不熟悉,也不知道有哪些插件可以使用。

阅读源码


上面的截图已经可以看到我已经成功的在线查看了源码,并成功的修改并运行了,代码没有几行,就一起来看看吧:


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;
}

很简单的代码,先是对原始对象使用Object.assign进行一个浅拷贝,获得一个浅拷贝的对象;


然后对传递过来的fields键名列表进行一个遍历,删除浅拷贝对象里面对应的键名属性;


最后返回浅拷贝对象;


至此结束!!!


测试用例


作者还写了一个测试用例,在test目录下,代码如下:

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来写的,根据这个库的作者描述,这个测试用例工具使用方式是尽可能和nodejsassert API相同的。


这里提供了两组测试器:


  • 第一组用来断言omit返回的对象应该是一个浅拷贝对象
  • 第二组用来断言omit返回的对象应该删除传入的字段


至此结束!!!


依赖


虽然代码很少,但是这个库的依赖可不少,不过都是开发时的依赖:


  • @umijs/fabric:一个包含 prettier,eslint,stylelint 的配置文件合集
  • assert:测试用例
  • eslint:代码风格检查
  • father:npm发包构建工具
  • np:npm发布工具
  • rc-tools:react组件的离线工具(不知道干嘛的)


其实通过依赖不难看出这个开源项目的重心并不在代码功能上,而是为发布到npm上的一个小demo,功能不谈,但是一个npm包该有的东西都有。


目录
相关文章
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
100 2
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
34 0
|
3月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
40 1
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
222 1
|
3月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
49 3
|
3月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
104 0
html5+three.js公路开车小游戏源码
|
3月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
59 0
JS趣味打字金鱼小游戏特效源码
|
3月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
57 4

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57