OBKoro1
### [博客链接](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...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/%E9%AA%9A%E6%B3%A8%E9%87%8A%E5%B7%A5%E5%85%B7.html) # 骚注释工具: 一键添加佛祖保佑永无bug和神兽护体等骚注释 很早之前就见过各种佛祖保佑永无BUG、神兽护体等形式的注释，感觉很有趣，蛮骚的😉。 然后最近有人在我开源的VSCode插件：**koroFileHeader**里面给我提issue，希望能够支持这种类型的注释。 现在开发完成了，大家可以根据下面的使用方式试用一下。 # koroFileHeader插件简介 这个插件目前维护两年多了，有1300+Star，支持所有主流语言，支持自定义语言(不支持的语言可以自行设置)。 作用: 在文件开头添加注释，记录文件信息/文件的传参/出参等，让人对文件的功能一目了然。 如果觉得还不错的话，就给我点个Star⭐️吧~ 插件示例: # 一键添加佛祖保佑永无BUG、神兽护体等注释图案 # 使用方式 在VSCode插件市场下载安装koroFileHeader。 通过快捷键shift+command+p 输入注释图案/codeDesign，就可以选择注释图案了， 如下图所示。 # 注释图案GIF示例 # 支持各种语言的注释 注释图案不仅支持目前世面主流的注释形式，还支持自定义语言的注释形式。url # 注释图案和头部注释结合...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/tool/ESLint%E6%8F%92%E4%BB%B6.html) # 手摸手教你写个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...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/ES6/js%E8%B0%83%E7%94%A8%E6%A0%88%E6%9C%BA%E5%88%B6%E4%B8%8EES6%E5%B0%BE%E8%B0%83%E7%94%A8%E4%BC%98%E5%8C%96%E4%BB%8B%E7%BB%8D.html) # js 调用栈机制与ES6尾调用优化介绍 调用栈的英文名叫做Call Stack，大家或多或少是有听过的，但是对于js调用栈的工作方式以及如何在工作中利用这一特性，大部分人可能没有进行过更深入的研究，这块内容可以说对我们前端来说就是所谓的基础知识，咋一看好像用处并没有很大，但掌握好这个知识点，就可以让我们在以后可以走的更远，走的更快！ 博客、前端积累文档、公众号、GitHub # 目录 数据结构：栈 调用栈是什么？用来做什么？ 调用栈的运行机制 调用栈优化内存 调用栈debug大法 # 数据结构：栈 栈是一种遵从后进先出(LIFO)原则的有序集合，新元素都靠近栈顶，旧元素都接近栈底。 生活中的栗子，帮助一下理解： 餐厅里面堆放的盘子(栈)，一开始放的都在下面(先进)，后面放的都在上面(后进)，洗盘子的时候先从上面开始洗(先出)。 # 调用栈是什么？用来做什么？ 调用栈是一种栈结构的数据，它是由调用侦组成的。 调用栈记录了函数的执行顺序和函数内部变量等信息。 # 调用栈的运行机制 机制： 程序运行到一个函数，它就会将其添加到调用栈中，当从这个函数返回的时候，就会将这个函数从调用栈中删掉。 看一下例子帮助理解： //...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/Object.defineProperty.html) # 一次弄懂 Object.defineProperty # 基本用法： let obj = { singer: '周杰伦' }; let value = '青花瓷'; Object.defineProperty(obj, 'music', { value: value // music的值 // configurable: false, // music默认不能删除...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/%E6%89%8B%E6%91%B8%E6%89%8B%E6%95%99%E4%BD%A0%E4%BD%BF%E7%94%A8WebSocket.html) # 手摸手教你使用WebSocket 在本篇文章之前，WebSocket很多人听说过，没见过，没用过，以为是个很高大上的技术，实际上这个技术并不神秘，可以说是个很容易就能掌握的技术，希望在看完本文之后，马上把文中的栗子拿出来自己试一试，实践出真知。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub # WebSocket解决了什么问题： 客户端(浏览器)和服务器端进行通信，只能由客户端发起ajax请求，才能进行通信，服务器端无法主动向客户端推送信息。 当出现类似体育赛事、聊天室、实时位置之类的场景时，客户端要获取服务器端的变化，就只能通过轮询(定时请求)来了解服务器端有没有新的信息变化。 轮询效率低，非常浪费资源(需要不断发送请求，不停链接服务器) WebSocket的出现，让服务器端可以主动向服务器端发送信息，使得浏览器具备了实时双向通信的能力,这就是WebSocket解决的问题 # 一个超简单的栗子： 新建一个html文件，将本栗子找个地方跑一下试试，即可轻松入门WebSocket： function socketConnect(url) { // 客户端与服务器进行连接 let ws = new WebSocket(url); // 返回`WebSocket`对象，赋值给变量ws // 连接成功回调 ws.onopen...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/prototype.html) # JS基础-原型、原型链 JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清楚，更多的"很可能"是一知半解，而这部分内容又是JS的核心内容，想要技术进阶的话肯定不能对这个概念一知半解，碰到问题靠“猜”，却不理解它的规则！ # prototype # 只有函数有prototype属性 let a = {} let b = function () { } console.log(a.prototype) // undefined console.log(b.prototype) // { constructor: function(){...} } #...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/prototype.html) # JS基础-原型、原型链 JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清楚，更多的"很可能"是一知半解，而这部分内容又是JS的核心内容，想要技术进阶的话肯定不能对这个概念一知半解，碰到问题靠“猜”，却不理解它的规则！ # prototype # 只有函数有prototype属性 let a = {} let b = function () { } console.log(a.prototype) // undefined console.log(b.prototype) // { constructor: function(){...} } #...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/amateur/VuePress%E6%96%87%E6%A1%A3.html) # 如何搭建本文档 VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档/技术博客的需求，VuePress绝对可以成为你的备选项之一。 # VuePress特性： 为技术文档而优化的 内置 Markdown 拓展 在 Markdown 文件中使用 Vue 组件的能力 Vue 驱动的自定义主题系统 自动生成 Service Worker Google Analytics 集成 基于 Git 的 “最后更新时间”...