OBKoro1_社区达人页

个人头像照片
OBKoro1
已加入开发者社区701

勋章 更多

个人头像照片
专家博主
专家博主
个人头像照片
星级博主
星级博主
个人头像照片
技术博主
技术博主
个人头像照片
初入江湖
初入江湖

成就

已发布84篇文章
1条评论
已回答0个问题
0条评论
已发布0个视频
github地址

我关注的人 更多

技术能力

兴趣领域
擅长领域
技术认证

暂时未有相关云产品技术能力~

前端领域五年工作经验, csdn/掘金等平台优质作者, 效率工具爱好者,开源工具作者: koroFileHeader VSCode头部和函数注释插件 32w用户 3.8k star stop-mess-around 浏览器节省时间防摸鱼插件 自律插件,1k用户 200star 等等其他工具

暂无精选文章
暂无更多信息

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。
  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

    H5 notification浏览器桌面通知

  • 发表了文章 2022-06-24

    var和let/const的区别

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

    前端er来学习一下webWorker吧

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

  • 发表了文章 2022-06-24

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

正在加载, 请稍后...
滑动查看更多
正在加载, 请稍后...
暂无更多信息
正在加载, 请稍后...
暂无更多信息