OBKoro1_社区达人页

2022年06月

• 06.24 17:00:18
  发表了文章 2022-06-24 17:00:18

  命令行终端是怎么做的？教你写一个命令行终端[electron实战]

  前言 Electron很出名，很多人可能了解过，知道它是用来开发桌面端的应用，但是一直没有在项目中实践过，缺乏练手的实践项目。 很多开源的命令行终端都是使用Electron来开发的，本文将从零开始手把手的教大家用Electron写一个命令行终端。 作为一个完整的实战项目示例，该终端demo也将集成到Electron开源学习项目electron-playground中，目前这个项目拥有800+ Star⭐️，它最大的特点是所见即所得的演示Electron的各种特性，帮助大家快速学习、上手Electron。 大家跟着本文一起来试试Electron吧~ 下载试玩 本文命令行终端demo的代码量很少，

  
• 06.24 16:56:43
  发表了文章 2022-06-24 16:56:43

  Electron桌面端所见即所得-Electron练习生

  突然让你开发Electron应用，你能hold住吗？ 如果领导突然说需要开发一款前端桌面端应用，那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 如果突然让我们去开发Electron应用，很多人都会陷入迷茫和懵逼的状态。然后在依靠网上相对较少的资料，慢慢摸索、一路踩坑的完成Electronn的需求。 为了解决上述问题，我们完成了一个项目，并把它开源了出来, 希望能够对大家学习Electron有点帮助。 快速学习和上手Electron: electron-playground electron-playground是我司(好

  
• 06.24 16:53:58
  发表了文章 2022-06-24 16:53:58

  骚注释一键添加佛祖保佑永无BUG、神兽护体等注释图形的VSCode插件

  很早之前就见过各种佛祖保佑永无BUG、神兽护体等形式的注释，感觉很有趣，蛮骚的😉。 然后最近有人在我开源的VSCode插件：**koroFileHeader**里面给我提issue，希望能够支持这种类型的注释。 现在开发完成了，大家可以根据下面的使用方式试用一下。 koroFileHeader插件简介 这个插件目前维护两年多了，有1300+Star，支持所有主流语言，支持自定义语言(不支持的语言可以自行设置)。 作用: 在文件开头添加注释，记录文件信息/文件的传参/出参等，让人对文件的功能一目了然。 如果觉得还不错的话，就给我点个Star⭐️吧~ 插件示例:

  
• 06.24 16:51:49
  发表了文章 2022-06-24 16:51:49

  VsCode插件一键刷Github的commit记录-AutoCommit

  autoCommit 用于刷commit记录，可以刷过去几年的commit以及未来的commit, 一键帮你把github首页的绿色格子填满。 它是一个VScode插件可以自由控制commit日期(提交过去几年的commit以及未来的commit) 它可以自由控制commit次数, 固定或者随机commit次数。 插件提供完善的日志: 清晰的了解插件的运行情况 使用效果 使用本插件来控制commit次数. 如下图，你甚至可以规划一下commit次数，然后画出图形, 天空才是你的极限。 自动commit演示： 功能特性 一键提交: 设置好参数之后，一键超快提交commit 选择

  
• 06.24 16:50:27
  发表了文章 2022-06-24 16:50:27

  手摸手教你写个ESLint 插件以及了解ESLint的运行原理

  这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule，用以帮助我们更深入的理解ESLint的运行原理，并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则。 插件目标 禁止项目中setTimeout的第二个参数是数字。 PS： 如果是数字的话，很容易就成为魔鬼数字，没有人知道为什么是这个数字, 这个数字有什么含义。 使用模板初始化项目： 1. 安装NPM包 ESLint官方为了方便开发者开发插件，提供了使用Yeoman模板(generator-eslint)。 对于Yeoman我们只需知道它是一个脚手架工具，用于生成包含指定框架结构的工程化目录结构。 n

  
• 06.24 16:47:22
  发表了文章 2022-06-24 16:47:22

  JS基础-完美掌握继承知识点

  前言 上篇文章详细解析了原型、原型链的相关知识点，这篇文章讲的是和原型链有密切关联的继承，它是前端基础中很重要的一个知识点，它对于代码复用来说非常有用，本篇将详细解析JS中的各种继承方式和优缺点进行，希望看完本篇文章能够对继承以及相关概念理解的更为透彻。 本篇文章需要先理解原型、原型链以及call 的相关知识： JS基础-函数、对象和原型、原型链的关系 js基础-面试官想知道你有多理解call,apply,bind？ 何为继承？ 维基百科：继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。 继承是一个类从另一个类获取方法和属性的过程。 PS：或者是多个类 JS实现继承

  
• 06.24 16:43:51
  发表了文章 2022-06-24 16:43:51

  JS基础-函数、对象和原型、原型链的关系

  JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清楚，更多的"很可能"是一知半解，而这部分内容又是JS的核心内容，想要技术进阶的话肯定不能对这个概念一知半解，碰到问题靠“猜”，却不理解它的规则！ prototype 只有函数有prototype属性 let a = {} let b = function () { } console.log(a.prototype) // undefined console.log(b.prototype) // { constructor: function(){...} } Object.prototype怎么解释？

  
• 06.24 16:41:56
  发表了文章 2022-06-24 16:41:56

  js基础-面试官想知道你有多理解call,apply,bind？[不看后悔系列]

  函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this 关键字密切相关，相当一部分人对它们的理解还是比较浅显，所谓js基础扎实，绕不开这些基础常用的API，这次让我们来彻底掌握它们吧！ 目录 call,apply,bind的基本介绍 call/apply/bind的核心理念：借用方法 call和apply的应用场景 bind的应用场景 中高级面试题：手写call/apply、bind call,apply,bind的基本介绍 语法： fun.call(thisArg, param1, param2, ...) fun.apply(

  
• 06.24 16:38:08
  发表了文章 2022-06-24 16:38:08

  掘金外链即将失效？论如何用脚本一次性下载/替换失效的外链图片

  前言 大约一个月前，微博的图片外链失效了，以及掘金因为盗链问题也于2019/06/06决定开启防盗链，造成的影响是：个人博客网站的引用了这些图片外链都不能显示。 目前微博和掘金的屏蔽，在CSDN和segmentfault都是可以正常显示的，只影响个人博客。 比如前段时间我的博客:obkoro1.com上引用的微博图片都不能显示了。 因为我写博客比较频繁，被屏蔽的图片不在少数，肯定不能一个个手动的替换，查了一番没有找到现成的解决方案，做了个脚本工具，并且写了文档把它开源出来了。 markdown-img-down-site-change(下载/替换markdown中的图片)

  
• 06.24 16:36:39
  发表了文章 2022-06-24 16:36:39

  JS 调用栈机制与 ES6 尾调用优化介绍

  调用栈的英文名叫做Call Stack，大家或多或少是有听过的，但是对于js调用栈的工作方式以及如何在工作中利用这一特性，大部分人可能没有进行过更深入的研究，这块内容可以说对我们前端来说就是所谓的基础知识，咋一看好像用处并没有很大，但掌握好这个知识点，就可以让我们在以后可以走的更远，走的更快！ 目录 数据结构：栈 调用栈是什么？用来做什么？ 调用栈的运行机制 调用栈优化内存 调用栈debug大法 数据结构：栈 栈是一种遵从后进先出(LIFO)原则的有序集合，新元素都靠近栈顶，旧元素都接近栈底。 生活中的栗子，帮助一下理解：

  
• 06.24 16:33:30
  发表了文章 2022-06-24 16:33:30

  详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

  箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API，大部分同学却对它的了解程度还是不够深... 普通函数和箭头函数的区别： 箭头函数的this指向规则： 1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined 2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。 下面栗子中在一个函数中定义箭头函数，然后在另一个函数中执行箭头函数。 let a, barO
• 06.24 16:31:52
  发表了文章 2022-06-24 16:31:52

  Web Beacon 刷新/关闭页面之前发送请求

  背景： 有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。 一开始以为这个需求非常简单，就是在进入其他路由前，发送一下请求，杀死一下任务就好了。 然而现实狠狠的打了我的脸，因为退出页面的场景不止切换路由~ 退出页面场景： 还在本网站，跳到其他路由 刷新页面/关闭页面也需要发送请求来杀死任务 还在本网站，跳到其他路由 这个比较简单，在Vue中可以通过路由离开的钩子beforeRouteLeave来实现： beforeRouteLeave(to, from, next) { if (任务运行中) { // 发送请求

  
• 06.24 16:30:09
  发表了文章 2022-06-24 16:30:09

  H5 notification浏览器桌面通知

  Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知道如何实现的。实际去查一下发现并不复杂，且可以说比较简单，故写篇博客分享给大家,希望能帮你们了解这个API。 npm包： 我还发了一个npm包:notification-Koro1，非常轻量简洁，觉得不错的话，点个Star吧~ chrome下Notification的表现： 以谷歌为例，一开始需要用户允许通知：

  
• 06.24 16:27:46
  发表了文章 2022-06-24 16:27:46

  var和let/const的区别

  内容： var和let/const的区别 块级作用域 不存在变量提升 暂时性死区 不可重复声明 let、const声明的全局变量不会挂在顶层对象下面 const命令两个注意点: const 声明之后必须马上赋值，否则会报错 const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。 为什么需要块级作用域? ES5只有全局作用域和函数作用域，没有块级作用域。 这带来很多不合理的场景: 内层变量可能覆盖外层变量 用来计数的循环变量泄露为全局变量

  
• 06.24 16:26:01
  发表了文章 2022-06-24 16:26:01

  浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]

  网页生成过程： HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree) 生成布局（flow），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。 网上找了一张图片，我加了注释会更直观一些： 渲染： 网页生成的时候，至少会渲染一次。 在用户访问的过程中，还会不断重新渲染 重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。 重排比重绘大： 大，在这个语境里的意思

  
• 06.24 16:23:38
  发表了文章 2022-06-24 16:23:38

  Web全屏模式轻松掌握[局部元素全屏展示]

  全屏功能封装在一个类里面： 我把全屏模式封装在一个类里面，在代码中有详细的注释，如果有需要的话，直接把类拿出来，根据栗子和注释使用即可。 代码在codepen的demo里。 何谓全屏？ MDN介绍： 使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。 chrome下的全屏表现： 全屏会隐藏标签栏,书签栏 如果网页一开始不是全部撑开的形式，全屏下，也会将要全屏的元素充满整个屏幕 可以多层全屏，如栗子中一样，可以先左边全屏，然后红色全屏。

  
• 06.24 15:27:59
  发表了文章 2022-06-24 15:27:59

  前端er来学习一下webWorker吧

  webWorker 是什么[webWorker 快速上手] 我们都知道，JavaScript 是单线程的，在同一时刻只能处理一个任务，我们会通过 setTimeout()、setInterval()、ajax 和事件处理程序等技术模拟“并行”。但都不是真正意义上的并行: Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，它允许一段 JavaScript 程序运行在主线程之外的另外一个线程中。 这在很大程度上利用了现在不断升级的电脑计算能力：能够在同一时间平行处理两个任务。
• 06.24 15:26:15
  发表了文章 2022-06-24 15:26:15

  一份超级详细的Vue-cli3.0使用教程[赶紧来试试！]

  前言 在vue-cli 2.X的时候，也写过一篇类似的文章，在八月份的时候vue-cli已经更新到了3.X，新版本的脚手架，功能灰常强大，试用过后非常喜欢，写篇教程来帮助各位踩一下坑。 主要内容： 零配置启动/打包一个.vue文件 详细的搭建过程 重点推荐：使用图形化界面创建/管理/运行项目 安装： 卸载旧版本： 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g

  
• 06.24 15:13:54
  发表了文章 2022-06-24 15:13:54

  手摸手教你使用WebSocket[其实WebSocket也不难]

  前言 在本篇文章之前，WebSocket很多人听说过，没见过，没用过，以为是个很高大上的技术，实际上这个技术并不神秘，可以说是个很容易就能掌握的技术，希望在看完本文之后，马上把文中的栗子拿出来自己试一试，实践出真知。 WebSocket解决了什么问题： 客户端(浏览器)和服务器端进行通信，只能由客户端发起ajax请求，才能进行通信，服务器端无法主动向客户端推送信息。 当出现类似体育赛事、聊天室、实时位置之类的场景时，客户端要获取服务器端的变化，就只能通过轮询(定时请求)来了解服务器端有没有新的信息变化。
• 06.24 15:11:52
  发表了文章 2022-06-24 15:11:52

  VsCode 添加文件头部注释和函数注释[koroFileHeader]

  koroFileHeader 在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,灵活方便，文档齐全，食用简单！觉得插件不错的话，就给个Star⭐️吧~ 文件头部添加注释: 在文件开头添加注释，记录文件信息/文件的传参/出参等 支持用户高度自定义注释选项, 适配各种需求和注释。 保存文件的时候，自动更新最后的编辑时间和编辑人 快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i

  
• 06.22 17:06:07
  发表了文章 2022-06-22 17:06:07

  VsCode读取项目文件的Eslint规则 保存时自动修复格式错误

  前言： 同一个项目，保持代码风格的一致，是非常重要的一个规范。但事实上项目小组成员的代码校验规则、格式化工具通常都不一致，为了避免项目到后期出现无法维护的问题，项目成员使用同一套校验规则，同一个格式化方式是相当好的步骤之一。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub 保存时自动统一代码风格： 先通过一些简单的配置，然后： Ctrl+s / command+s 时自动修复代码的格式错误 自动修复的规则是读取项目根目录的Eslint规则 这样就能保证项目成员都是一套验证规则的代码风格 配置： 1.安装VsCode的EsLint和vetur插件 如图安装EsLint插件

  
• 06.22 17:03:14
  发表了文章 2022-06-22 17:03:14

  VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客

  VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的需求，VuePress绝对可以成为你的备选项之一。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub VuePress特性： 为技术文档而优化的 内置 Markdown 拓展 在 Markdown 文件中使用 Vue 组件的能力 Vue 驱动的自定义主题系统 自动生成 Service Worker Google Analytics 集成 基于 Git 的 “最后

  
• 06.22 16:59:10
  发表了文章 2022-06-22 16:59:10

  前端er怎样操作剪切复制以及禁止复制+破解等

  前言 有时候我们经常会碰到这些场景：玩掘金、知乎的时候复制一段文字，总是会在内容后面加上一些版权信息，以及像小说网站等都有禁止选中，禁止复制这种功能，还有点击自动复制账号的功能。 我也经常遇到这些场景，有时候会去想这后面到底是怎么做，周末趁着有空去研究了一下，然后发现这些都跟操作剪贴板有关系，并且都不难，了解一下基本都知道怎么做了，整理分享一波给大家。 个人博客了解一下：obkoro1.com 目录： API介绍 实现类知乎/掘金复制大段文本添加版权信息 实现类起点网的防复制功能 破解防复制 点击复制功能 API介绍: 复制、剪切、粘贴事件： copy 发生复制操作时触发;

  
• 06.22 16:57:25
  发表了文章 2022-06-22 16:57:25

  Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

  前言 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢... 前端进阶积累、公众号、GitHub Vue-Router导航守卫： 有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。 为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档

  
• 06.22 16:53:31
  发表了文章 2022-06-22 16:53:31

  JS高程中的垃圾回收机制与常见内存泄露的解决方法

  前言 起因是因为想了解闭包的内存泄露机制，然后想起《js高级程序设计》中有关于垃圾回收机制的解析，之前没有很懂，过一年回头再看就懂了，写篇博客与大家分享一下。如果喜欢的话可以点波赞/关注，支持一下。 个人博客了解一下：obkoro1.com 内存的生命周期： 分配你所需要的内存： 由于字符串、对象等没有固定的大小，js程序在每次创建字符串、对象的时候，程序都会分配内存来存储那个实体。 使用分配到的内存做点什么。 不需要时将其释放回归： 在不需要字符串、对象的时候，需要释放其所占用的内存，否则将会消耗完系统中所有可用的内存，造成系统崩溃，这就是垃圾回收机制所存在的意义。

  
• 06.22 16:51:47
  发表了文章 2022-06-22 16:51:47

  你不知道的js中关于this绑定机制的解析[看完还不懂算我输]

  前言 最近正在看《你不知道的JavaScript》，里面关于this绑定机制的部分讲的特别好，很清晰，这部分对我们js的使用也是相当关键的，并且这也是一个面试的高频考点，所以整理一篇文章分享一下这部分的内容，相信看本文的解析，你一定会有所收获的，如果喜欢的话可以点波赞/关注，支持一下。 游泳、健身了解一下：博客、前端积累文档、公众号、GitHub 为什么要用this： function identify() { console.log("Hello,I'm " + this.name); } let me = { name: "Kyle" }; let you = { nam

  
• 06.22 16:50:11
  发表了文章 2022-06-22 16:50:11

  160行代码仿Vue实现极简双向绑定[详细注释]

  前言 现在的前端面试不管你用的什么框架，总会问你这个框架的双向绑定机制，有的甚至要求你现场实现一个双向绑定出来，那对于没有好好研究过这方面知识的同学来说，当然是很难的，接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 本文是在面试题：你能写一个Vue的双向数据绑定吗？的基础上仔细研究+改动，并添加了详细注释，而成的。 个人博客了解一下：obkoro1.com 效果GIF：

  
• 06.22 16:48:00
  发表了文章 2022-06-22 16:48:00

  JS忍者秘籍中的定时器机制详解

  前言 前段时间刚看完《JS忍者秘籍》，虽说是15年出版的，有些东西是过时了，但像对原型链、闭包、正则、定时器之类的机制却是不会过时的，里面很多东西都讲的很细，还是值得一读的，本文将对这本书中对定时器机制的部分进行详细的解析，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 个人博客了解一下：obkoro1.com 准备 阅读本文之前，推荐先阅读Js 的事件循环(Event Loop)机制以及实例讲解这篇文章来理解背后发生的事情，本文对事件循环机制不会很仔细的讲解。 定时器解决的问题： 由于JS的单线程特性，定时器提供了一种跳出单线程限制的方法。

  
• 06.22 16:46:22
  发表了文章 2022-06-22 16:46:22

  Js 的事件循环(Event Loop)机制以及实例讲解

  前言 大家都知道js是单线程的脚本语言，在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，Event Loop方案应运而生... 个人博客了解一下：obkoro1.com 为什么js是单线程？ js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。 在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？ 为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。

  
• 06.22 16:44:39
  发表了文章 2022-06-22 16:44:39

  当我们在谈论HTTP缓存时我们在谈论什么

  在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰，每个人都知道进入一次网页之后再刷新一次页面，加载速度会比首次加载快非常多，每个人都知道这是浏览器缓存的magic，但是对此背后的原因可能不甚了解... 当我们在谈论HTTP缓存时我们在谈论什么: 我们实际上是在谈论下面这两种情况: 缓存流程： 浏览器第一次请求资源时： 浏览器第一次请求资源时，必须下载所有的资源，然后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也可能是弱缓存 浏览器后续请求资源时的匹配流程：

  
• 06.22 15:47:56
  发表了文章 2022-06-22 15:47:56

  你或许不知道Vue的这些小技巧

  前言 用Vue开发一个网页并不难，但是也经常会遇到一些问题，其实大部分的问题都在文档中有所提及，再不然我们通过谷歌也能成功搜索到问题的答案，为了帮助小伙伴们提前踩坑，在遇到问题的时候，心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧，结合查阅资料整理成的一篇文章，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 前端进阶积累、公众号、GitHub 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列表渲染相关 深度watch与watch立即触发回调 这些情况下不要使用箭头函数

  
• 06.22 15:43:20
  发表了文章 2022-06-22 15:43:20

  【干货】js 数组详细操作方法及解析合集

  前言 在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，很多时候就算用过几次这个api，在开发中也很容易忘记，还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结，在这背景下，就有了本篇文章，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 前端进阶积累、公众号、GitHub 本文篇幅较长，建议点赞保存再看，也便于日后翻阅。 创建一个数组: // 字面量方式: // 这个方法也是我们最常用的，在初始化数组的时候 相当方便 var a = [3, 11, 8]; // [3

  
• 06.22 15:40:26
  发表了文章 2022-06-22 15:40:26

  你对CSS权重真的足够了解吗？

  前言 css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理解css权重，就十分关键了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 个人博客了解一下：obkoro1.com 权重规则总结: !important 优先级最高，但也会被权重高的important所覆盖 行内样式总会覆盖外部样式表的任何样式(除了!important) 单独使用一个选择器的时候，不能跨等级使css规则生效 如果两个权重不同的选

  
• 06.22 15:38:53
  发表了文章 2022-06-22 15:38:53

  koroFileHeader 非常实用的Vscode 插件[用于添加文件头部注释]

  koroFileHeader 一个读取用户自定义模板，通过快捷键添加文件头部注释、在光标处添加函数注释的VsCode插件 language 简体中文 | English 一些文档 支持语言 插件设置/配置 更新日志 常见问题 简介 文件头部添加注释: 在文件开头添加注释，记录文件信息 支持用户高度自定义注释选项 保存文件的时候，自动更新最后的编辑时间和编辑人 快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i 在光标处添加函数注释: 在光标处自动生成一个注释模板，下方有栗子 支持用户高度自定义注释选项 快捷键：window：ctrl+alt+t,mac：

  
• 06.22 15:34:47
  发表了文章 2022-06-22 15:34:47

  关于input的一些问题解决方法分享

  前言 input是我们接受来自用户的数据常用标签，在前端开发中，相信每个人都会用到这个标签，所以在开发过程中也时候也会遇到一些问题，本文的内容是我在跟input相爱相杀过程中产生的，在此记录分享一下。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 个人博客了解一下：obkoro1.com 本文内容包括： 移动端底部input被弹出的键盘遮挡。 控制input显/隐密码。 在input中输入emoji表情导致请求失败。 input多行输入显示换行。 输入框首尾清除空格-trim() 在input中监听键盘事件

  
• 06.22 15:31:24
  发表了文章 2022-06-22 15:31:24

  如何判断用户浏览器以及一些前端常用的正则表单验证

  前言 在我们做用户授权登录(微信,qq授权)，以及根据对应浏览器做对应的操作的时候，经常会遇到需要判断用户使用的浏览器的需求，以及在需要用户输入信息的时候，有需要验证的一些正则。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 个人博客了解一下：obkoro1.com 判断用户浏览器 navigator.userAgent 判断用户所使用的浏览器主要用到的api是navigator.userAgent，这是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值，不同浏览器的userAgent值都不相同，所以我们可以根据这个字符串来判断用户是从哪个浏览器进

  
• 06.22 15:29:50
  发表了文章 2022-06-22 15:29:50

  前端将数据转化为弹幕效果的实现方式

  前言 这个需求如题，大体上是将文章的评论数据，在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候，花了挺多精力的，踩了很多坑，现将弹幕的实现思路写出来，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 实现原理： 实现弹幕的原理，并不算太复杂，耗费一些时间，怼一怼应该都可以做出来。 获取弹幕数据。 将弹幕设置为四个通道，每个通道最多只能出现两条弹幕。 使用setInterval动态设置dom的left属性。 使用dom的offsetWidth和屏幕的宽度判断元素是否滚动超出屏幕，然后移除dom。

  
• 06.22 15:27:29
  发表了文章 2022-06-22 15:27:29

  论如何用Vue实现一个弹窗-一个简单的组件实现

  最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。 本文主要内容会涉及到弹窗遮罩的实现，slot插槽的使用方式，props、$emit传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

  
• 06.22 15:24:27
  发表了文章 2022-06-22 15:24:27

  前端笔试题面试题记录（下）

  接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。 本文主要目录如下： 面试题QA 面试遇到的一些小问题 Vue系列问题

  
• 06.22 15:21:45
  发表了文章 2022-06-22 15:21:45

  前端笔试题面试题记录（上）

  过完元宵，就到上海找了波工作，现在已经入职好了，蹭波热点，写一波面试记录，内容包含笔试题和面试题，还有一些没有写进来，准备再开一篇，许久没写了，写的确实有些慢。如果喜欢的话可以点波赞，或者关注一下，希望大家看完本文可以有所收获。 前端进阶积累、公众号、GitHub 后续 前端笔试题面试题记录（下） Q：什么情况下会碰到跨域问题？有哪些解决方法？ 跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。 script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、

  
• 06.22 15:08:26
  发表了文章 2022-06-22 15:08:26

  Vue 实践过程中的几个问题

  前言 本篇是我在使用vue过程中，遇到的几个小问题和之前不了解的东西，记录下来，希望能够帮助各位踩坑。如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家。 本文首发于我的个人blog：obkoro1.com 本篇记录个人遇到的问题如下: 路由变化页面数据不刷新问题 setTimeout/setInterval this指向改变，无法用this访问VUe实例 setInterval路由跳转继续运行并没有销毁 vue 滚动行为(浏览器回退记忆位置)用法 vue路由拦截浏览器后退实现草稿保存类似需求 v-once 只渲染元素和组件一次，优化更新渲染性能 vue框架风格指南推荐 路由变

  
• 06.22 15:06:31
  发表了文章 2022-06-22 15:06:31

  【读书笔记】《高性能JavaScript》

  缺陷 这本书是2010年出版的，这本书谈性能是有时效性的，现在马上就2018年了，这几年前端发展的速度是飞快的，书里面还有一些内容考虑IE6、7、8的东西，殊不知现在这些都已经不再考虑了，所以不可避免的有一些知识是比较老的。有些解决方法现在已经不是最好的解决方式，比如工具那一章。 前言 总的来说，这本书整体给出的性能优化建议，以及作者耐心的实践，对我们开发优化的启发和帮助还是很大的，因为它里边的很多知识，都是作者通过实践总结出来的，都是经验的积累，这在一般的教科书上是学不到的。特别是对于js基础比较差一点的，里面有很多知识点尽管在现在还是非常有必要的。 下面我就将各章节的一些重要的知识点总结写

  
• 06.22 15:04:34
  发表了文章 2022-06-22 15:04:34

  js 简单的推箱子小游戏步骤解析--大家都玩过的

  推箱子小游戏大家肯定都玩过，之所以写这篇文章，是觉得这个小游戏足够简单好理解，大家看完文章之后，自己也能花上半天功夫敲出一个推箱子小游戏来，如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家。 本文首发于我的个人blog：obkoro1.com demo：推箱子小游戏 步骤解析： 本文代码已经放在了github上面了,里面也进行了很详细的代码注释，可以copy下来，在本地运行一下看看。

  
• 06.22 15:02:06
  发表了文章 2022-06-22 15:02:06

  vue-router先hash模式部署项目，然后开启histroy模式 ，引发的几个问题以及histroy模式的开启方式、优点

  前言： vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的，很多人在刚使用路由的时候之前不知道这个模式，所以并没有启用，然后就把项目部署上去了，因为这个模式还是有挺多优点的，最后还是会开启这个模式。 然而因为之前使用hash模式再改为histroy模式还是有些问题的，我已经踩过坑了，然后把这几个问题写出来。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 开启history模式： 如果不开启的话，路由默认是hash模式，开启这个模式前端的工作也很简单，如下：

  
• 06.22 14:54:48
  发表了文章 2022-06-22 14:54:48

  vue 项目如何引入微信sdk，使用微信分享接口

  写在前面： 做微信的网页基本上都要接入微信的sdk，我在做的时候，也颇费了一番功夫，然后就想记录一下，供自己日后翻阅，以及让有需要的朋友可以做一下参考，如果喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 安装sdk npm install weixin-js-sdk --save 开始之前大家可以先读一读微信公众号的 接入文档，vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，所以就需要在每个路由地址都引入一遍。 整体步骤： vue引入sdk的话，就是在路由组件

  
• 06.22 14:51:51
  发表了文章 2022-06-22 14:51:51

  手摸手教你在vue-cli里面使用vuex，以及vuex简介

  写在前面： 这篇文章是在vue-cli里面使用vuex的一个极简demo，附带一些vuex的简单介绍。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 引入步骤 我创建了一个新的vue-cli里面什么东西都没有，只引用了vuex，这里是码云地址,可以下载下来，然后npm install、npm run dev试试看，里面vuex的使用地方也全都注释了一遍。 安装 npm install vuex --save

  
• 06.22 14:49:17
  发表了文章 2022-06-22 14:49:17

  cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

  写在前面：前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要用到本地存储的技术，前端本地存储的方式有三种，分别是cookie，localstorage和sessionStorage ，这是大家都知道的。本文的主要内容就是针对这三者的存放、获取，区别、应用场景。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com 使用方式：很多文档都是说了一大堆，后面用法都没有说，先要学会怎么用，不然后面的都是扯淡，所以这里我先把使用方式弄出来。 cookie:保存cookie值： var dataCooki

  
• 06.22 14:46:53
  发表了文章 2022-06-22 14:46:53

  vue router 如何使用params query传参，以及有什么区别

  写在前面：传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 本文首发于我的个人blog：obkoro1.com Vue router如何传参params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。