- 博客(106)
- 收藏
- 关注
原创 Chrome插件:统计你每日摸鱼时长,降低自己的摸鱼时间和频率
减少摸鱼的时间和频率的Chrome插件:在上班/学习期间很容易下意识的打开摸鱼网站,插件帮助我们减少摸鱼的时间和频率,提高我们上班和学习的效率,节省时间用于学习提升自己或者享受生活。
2022-01-18 09:34:13
964
1
原创 用来阻止你摸鱼,节省你的时间,提高你的工作和学习效率-我的Chrome插件
stop-mess-aroundchrome插件通过强制的手段禁止大家浪费时间摸鱼,在上班/学习期间下意识的打开摸鱼网站, 自动检测摸鱼网站, 提示激励信息后, 关闭摸鱼网站。Github地址stop-mess-around插件解决的问题: 停止下意识的摸鱼在工作、学习期间,如果事情不是太忙,或者说在学习/忙碌一小段时间之后。就会下意识的打开或者输入知乎、掘金沸点、微博等网站,开始了摸鱼时光。可能是摸鱼奶头乐太快乐了,时间很快就过去两三个小时,而忘记自己的工作、学习初衷了。事后我们通常会
2021-06-25 09:29:24
694
原创 只需三个文件教你实现命令行终端[electron实战项目学习]
前言Electron很出名,很多人可能了解过,知道它是用来开发桌面端的应用,但是一直没有在项目中实践过,缺乏练手的实践项目。很多开源的命令行终端都是使用Electron来开发的,本文将从零开始手把手的教大家用Electron写一个命令行终端。作为一个完整的实战项目示例,该终端demo也将集成到Electron开源学习项目electron-playground中,目前这个项目拥有800+ Star⭐️,它最大的特点是所见即所得的演示Electron的各种特性,帮助大家快速学习、上手Electron。.
2021-01-13 14:36:06
1580
2
原创 人生是一场马拉松-OBKoro1的2020年年终总结
前言一晃眼2020年马上就要过去了,今年感觉过的特别快。工作已经三年了,之前都没有写过年终总结,结果造成了下面这个现象:回首过去的几年,记忆已经很模糊了,需要很用力才能想起过去一部分往事。人生百年,好像也没有多少年终总结可以写呢~这么激励一下,一下子就有动力写年终总结了 ????工作在家办公年初的疫情,是2020年过不去的记忆~待到山花烂漫时,我们再相见当时疫情比较严重,全国封闭,公司很快就宣布在家办公,并且特地说明了不用担心隔离14天赶不上上班~对于当时还惶惶不安的朋友来说,着实感受
2020-12-10 14:23:03
642
1
原创 Electron桌面端所见即所得-electron特性快速学习与上手
突然让你开发Electron应用,你能hold住吗?如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑的完成Electronn的需求。为了解决上述问题,我们完成了一个项目,并把它开源了出来, 希望能够对大家学习Electron有点帮助。快速学习和上手Electron:.
2020-12-04 16:00:12
640
原创 注释工具一键添加佛祖保佑永无BUG、神兽护体等注释图案
很早之前就见过各种佛祖保佑永无BUG、神兽护体等形式的注释,感觉很有趣,蛮骚的????。然后最近有人在我开源的VSCode插件:**koroFileHeader**里面给我提issue,希望能够支持这种类型的注释。现在开发完成了,大家可以根据下面的使用方式试用一下。koroFileHeader插件简介这个插件目前维护两年多了,有1300+Star,支持所有主流语言,支持自定义语言(不支持的语言可以自行设置)。作用: 在文件开头添加注释,记录文件信息/文件的传参/出参等,让人对文件的功能一目了然。
2020-05-20 10:15:57
1758
4
原创 论如何优雅的一键填满Github的绿色格子-AutoCommit
autoCommit一个用于Git自动commit的VSCode插件,它可以用来补充之前忘记提交commit,帮助你把首页的绿色格子填满。使用效果使用本插件来控制commit次数.如下图,你甚至可以规划一下commit次数,然后画出图形, 天空才是你的极限。功能特性选择多个日期范围:一次操作即可提交不同日期commit控制每个日期的commit次数: 可以用它来控制绿色格...
2020-01-13 10:09:26
1936
原创 eslint plugin rule如何定制以及ESLint rule运行原理
这篇文章目的是介绍如何创建一个ESLint插件和创建一个ESLint rule,用以帮助我们更深入的理解ESLint的运行原理,并且在有必要时可以根据需求创建出一个完美满足自己需求的Lint规则。插件目标禁止项目中setTimeout的第二个参数是数字。PS: 如果是数字的话,很容易就成为魔鬼数字,没有人知道为什么是这个数字, 这个数字有什么含义。使用模板初始化项目:1. 安装NPM包...
2019-12-09 10:03:26
1021
原创 JS基础-前端面试继承(手写继承)、继承的优缺点
前言上篇文章详细解析了原型、原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行,希望看完本篇文章能够对继承以及相关概念理解的更为透彻。本篇文章需要先理解原型、原型链以及call的相关知识:JS基础-函数、对象和原型、原型链的关系js基础-面试官想知道你有多理解call,ap...
2019-09-23 10:12:09
1265
原创 JS基础-原型、原型链真的不能一知半解
JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠“猜”,却不理解它的规则!prototype只有函数有prototype属性let a = {}let b = function () { }console.log(a.protot...
2019-08-26 10:44:47
431
原创 前端中等算法-无重复字符的最长子串
无重复字符的最长子串难度:中等描述:给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度。样例:输入: “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。输入: “bbbbb”输出: 1解释: 因为无重复字符的最长子串是 “b”,所以其长度为 1。输入: “pwwkew”输出: 3解释: 因为无重复字符的...
2019-08-09 10:27:00
241
转载 js call/apply,bind面试官想知道什么?
函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的API,这次让我们来彻底掌握它们吧!目录call,apply,bind的基本介绍call/apply/bind的核心理念:借用方法call和apply的应用场景bind的应用场景中...
2019-08-05 10:30:53
451
原创 图片外链失效,怎么办?使用npm工具一次性下载/替换所有失效的外链图片
前言大约一个月前,微博的图片外链失效了,以及掘金因为盗链问题也于2019/06/06决定开启防盗链,造成的影响是:个人博客网站的引用了这些图片外链都不能显示。目前微博和掘金的屏蔽,在CSDN和segmentfault都是可以正常显示的,只影响个人博客。比如前段时间我的博客:http://obkoro1.com上引用的微博图片都不能显示了。因为我写博客比较频繁,被屏蔽的图片不在少数,肯定不...
2019-06-05 11:43:20
859
原创 js 普通函数和es6箭头函数的区别以及箭头函数的注意事项、不适用场景
箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深…普通函数和箭头函数的区别:箭头函数的this指向规则:1. 箭头函数没有prototype(原型),所以箭头函数本身没有thislet a = () =>{};console.log(a.prototype)...
2019-03-23 19:31:18
3086
3
原创 js sendBeacon 刷新/关闭页面之前发送请
背景:有一个任务非常耗时会消耗后台大量算力,所以在退出页面的时候,要求前端这边发送一个请求来杀死任务。一开始以为这个需求非常简单,就是在进入其他路由前,发送一下请求,杀死一下任务就好了。然而现实狠狠的打了我的脸,因为退出页面的场景不止切换路由~退出页面场景:还在本网站,跳到其他路由刷新页面/关闭页面也需要发送请求来杀死任务还在本网站,跳到其他路由这个比较简单,在Vue中可以通过...
2019-02-25 10:33:01
2039
原创 js 浏览器桌面通知npm插件 notification-koro1
H5 notification:一个浏览器桌面通知 npm 包,求 Star轻量:体积不超过 2KB安装:npm i -S notification-koro1使用:插件在vue项目中使用的示例:.vue文件1. 导入 && 初始化:初始化需要两个参数:title(通知的标题)、options(配置),具体信息查阅wiki文章和MDNimport notif...
2019-02-21 09:06:45
1568
原创 js 浏览器桌面通知notification
Notification是HTML5新增的API,用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的。实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分享给大家,希望能帮你们了解这个API。npm包:我还发了一个npm包:notification-Koro1,非常轻量简洁,觉得不错的话,点个Star吧~chrome下Notification的...
2019-02-21 09:02:23
5633
转载 var和let/const的区别
let和const是 ES6 新增的命令,用于声明变量,这两个命令跟 ES5 的var有许多不同,并且let和const也有一些细微的不同,再认真阅读了阮一峰老师的文档后,发现还是有一些不知道的细节…博客、前端积累文档、公众号、GitHub内容:var和let/const的区别块级作用域不存在变量提升暂时性死区不可重复声明let、const声明的全局变量...
2019-01-04 11:28:04
556
1
原创 浏览器重绘重排与优化-前端进阶
很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!博客、前端积累文档、公众号、GitHub网页生成过程:HTML被HTML解析器解析成DOM 树css则被css解析器解析成CSSOM 树结合DOM树和CSSOM树,生成一棵渲染树(Render T...
2018-12-24 10:43:23
725
1
原创 web 全屏模式轻松掌握[局部元素全屏展示]
我第一次对网页全屏模式有概念,是那种网页播放视频的全屏播 放的那种。感觉很强,前几个星期有个需求也是关于全屏模式的,接触之后才知道全屏模式并不神秘,是个很容易掌握的技能…博客、前端积累文档、公众号、GitHubCodePen Demo地址:演示、code进去看看,玩一下,本文将结合这个demo一起进行讲解。全屏功能封装在一个类里面:我把全屏模式封装在一个类里面,在代码中有详细的...
2018-12-03 08:28:26
1213
原创 前端er来学习一下webWorker吧
我们都知道,JavaScript 是单线程的,在同一时刻只能处理一个任务,我们会通过 setTimeout()、setInterval()、ajax 和事件处理程序等技术模拟“并行”。但都不是真正意义上的并行:Web Worker 是 HTML5 标准的一部分,这一规范定义了一套 API,它允许一段 JavaScript 程序运行在主线程之外的另外一个线程中。这在很大程度上利用了现在不断升级...
2018-11-27 13:22:20
313
原创 一份超级详细的Vue-cli3.0使用教程[赶紧来试试!]
前言在vue-cli 2.X的时候,也写过一篇类似的文章,在八月份的时候vue-cli已经更新到了3.X,新版本的脚手架,功能灰常强大,试用过后非常喜欢,写篇教程来帮助各位踩一下坑。游泳、健身了解一下:博客、前端积累文档、公众号、GitHub主要内容:零配置启动/打包一个.vue文件详细的搭建过程重点推荐:使用图形化界面创建/管理/运行项目安装:卸载旧版本:如果你事先...
2018-11-15 10:38:51
1225
原创 手摸手教你使用WebSocket[其实WebSocket也不难]
在本篇文章之前,WebSocket很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真知。游泳、健身了解一下:博客、前端积累文档、公众号、GitHubWebSocket解决了什么问题:客户端(浏览器)和服务器端进行通信,只能由客户端发起ajax请求,才能进行通信,服务...
2018-10-25 10:42:30
1430
原创 VsCode 添加文件头部注释和函数注释[koroFileHeader]
以前发过这个插件,这回版本升级了一下,修复了以前默认配置项不能删除,顺序不能移动的问题,并且新增了光标处添加函数注释的功能,也重写了一遍readme,所以再推广一下这个插件,下一步计划是支持其他语言的注释。以下是readme正文。koroFileHeader一个读取用户自定义模板,通过快捷键添加文件头部注释、在光标处添加函数注释的VsCode插件language简体中文 | E...
2018-10-17 10:31:09
18086
8
原创 VsCode读取项目文件的Eslint规则 保存时自动修复格式错误
前言:同一个项目,保持代码风格的一致,是非常重要的一个规范。但事实上项目小组成员的代码校验规则、格式化工具通常都不一致,为了避免项目到后期出现无法维护的问题,项目成员使用同一套校验规则,同一个格式化方式是相当好的步骤之一。个人博客了解一下:obkoro1.com保存时自动统一代码风格:先通过一些简单的配置,然后:Ctrl+s / command+s 时自动修复代码的格式错误自动...
2018-09-19 09:18:06
7125
原创 VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客
前言:VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目,VuePress界面十分简洁,并且非常容易上手,一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档,如果你有写技术文档的项目的话,VuePress绝对可以成为你的备选项之一。VuePress特性:为技术文档而优化的 内置 Markdown 拓展在 Markdown 文件中使用 Vu...
2018-09-10 10:23:03
9490
4
原创 前端er怎样操作剪切复制以及禁止复制+破解等
前言有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。 个人博客了解一下:obk...
2018-08-09 11:32:12
751
原创 Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢… 个人博客了解一下:obkoro1.comVue-Router导航守卫:有的时候,我们需要通过路由来进...
2018-07-23 11:02:09
869
原创 JS高程中的垃圾回收机制与常见内存泄露的解决方法
前言起因是因为想了解闭包的内存泄露机制,然后想起《js高级程序设计》中有关于垃圾回收机制的解析,之前没有很懂,过一年回头再看就懂了,写篇博客与大家分享一下。如果喜欢的话可以点波赞/关注,支持一下。 个人博客了解一下:obkoro1.com内存的生命周期:分配你所需要的内存:由于字符串、对象等没有固定的大小,js程序在每次创建字符串、对象的时候,程序都会...
2018-07-09 10:08:07
605
1
原创 你不知道的js中关于this绑定机制的解析[看完还不懂算我输]
前言最近正在看《你不知道的JavaScript》,里面关于this绑定机制的部分讲的特别好,很清晰,这部分对我们js的使用也是相当关键的,并且这也是一个面试的高频考点,所以整理一篇文章分享一下这部分的内容,相信看本文的解析,你一定会有所收获的,如果喜欢的话可以点波赞/关注,支持一下。 个人博客了解一下:obkoro1.com为什么要用this:function...
2018-07-02 09:05:07
357
1
原创 160行代码仿Vue实现极简双向绑定[详细注释]
前言现在的前端面试不管你用的什么框架,总会问你这个框架的双向绑定机制,有的甚至要求你现场实现一个双向绑定出来,那对于没有好好研究过这方面知识的同学来说,当然是很难的,接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。本文是在面试题:你能写一个Vue的双向数据绑定吗?的基础上仔细研究+改动,并添加了详细注释,...
2018-06-25 09:08:47
673
原创 JS忍者秘籍中的定时器机制详解
前言前段时间刚看完《JS忍者秘籍》,虽说是15年出版的,有些东西是过时了,但像对原型链、闭包、正则、定时器之类的机制却是不会过时的,里面很多东西都讲的很细,还是值得一读的,本文将对这本书中对定时器机制的部分进行详细的解析,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com准备阅读本文之前,推荐先阅读...
2018-06-22 09:40:25
457
原创 Js 的事件循环(Event Loop)机制以及实例讲解
前言大家都知道js是单线程的脚本语言,在同一时间,只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应运而生… 个人博客了解一下:obkoro1.com为什么js是单线程?js作为主要运行在浏览器的脚本语言,js主要用途之一是操作DOM。在js高程中举过一个栗子,如果js同时有两个线程,同时对同...
2018-06-19 09:02:46
819
原创 浅析HTTP缓存的机制-浏览器缓存
前言在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰,每个人都知道进入一次网页之后再刷新一次页面,加载速度会比首次加载快非常多,每个人都知道这是浏览器缓存的magic,但是对此背后的原因可能不甚了解… 个人博客了解一下:obkoro1.com当我们在谈论HTTP缓存时我们在谈论什么:我们实际上是在谈论下面这两种情况:如上图,浏览器对静...
2018-06-11 09:18:22
918
原创 你或许不知道Vue的这些小技巧
前言用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obko...
2018-06-04 08:31:54
1113
原创 【干货】js 数组详细操作方法及解析合集
前言在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com...
2018-05-31 10:24:49
478
原创 你对CSS权重真的足够了解吗?
前言css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com权重规则总结:...
2018-05-21 09:05:04
442
原创 koroFileHeader 非常实用的Vscode 插件[用于添加文件头部注释]
前言本来之前也安装过一个头部文件注释的插件:vscode-fileheader,由于插件的注释模板都是定死的,想要自己定制一些模板注释也不行,实在用的不舒服,然后自己去研究了一番,参考vscode-fileheader插件的一些内容,开发了这个插件。koroFileHeader在 VsCode 中通过快捷键ctrl+alt+i在文件头部添加注释。languageEngl...
2018-05-18 09:56:45
9869
9
原创 关于input的一些问题解决方法分享
前言input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com本文内容包括:移动端底部input被弹出的键盘遮挡。控制...
2018-05-14 09:27:48
995
原创 如何判断用户浏览器以及一些前端常用的正则表单验证
前言在我们做用户授权登录(微信,qq授权),以及根据对应浏览器做对应的操作的时候,经常会遇到需要判断用户使用的浏览器的需求,以及在需要用户输入信息的时候,有需要验证的一些正则。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com判断用户浏览器navigator.userAgent判断用户所使用的浏览器...
2018-05-07 09:15:16
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人