web_accumulate
web_accumulate copied to clipboard
OBKoro1
前端进阶积累:http://obkoro1.com/web_accumulate/accumulate/
### [博客链接](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完整代码 命令行终端的更多细节 下载试玩...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E7%BD%91%E9%A1%B5%E5%85%A8%E5%B1%8F.html) # 全屏模式轻松掌握[局部元素全屏展示] 我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播 放的那种。感觉很强，前几个星期有个需求也是关于全屏模式的，接触之后才知道全屏模式并不神秘，是个很容易掌握的技能... 博客、前端积累文档、公众号、GitHub # CodePen Demo 地址：演示、code 进去看看，玩一下，本文将结合这个demo一起进行讲解。 # 全屏功能封装在一个类里面： 我把全屏模式封装在一个类里面，在代码中有详细的注释，如果有需要的话，直接把类拿出来，根据栗子和注释使用即可。 代码在codepen的demo里。 # 何谓全屏？ MDN介绍： 使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。 chrome下的全屏表现： 全屏会隐藏标签栏,书签栏 如果网页一开始不是全部撑开的形式，全屏下，也会将要全屏的元素充满整个屏幕 可以多层全屏，如栗子中一样，可以先左边全屏，然后红色全屏。 在这种情况下退出全屏，只会退出红色全屏，退回到左边全屏的形式，所以页面依然是全屏模式。 进入全屏时，有一个默认的提示：'按esc即可退出全屏模式'，如下图显示： 当按Esc或调用退出全屏方法，退出全屏。标签栏和书签栏依然是隐藏的，网页上的元素恢复成原本的尺寸。 要显示书签栏和标签栏，需要刷新一下页面。 # 全屏API：...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/amateur/%E9%AB%98%E6%80%A7%E8%83%BDjs.html) # [读书笔记]《高性能 JavaScript》 # 缺陷 这本书是 2010 年出版的，这本书谈性能是有时效性的，现在已经是 2018 年了，这几年前端发展的速度是飞快的，书里面还有一些内容考虑 IE6、7、8 的东西，殊不知现在这些都已经不再考虑了，所以不可避免的有一些知识是比较老的。有些解决方法现在已经不是最好的解决方式，比如工具那一章。 # 前言 总的来说，这本书整体给出的性能优化建议，以及作者耐心的实践，对我们开发优化的启发和帮助还是很大的，因为它里边的很多知识，都是作者通过实践总结出来的，都是经验的积累，这在一般的教科书上是学不到的。特别是对于 js 基础比较差一点的，里面有很多知识点尽管在现在还是非常有必要的。 下面我就将各章节的一些重要的知识点总结写出来，争取将干货都提取出来。 # 第一章-加载和执行 js 的阻塞特性： 当浏览器在执行 js 代码的时候，不能同时做其他事情。（界面 ui 线程和 js...