OBKoro1
### [配置字段链接](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE%E5%AD%97%E6%AE%B5) 2021/04/21 配置文档： ## 该文件不是最新的，最新配置请查看[所有配置字段](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE%E5%AD%97%E6%AE%B5), 并在[配置文档](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE)中搜索详细配置 ## 该文件不是最新的，最新配置请查看[所有配置字段](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE%E5%AD%97%E6%AE%B5), 并在[配置文档](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE)中搜索详细配置 ## 该文件不是最新的，最新配置请查看[所有配置字段](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE%E5%AD%97%E6%AE%B5), 并在[配置文档](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE)中搜索详细配置 ### 以下是插件的所有配置段，在[配置文档](https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE)中搜索对应字段了解详细用法： ```js // 头部注释 "fileheader.customMade": { // 头部注释默认字段 "Author": "your name", "Date": "Do not edit", //...
## 本issue用于快速分享摸鱼网站, 直接在下方评论区发送新增、编辑的摸鱼网站列表。 ### 如何复制摸鱼网站列表？ 1. 打开插件管理面板 2. 点击页面顶部的“分享摸鱼网站按钮” => 打开弹窗 3. 点击复制或者选择摸鱼网站数据。 4. 复制到评论区 5. 发送评论。 ## 点个Star吧~ 如果觉得插件还不错，就给插件点个赞吧, 给插件点个小星星鼓励一下吧❤️~ PS: Star按钮在页面的右上角，有数量的那个按钮~ ## 感谢你分享的摸鱼网站 随手分享摸鱼网站，让插件更好用, 利人利己~ 给你点个赞~ 👍🏻
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/JS%E5%9F%BA%E7%A1%80-%E7%BB%A7%E6%89%BF.html) # JS基础-深入浅出继承 上篇文章详细解析了原型、原型链的相关知识点，这篇文章讲的是和原型链有密切关联的继承，它是前端基础中很重要的一个知识点，它对于代码复用来说非常有用，本篇将详细解析JS中的各种继承方式和优缺点进行，希望看完本篇文章能够对继承以及相关概念理解的更为透彻。 # 本篇文章需要先理解原型、原型链以及call的相关知识： JS基础-函数、对象和原型、原型链的关系 js基础-面试官想知道你有多理解call,apply,bind？ # 何为继承？ 维基百科：继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。 继承是一个类从另一个类获取方法和属性的过程。 PS：或者是多个类 # JS实现继承的原理 记住这个概念，你会发现JS中的继承都是在实现这个目的，差异是它们的实现方式不同。 复制父类的属性和方法来重写子类原型对象。 # 原型链继承(new)： function fatherFn() { this.some = '父类的this属性'; } fatherFn.prototype.fatherFnSome = '父类原型对象的属性或者方法';...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/%E6%B5%8F%E8%A7%88%E5%99%A8%E9%87%8D%E7%BB%98%E9%87%8D%E6%8E%92.html) # 轻松掌握浏览器重绘重排原理 很多人都知道要减少浏览器的重排和重绘，但对其中的具体原理以及如何具体操作并不是很了解，当突然提起这个话题的时候，还是会一脸懵逼。希望大家可以耐着性子阅读本文，仔细琢磨，彻底掌握这个知识点！ 博客、前端积累文档、公众号、GitHub # 网页生成过程： HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree) 生成布局（flow），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。 网上找了一张图片，我加了注释会更直观一些： # 渲染： 网页生成的时候，至少会渲染一次。 在用户访问的过程中，还会不断重新渲染 重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。 # 重排比重绘大： 大，在这个语境里的意思是：谁能影响谁？ 重绘：某些元素的外观被改变，例如：元素的填充颜色 重排：重新生成布局，重新排列元素。 就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。 比如改变元素高度，这个元素乃至周边dom都需要重新绘制。...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/Eslint%E8%87%AA%E5%8A%A8%E4%BF%AE%E5%A4%8D%E6%A0%BC%E5%BC%8F%E9%94%99%E8%AF%AF.html) # VsCode保存时自动修复Eslint错误 同一个项目，保持代码风格的一致，是非常重要的一个规范。但事实上项目小组成员的代码校验规则、格式化工具通常都不一致，为了避免项目到后期出现无法维护的问题，项目成员使用同一套校验规则，同一个格式化方式是相当好的步骤之一。 游泳、健身了解一下：博客、前端积累文档、公众号 # 保存时自动统一代码风格： 先通过一些简单的配置，然后： Ctrl+s / command+s 时自动修复代码的格式错误 自动修复的规则是读取项目根目录的Eslint规则 这样就能保证项目成员都是一套验证规则的代码风格 # 配置： # 1.安装VsCode的EsLint和vetur插件 如图安装EsLint插件： # 2.为项目安装EsLint包： 注意要安装在开发环境上，还有就是如果你使用的是脚手架的话，选了Eslint选项，会自带这些包。 # 3.在项目的根目录下添加.eslintrc.js 用于校验代码格式，根据项目情况，可自行编写校验规则： module.exports = { //...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/stop-mess-around.html) # 我用来阻止你摸鱼看直播、知乎和微博的Chrome插件 chrome插件通过强制的手段禁止大家浪费时间摸鱼，在上班/学习期间下意识的打开摸鱼网站, 自动检测摸鱼网站, 提示激励信息后, 关闭摸鱼网站。 # Github地址 stop-mess-around # 插件解决的问题: 停止下意识的摸鱼 在工作、学习期间，如果事情不是太忙，或者说在学习/忙碌一小段时间之后。 就会下意识的打开或者输入知乎、掘金沸点、微博等网站，开始了摸鱼时光。 可能是摸鱼奶头乐太快乐了，时间很快就过去两三个小时，而忘记自己的工作、学习初衷了。 事后我们通常会为之内疚，觉得很浪费时间 但无奈摸鱼网站深谙人性弱点，仅靠我们自身的自律还是很难去抵抗这种诱惑。 作者本人曾经也深受其害，后来我想到可以用工具来限制这种下意识的行为。 于是很喜欢写工具的我, 写了一个脚本用来检测摸鱼网站、检测到了就自动关闭摸鱼网站。 我在经过一段时间的使用之后，我就再也没有在电脑上打开摸鱼网站了，工作学习效率也提高了很多。 很奇怪，每次打开之后就被插件提示我不要摸鱼，然后被关闭摸鱼网站。 久而久之我就戒掉了在休息的间隙没事做就打开摸鱼网站的习惯了。 就我个人而言，真的很有用，很有效果，为我节省了很多时间。 所以我将它做成chrome插件，开发了可视化的界面，方便不懂技术的人也可以直接上手使用。 希望这个开源工具可以有效的帮助大家减少摸鱼时间，提高工作和学习的效率。 # 使用示例...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/ESLint%E6%8F%92%E4%BB%B6.html#%E6%89%8B%E6%91%B8%E6%89%8B%E6%95%99%E4%BD%A0%E5%86%99%E4%B8%AAeslint%E6%8F%92%E4%BB%B6%E4%BB%A5%E5%8F%8A%E4%BA%86%E8%A7%A3eslint%E7%9A%84%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86) # 手摸手教你写个ESLint插件以及了解ESLint的运行原理 这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule，用以帮助我们更深入的理解ESLint的运行原理，并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则。 # 插件目标 禁止项目中setTimeout的第二个参数是数字。 PS： 如果是数字的话，很容易就成为魔鬼数字，没有人知道为什么是这个数字, 这个数字有什么含义。 # 使用模板初始化项目： # 1. 安装NPM包 ESLint官方为了方便开发者开发插件，提供了使用Yeoman模板(generator-eslint)。 对于Yeoman我们只需知道它是一个脚手架工具，用于生成包含指定框架结构的工程化目录结构。 npm install -g yo generator-eslint # 2. 创建一个文件夹： mkdir eslint-plugin-demo cd...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E5%A4%8D%E5%88%B6%E7%B2%98%E8%B4%B4%E7%B3%BB%E5%88%97.html) # 前端er怎样操作复制粘贴 # API 介绍: # 复制、剪切、粘贴事件： copy 发生复制操作时触发; cut 发生剪切操作时触发; paste 发生粘贴操作时触发; 每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste; 这几个 before 一般不怎么用，所以我们把注意力放在另外三个事件就可以了。 触发条件: 鼠标右键菜单的复制、粘贴、剪切; 使用了相应的键盘组合键，比如:command+c、command+v; 就算你是随便按的，也会触发事件。高程中介绍在Chorme、Firefox和Safari中，这几个 before 事件只会在真实会发生剪贴板事件的情况下触发，IE 上则可以触发 before。我实际测试的时候最新版chorme也会乱按也会触发，所以限制应该是在早一点的版本上。 so...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/electron/electron-terminal-demo.html) # 从零开始带你写一个运行命令行的终端[手把手教学] # 前言 Electron很出名，很多人可能了解过，知道它是用来开发桌面端的应用，但是一直没有在项目中实践过，缺乏练手的实践项目。 很多开源的命令行终端都是使用Electron来开发的，本文将从零开始手把手的教大家用Electron写一个命令行终端。 作为一个完整的实战项目示例，该终端demo也将集成到Electron开源学习项目electron-playground中，目前这个项目拥有700+ Star⭐️，它最大的特点是所见即所得的演示Electron的各种特性，帮助大家快速学习、上手Electron。 大家跟着本文一起来试试Electron吧~ # 终端效果 开源地址: electron-terminal-demo giit提交代码演示 # 目录 初始化项目。 项目目录结构 Electron启动入口index-创建窗口 进程通信类-processMessage。 窗口html页面-命令行面板 命令行面板做了哪些事情 核心方法：child_process.spawn-执行命令行监听命令行的输出 stderr不能直接识别为命令行执行错误 命令行终端执行命令保存输出信息的核心代码 html完整代码 命令行终端的更多细节 下载试玩...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/electron/electron-terminal-demo.html?code=3e1708e01fdd04daf01d#%E5%90%AF%E5%8A%A8%E4%B8%8E%E8%B0%83%E8%AF%95) # 从零开始带你写一个运行命令行的终端[手把手教学] # 前言 Electron很出名，很多人可能了解过，知道它是用来开发桌面端的应用，但是一直没有在项目中实践过，缺乏练手的实践项目。 很多开源的命令行终端都是使用Electron来开发的，本文将从零开始手把手的教大家用Electron写一个命令行终端。 作为一个完整的实战项目示例，该终端demo也将集成到Electron开源学习项目electron-playground中，目前这个项目拥有700+ Star⭐️，它最大的特点是所见即所得的演示Electron的各种特性，帮助大家快速学习、上手Electron。 大家跟着本文一起来试试Electron吧~ # 终端效果 开源地址: electron-terminal-demo giit提交代码演示 # 目录 初始化项目。 项目目录结构 Electron启动入口index-创建窗口 进程通信类-processMessage。 窗口html页面-命令行面板 命令行面板做了哪些事情 核心方法：child_process.spawn-执行命令行监听命令行的输出 stderr不能直接识别为命令行执行错误 命令行终端执行命令保存输出信息的核心代码 html完整代码 命令行终端的更多细节 下载试玩...