源码解读一:omit.js

koroFileHeader插件

  1. 在插件市场下载koroFileHeader
  2. 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. 使用:
    1. 快速生成文件头部注释快捷键(ctrl + win + i
    2. 函数注释快捷键(ctrl + win + t
    3. 多行函数参数鼠标选中后函数声明后按快捷键自动提取

omit.js源码解读

阅读预备知识

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

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

注:

  1. 对象是根据属性名来对应,数组是根据索引号来对应

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值也会发生改变

拓:深浅拷贝的区别:

  1. 深拷贝是直接将一个数据的值赋值给另一个数据,二者中任意一个修改都不会影响另一个。

  2. 浅拷贝是将数据的地址(内存地址)拷贝给另一个数据,即两个变量都指向同一块内存地址,改变任意一个数据的值都是在改变内存地址所存储的值,两个值都会发生改变。

  3. 基本数据类型在进行赋值操作时都是深拷贝,引用类型操作就会存在深浅拷贝问题。

  4. Object,Array,Function,Map,Set,在赋值过程中都是浅拷贝。

  5. 将浅拷贝转换成深拷贝的方法

    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:内部命令对应的可执行文件的路径。
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hoki802

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值