源码解读一：omit.js

Hoki802

已于 2022-09-30 10:22:01 修改

阅读量455

点赞数

分类专栏：前端源码解读笔记文章标签：前端 javascript

于 2022-09-30 10:05:34 首次发布

本文链接：https://blog.csdn.net/cloki/article/details/127118618

版权

前端源码解读笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

koroFileHeader插件

在插件市场下载koroFileHeader
在setting.json文件中配置一下内容

// 头部注释
"fileheader.customMade": {
    // Author字段是文件的创建者 可以在specialOptions中更改特殊属性
    // 公司项目和个人项目可以配置不同的用户名与邮箱 搜索: gitconfig includeIf  比如: https://ayase.moe/2021/03/09/customized-git-config/
    // 自动提取当前git config中的: 用户名、邮箱
    "Author": "git config user.name && git config user.email", // 同时获取用户名与邮箱
    // "Author": "git config user.name", // 仅获取用户名
    // "Author": "git config user.email", // 仅获取邮箱
    // "Author": "OBKoro1", // 写死的固定值 不从git config中获取
    "Date": "Do not edit", // 文件创建时间(不变)
    // LastEditors、LastEditTime、FilePath将会自动更新 如果觉得时间更新的太频繁可以使用throttleTime(默认为1分钟)配置更改更新时间。
    "LastEditors": "git config user.name && git config user.email", // 文件最后编辑者 与Author字段一致
    // 由于编辑文件就会变更最后编辑时间，多人协作中合并的时候会导致merge
    // 可以将时间颗粒度改为周、或者月，这样冲突就减少很多。搜索变更时间格式: dateFormat
    "LastEditTime": "Do not edit", // 文件最后编辑时间
    // 输出相对路径，类似: /文件夹名称/src/index.js
    "FilePath": "Do not edit", // 文件在项目中的相对路径 自动更新
    // 插件会自动将光标移动到Description选项中 方便输入 Description字段可以在specialOptions更改
    "Description": "", // 介绍文件的作用、文件的入参、出参。
    // custom_string_obkoro1~custom_string_obkoro100都可以输出自定义信息
    // 可以设置多条自定义信息 设置个性签名、留下QQ、微信联系方式、输入空行等
    "custom_string_obkoro1": "", 
    // 版权声明 保留文件所有权利 自动替换年份 获取git配置的用户名和邮箱
    // 版权声明获取git配置, 与Author字段一致: ${git_name} ${git_email} ${git_name_email}
    "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by ${git_name_email}, All Rights Reserved. "
    // "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by 写死的公司名/用户名, All Rights Reserved. "
},
// 函数注释
"fileheader.cursorMode": {
    "description": "", // 函数注释生成之后，光标移动到这里
    "param": "", // param 开启函数参数自动提取 需要将光标放在函数行或者函数上方的空白行
    "return": "",
}

使用：
1. 快速生成文件头部注释快捷键（ctrl + win + i）
2. 函数注释快捷键（ctrl + win + t）
3. 多行函数参数鼠标选中后函数声明后按快捷键自动提取

omit.js源码解读

阅读预备知识

Object.assign(目标元素,源数据1,源数据2,…)方法解读：

将源数据里面的内容添加到目标元素中去，若源数据中的内容有冲突，后面的会覆盖前面的。
当此方法用于数组中，目标元素的个数，决定了拷贝后元素的个数。
Object.assign()是浅拷贝，Object.assign()拷贝的是属性值，将源对象的所有可枚举属性，复制到目标对象中，并返回合并后的目标对象。

注：

对象是根据属性名来对应，数组是根据索引号来对应

2.Object.assign()方法在源数据中只有一层对象时，是深拷贝；如果源数据中出现了深层对象时，是浅拷贝。

let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
obj2.a = 2; // a属性值修改互不影响
obj2.b.c = 3; // obj1的c值也会发生改变

拓：深浅拷贝的区别：

深拷贝是直接将一个数据的值赋值给另一个数据，二者中任意一个修改都不会影响另一个。
浅拷贝是将数据的地址（内存地址）拷贝给另一个数据，即两个变量都指向同一块内存地址，改变任意一个数据的值都是在改变内存地址所存储的值，两个值都会发生改变。
基本数据类型在进行赋值操作时都是深拷贝，引用类型操作就会存在深浅拷贝问题。
Object，Array，Function，Map，Set，在赋值过程中都是浅拷贝。
将浅拷贝转换成深拷贝的方法
1. Array数组：slice()、concat()、Array.from()、es6中的解构赋值。
2. Object对象：
3. 使用JSON.parse(JSON.stringify(obj))

src/index.js

/**
 * @description: 剔除对象中的属性
 * @param {*} obj：需要剔除属性的对象
 * @param {*} fields：需要剔除的属性名，一个数组
 * @return {*}
 */
function omit(obj, fields) {
    // 将传递来的对象拷贝一份
    const shallowCopy = Object.assign({}, obj);
    // 遍历数组，找出每一个属性名
    for (let i = 0; i < fields.length; i += 1) {
        // 拿到对象中的key值
        const key = fields[i];
        // 删除该对象
        delete shallowCopy[key];
    }
    // 返回删除后的对象
    return shallowCopy;
}
export default omit;

typescript声明文件index.d.ts

// K做了泛型约束，是T中属性名的联合类型
declare function Omit<T, K extends keyof T>(
  obj: T,
  keys: Array<K>
): Omit<T, K>;

export default Omit;

拓展：在写第三方库时，ts声明文件写好后，需要在package.json文件中配置好，让使用本库更好使用。

{
  ...
  "types": "index.d.ts",
   ...
}

tests/index.test.js文件

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

// Describe 是 Jasmine 测试框架的一个函数。它只是描述了一组用 it 函数枚举的测试用例。
describe('omit', () => {
    it('should create a shallow copy', () => {
        const benjy = { name: 'Benjy' };
        const copy = omit(benjy, []);
        // assert.deepEqual(actual, expected[, message])
        // 深度比较 actual 和 expected 参数，使用比较运算符（==）比较原始值。
        // 如果这两个值不相等，将会抛出一个带有 message 属性
        assert.deepEqual(copy, benjy);
        // assert.notEqual(actual, expected[, message]);
        // 浅测试，使用不等于比较运算符（!=）比较。
        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']), {});
    });
});

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.", 
  // 项目默认执行文件,如果没有设置，则默认加载项目根目录下的 index.js 文件
  "main": "lib/index.js", 
  // 以 ES Module(也就是 ES6)模块化方式进行加载,会优先查看是否有 module 字段，没有才使用 main 字段。
  "module": "es/index.js",
  // ts声明文件
  "types": "index.d.ts",
  // 被项目包含的文件名数组
  "files": [
    "lib",
    "es",
    "dist",
    "index.d.ts"
  ],
  // 执行 npm 脚本命令简写
  "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"
  },
  // 项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。
  "keywords": [
    "object",
    "omit"
  ],
  // 项目开发者
  "author": "Benjy Cui<benjytrys@gmail.com>",
  // 软件授权条款，让用户知道他们的使用权利和限制。
  "license": "MIT",
  // bug 提交地址
  "bugs": {
    "url": "https://github.com/benjycui/omit.js/issues"
  },
  // 项目包的官网 URL。
  "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"
  }
  // dependencies：生产环境下，项目运行所需依赖。
  // bin：内部命令对应的可执行文件的路径。
}