前言

本文参加了由大众号@若川视界建议的每周源码共读活动,点击了解概况一起参与。

本篇是源码共读第36期 | 可能是历史上最简略的一期 omit.js 剔除目标中的特点,点击了解本期概况

准备

首先omit.js是什么?有什么效果?

虽然咱们可能都知道可是我还是简略粗犷用谷歌翻译下官方说明啊,那便是用于创建已删除某些字段的目标的浅表副本的有用函数。 具体是什么样子呢,官方有给举例

var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }

另外,那个……自己真真一个英语白痴,omit单词都还不大会读,也是火速去谷歌查一下,omit有省略、忽略等意思ok,简略了解了下,现在就开始呗

  1. 拉取代码
git clone https://github.com/benjycui/omit.js.git
  1. 装置依赖
npm i
  1. 执行测验用例
npm run test

结果如下:

源码共读,第36期 | omit.js 剔除对象中的属性

(实不相瞒,我一开始纠结于执行因为现已习气直接run serve/dev/start 跑起来看效果了,一拿到有点不知从哪开始也没看后面对应的语句,下意识执行了run start结果途径个人大意选错了一直没效果我就更不知怎么下手了,下面会解说这些指令对应什么)

目录

源码共读,第36期 | omit.js 剔除对象中的属性

package.json

{
  "name": "omit.js", // 包名
  "version": "2.0.2", // 迭代版别
  "description": "Utility function to create a shallow copy of an object which had dropped some fields.", // 描绘
  "main": "lib/index.js", // 进口文件
  "module": "es/index.js", // ESM规范声明进口文件
  "types": "index.d.ts", // TS类型声明进口文件
  "files": [ // 被项目包含的文件名数组
    "lib",
    "es",
    "dist",
    "index.d.ts"
  ],
  "scripts": {
    "start": "father doc dev --storybook", // 运行项目并生成文档视图
    "build": "father doc build --storybook", // 构建项目并生成文档视图
    "compile": "father build", // 构建项目
    "gh-pages": "father doc deploy", // 发布文档
    "prepublishOnly": "npm run compile && np --yolo --no-publish", // 编译并发布包
    "lint": "eslint .", 
    "test": "father test", // 运行测验用例
    "coverage": "father test --coverage" // 测验覆盖率
  },
  "repository": { // git地址
    "type": "git",
    "url": "git+https://github.com/benjycui/omit.js.git"
  },
  "keywords": [ // 搜索关键字
    "object",
    "omit"
  ],
  "author": "Benjy Cui<benjytrys@gmail.com>", // 作者
  "license": "MIT", // 许可证
  "bugs": {
    "url": "https://github.com/benjycui/omit.js/issues" // bug提交地址
  },
  "homepage": "https://github.com/benjycui/omit.js#readme", // 项目包官网地址
  "devDependencies": { // 开发环境所需以来
    "@umijs/fabric": "^2.2.2",
    "assert": "^1.4.1",
    "eslint": "^7.4.0",
    "father": "^2.29.5",
    "np": "^6.3.1",
    "rc-tools": "^6.3.3"
  }
}

阅览的时候发现了一个自己从来没见过的东西father,并且每一个脚本相关运行还都与其相关,就抓住去查阅了下

father

father 是umijs下根据rollup、docz、storybook、jest、prettier和eslint的打包和文档工具,npm指路 / git地址。如果感兴趣能够自己去官方具体阅览下,在此简略说下用到的这几个

"start": "father doc dev --storybook",
"build": "father doc build --storybook",
"gh-pages": "father doc deploy",

这三个脚本是docz配置,doc dev将在开发环境下,展现项目中的.md文档,本库中是README.md文件, 发动后可看到

源码共读,第36期 | omit.js 剔除对象中的属性

doc build形式将会本地构建.doc目录,能够将其目录下文件上传到服务器。doc deploy形式将会主动部署到gitHub目录。

"compile": "father build"

build打包库,输出多种格式文件

"prepublishOnly": "npm run compile && np --yolo --no-publish"

我个人了解便是构建后运用np去帮助咱们快速发布npm包

单元测验

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```是个断语测验依赖包,此处运用了其两个办法```assert.deepEqual``````assert.notEqual```

前者是遍历目标一切本身的且可枚举的特点,进行比较持平。后者是比较不持平,只有在实际值等于预期值时,会抛出错误。什么可枚举比较是怎样呢,例如:

let obj = { a: 1};
let obj1 = Object.create(obj);
console.log(Object.keys(obj)); // ['a']
console.log(Object.keys(obj1)); // []
assert.deepEqual(obj, obj1);
// AssertionError: { a: 1 } deepEqual {} 此刻就不持平
let obj2 = obj
console.log(Object.keys(obj2)); // ['a']
assert.deepEqual(obj, obj2);
// OK

源码

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;
  1. 函数内部创建一个局部变量shallowCopy 通过Object.assign将obj一切可枚举特点复制到shallowCopy
  2. fields传入的是一个目标特点名数组,将其循环遍历拿到各特点key,将存在于shallowCopy目标上的相对应的key进行移除
  3. 返回shallowCopy

注:这儿没加判别,我觉得加了判别会更完善一些

总结

  1. 学习了omit的源码完成
  2. 复习了Object.assign Object.create
  3. 了解father
  4. 了解测验用例的运用

一起也发现了个人的一些不足之处

  1. 对打包发布等了解甚少,自己之前只关注开发阶段,校验、单测、文档站、打包发布等还没着手,自己目前还没有发布过自己的npm包,下次能够测验下
  2. 不熟悉测验用例,没有写过,平常都是打断点