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：内部命令对应的可执行文件的路径。
}

源码解读一：omit.js相关推荐

underscore-1.8.3.js 源码解读全文注释版
// Underscore.js 1.8.3 // http://underscorejs.org // (c) 2009-2015 Jeremy Ashkenas, DocumentCloud an ...
Evil.js源码解读
https://github.com/duo001/evil.js 火爆全网的 Evil.js 源码解读火爆全网的 Evil.js 源码解读什么?黑心996公司要让你提桶跑路了? 想在离开前给你们 ...
Feflow 源码解读
Feflow 源码解读 Feflow(Front-end flow)是腾讯IVWEB团队的前端工程化解决方案,致力于改善多类型项目的开发流程中的规范和非业务相关的问题,可以让开发者将绝大部分精力集中在 ...
前端日报-20160527-underscore 源码解读
underscore 源码解读 API文档浏览器 JavaScript 中加号操作符细节抛弃 jQuery,拥抱原生 JS 从 0 开始学习 GitHub 系列之「加入 GitHub」 js实现克隆 ...
dva处理_dva 源码解读
声明本文章用于个人学习研究,并不代表 dva 团队的任何观点. 原文以及包含一定注释的代码见这里,若有问题也可以在这里进行讨论起步为什么是dva? 笔者对 dva 的源代码进行解读,主要考虑到 ...
当我们谈论Virtual DOM时，我们在说什么——etch源码解读
etch简介首先我们有必要介绍一下etch. etch是atom团队下的开源项目,是一套非常简洁然而功能十分完善的virtualDOM机制.我在偶然的情况下接触到了这个开源项目,在读README时为 ...
vue2源码解读笔记(一)
前言第一,这篇文章比较长,需要占用你比较多时间,请使用一整段时间阅读和实践本文第二,内容是作者代码断点+源码阅读+资料查阅核实的产出,有笔误和理解错误的地方欢迎指证阅读本文的背景:当你前端的学习 ...
html 源码知识,源码解读
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
Vue 源码解读（11）—— render helper
当学习成为了习惯,知识也就变成了常识. 感谢各位的关注.点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/b ...

源码解读一：omit.js

koroFileHeader插件

omit.js源码解读

package.json文件解读

源码解读一：omit.js相关推荐

最新文章

热门文章