【源码学习】第③期 | 简单又实用的omit.js

月夏
143 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

工欲善其事必先利其器，日常开发中，为了提高开发效率，相信不少小伙伴都用过lodash库处理数据、请求等，对其omit、pick等方法应该都不会觉得陌生，接下来就一起来学习一下实用又简单的用于剔除对象属性的omit.js源码

目标

  1. 掌握omit.js的核心编程思想
  2. 掌握npm包的发布 3.omit.js测试用例

下载源码

omit.js github地址

git clone https://github.com/benjycui/omit.js.git

目录结构分析

|-- omitjs
    |-- .eslintignore eslint忽略文件
    |-- .eslintrc.js  eslint配置
    |-- .fatherrc.js  father打包配置
    |-- .gitignore    git忽略文件
    |-- .travis.yml    
    |-- index.d.ts    omit.js ts类型文件
    |-- index.js      入口文件地址
    |-- LICENSE
    |-- package.json npm包、脚本命令
    |-- README.md  使用说明
    |-- src
    |   |-- index.js  omit.js js文件
    |-- tests         测试用例
        |-- index.test.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",
  "types": "index.d.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": {
    "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"
  },
  "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"
  }
}

重点关注一下scripts跟devDependencies这两个标签，scripts是运行脚本，devDependencies是开发依赖

devDependencies
  • @umijs/fabric ——eslint、prettier、stylelint的配置文件合集
  • 用法
      1. yarn add @umijs/fabric -D
      1. 根目录新建配置文件eslint.js&eslintignore 或prettierrc.js 或 stylelintrc.js
      1. 配置文件，如omit.js的eslint.js
    const base = require('@umijs/fabric/dist/eslint');
module.exports = {
  ...base,
  rules: {
    ...base.rules,
    'no-template-curly-in-string': 0,
    'prefer-promise-reject-errors': 0,
    'react/no-array-index-key': 0,
    'react/sort-comp': 0,
    'import/no-named-as-default': 0,
    'import/no-named-as-default-member': 0,
  },
    };
  • father —— 打包发布前端工具库

image.png

  • 用法
      1. yarn add father
      1. 配置文件fatherrc.js， 如omit.js的配置：
    export default {
  entry: ['src/index.js'], // 指定入口文件
  cjs: 'babel', // 指定cjs的打包方式为babel
  esm: { type: 'babel', importLibToEs: true },
  // 指定esm的打包类型为babel, 在esm模式下把import项里的/lib/ 转换为 /es/
  doc: { base: '/switch' }, 
  preCommit: { 
    eslint: true,
    prettier: true,
  },
};
    scripts —— 脚本命令
    调试 "test": "father test"
    • 运行测试用例命令：yarn test，结果如下，也可以单独debug某一段用例 image.png
源码分析
   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;
omit方法实现逻辑
  • object.assign 浅拷贝入参
  • for循环遍历剔除属性
编写测试用例调试omit.js
  • 可以参考 mocha编写测试用例，实际项目中更多用 jest
  • 测试用例
describe('testOmit',()=>{
  const tests = [
    {args:{name:'yuexia',age:18},omitkey:['age'],expected:{name:'yuexia'}},
    {args:{name:'yuexia'},omitkey:[],expected:{name:'yuexia'}},
  ]
  tests.forEach(({args,omitkey,expected})=>{
     it(`correctly omit args`, function(){
       const res = omit(args,omitkey)
       assert.deepEqual(res,expected)
     })
  })
})
  • 测试结果

image.png

  • 当把deepEqual换成strictEqual，测试用例则不能通过，进一步说明omit只是浅拷贝传入值

image.png

总结

通过对omit目录的分析，学习了利用father打包npm包，以及发布自己的npm包时通过@umijs/fabric来集合配置eslint、prettier、stylelint，实践了一下通过编写测试用例来调试omit.js，分析了omit的实现，加深了对omit的理解~
avatar
文章
阅读
粉丝