![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js踩坑
文章平均质量分 88
OBKoro1
博客、前端算法、开箱即用代码块:http://obkoro1.com/web_accumulate/
展开
-
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 · 432 阅读 · 0 评论 -
Js 的事件循环(Event Loop)机制以及实例讲解
前言大家都知道js是单线程的脚本语言,在同一时间,只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应运而生… 个人博客了解一下:obkoro1.com为什么js是单线程?js作为主要运行在浏览器的脚本语言,js主要用途之一是操作DOM。在js高程中举过一个栗子,如果js同时有两个线程,同时对同...原创 2018-06-19 09:02:46 · 795 阅读 · 0 评论 -
浅析HTTP缓存的机制-浏览器缓存
前言在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰,每个人都知道进入一次网页之后再刷新一次页面,加载速度会比首次加载快非常多,每个人都知道这是浏览器缓存的magic,但是对此背后的原因可能不甚了解… 个人博客了解一下:obkoro1.com当我们在谈论HTTP缓存时我们在谈论什么:我们实际上是在谈论下面这两种情况:如上图,浏览器对静...原创 2018-06-11 09:18:22 · 894 阅读 · 0 评论 -
160行代码仿Vue实现极简双向绑定[详细注释]
前言现在的前端面试不管你用的什么框架,总会问你这个框架的双向绑定机制,有的甚至要求你现场实现一个双向绑定出来,那对于没有好好研究过这方面知识的同学来说,当然是很难的,接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。本文是在面试题:你能写一个Vue的双向数据绑定吗?的基础上仔细研究+改动,并添加了详细注释,...原创 2018-06-25 09:08:47 · 658 阅读 · 0 评论 -
JS忍者秘籍中的定时器机制详解
前言前段时间刚看完《JS忍者秘籍》,虽说是15年出版的,有些东西是过时了,但像对原型链、闭包、正则、定时器之类的机制却是不会过时的,里面很多东西都讲的很细,还是值得一读的,本文将对这本书中对定时器机制的部分进行详细的解析,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com准备阅读本文之前,推荐先阅读...原创 2018-06-22 09:40:25 · 435 阅读 · 0 评论 -
【干货】js 数组详细操作方法及解析合集
前言在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com...原创 2018-05-31 10:24:49 · 461 阅读 · 0 评论 -
你不知道的js中关于this绑定机制的解析[看完还不懂算我输]
前言最近正在看《你不知道的JavaScript》,里面关于this绑定机制的部分讲的特别好,很清晰,这部分对我们js的使用也是相当关键的,并且这也是一个面试的高频考点,所以整理一篇文章分享一下这部分的内容,相信看本文的解析,你一定会有所收获的,如果喜欢的话可以点波赞/关注,支持一下。 个人博客了解一下:obkoro1.com为什么要用this:function...原创 2018-07-02 09:05:07 · 341 阅读 · 1 评论 -
JS高程中的垃圾回收机制与常见内存泄露的解决方法
前言起因是因为想了解闭包的内存泄露机制,然后想起《js高级程序设计》中有关于垃圾回收机制的解析,之前没有很懂,过一年回头再看就懂了,写篇博客与大家分享一下。如果喜欢的话可以点波赞/关注,支持一下。 个人博客了解一下:obkoro1.com内存的生命周期:分配你所需要的内存:由于字符串、对象等没有固定的大小,js程序在每次创建字符串、对象的时候,程序都会...原创 2018-07-09 10:08:07 · 587 阅读 · 1 评论 -
js 普通函数和es6箭头函数的区别以及箭头函数的注意事项、不适用场景
箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深…普通函数和箭头函数的区别:箭头函数的this指向规则:1. 箭头函数没有prototype(原型),所以箭头函数本身没有thislet a = () =>{};console.log(a.prototype)...原创 2019-03-23 19:31:18 · 3070 阅读 · 3 评论 -
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 · 1543 阅读 · 0 评论 -
js 浏览器桌面通知notification
Notification是HTML5新增的API,用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的。实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分享给大家,希望能帮你们了解这个API。npm包:我还发了一个npm包:notification-Koro1,非常轻量简洁,觉得不错的话,点个Star吧~chrome下Notification的...原创 2019-02-21 09:02:23 · 5530 阅读 · 0 评论 -
js sendBeacon 刷新/关闭页面之前发送请
背景:有一个任务非常耗时会消耗后台大量算力,所以在退出页面的时候,要求前端这边发送一个请求来杀死任务。一开始以为这个需求非常简单,就是在进入其他路由前,发送一下请求,杀死一下任务就好了。然而现实狠狠的打了我的脸,因为退出页面的场景不止切换路由~退出页面场景:还在本网站,跳到其他路由刷新页面/关闭页面也需要发送请求来杀死任务还在本网站,跳到其他路由这个比较简单,在Vue中可以通过...原创 2019-02-25 10:33:01 · 2013 阅读 · 0 评论 -
var和let/const的区别
let和const是 ES6 新增的命令,用于声明变量,这两个命令跟 ES5 的var有许多不同,并且let和const也有一些细微的不同,再认真阅读了阮一峰老师的文档后,发现还是有一些不知道的细节…博客、前端积累文档、公众号、GitHub内容:var和let/const的区别块级作用域不存在变量提升暂时性死区不可重复声明let、const声明的全局变量...转载 2019-01-04 11:28:04 · 541 阅读 · 1 评论 -
浏览器重绘重排与优化-前端进阶
很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!博客、前端积累文档、公众号、GitHub网页生成过程:HTML被HTML解析器解析成DOM 树css则被css解析器解析成CSSOM 树结合DOM树和CSSOM树,生成一棵渲染树(Render T...原创 2018-12-24 10:43:23 · 673 阅读 · 1 评论 -
前端er来学习一下webWorker吧
我们都知道,JavaScript 是单线程的,在同一时刻只能处理一个任务,我们会通过 setTimeout()、setInterval()、ajax 和事件处理程序等技术模拟“并行”。但都不是真正意义上的并行:Web Worker 是 HTML5 标准的一部分,这一规范定义了一套 API,它允许一段 JavaScript 程序运行在主线程之外的另外一个线程中。这在很大程度上利用了现在不断升级...原创 2018-11-27 13:22:20 · 298 阅读 · 0 评论 -
web 全屏模式轻松掌握[局部元素全屏展示]
我第一次对网页全屏模式有概念,是那种网页播放视频的全屏播 放的那种。感觉很强,前几个星期有个需求也是关于全屏模式的,接触之后才知道全屏模式并不神秘,是个很容易掌握的技能…博客、前端积累文档、公众号、GitHubCodePen Demo地址:演示、code进去看看,玩一下,本文将结合这个demo一起进行讲解。全屏功能封装在一个类里面:我把全屏模式封装在一个类里面,在代码中有详细的...原创 2018-12-03 08:28:26 · 1175 阅读 · 0 评论 -
手摸手教你使用WebSocket[其实WebSocket也不难]
在本篇文章之前,WebSocket很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真知。游泳、健身了解一下:博客、前端积累文档、公众号、GitHubWebSocket解决了什么问题:客户端(浏览器)和服务器端进行通信,只能由客户端发起ajax请求,才能进行通信,服务...原创 2018-10-25 10:42:30 · 1416 阅读 · 0 评论 -
前端er怎样操作剪切复制以及禁止复制+破解等
前言有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。 个人博客了解一下:obk...原创 2018-08-09 11:32:12 · 734 阅读 · 0 评论 -
关于input的一些问题解决方法分享
前言input是我们接受来自用户的数据常用标签,在前端开发中,相信每个人都会用到这个标签,所以在开发过程中也时候也会遇到一些问题,本文的内容是我在跟input相爱相杀过程中产生的,在此记录分享一下。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com本文内容包括:移动端底部input被弹出的键盘遮挡。控制...原创 2018-05-14 09:27:48 · 969 阅读 · 0 评论 -
如何判断用户浏览器以及一些前端常用的正则表单验证
前言在我们做用户授权登录(微信,qq授权),以及根据对应浏览器做对应的操作的时候,经常会遇到需要判断用户使用的浏览器的需求,以及在需要用户输入信息的时候,有需要验证的一些正则。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com判断用户浏览器navigator.userAgent判断用户所使用的浏览器...原创 2018-05-07 09:15:16 · 407 阅读 · 0 评论 -
js原生DOM对象与jQuery对象不是一回事儿,区别联系相互转换,踩坑经历
写在前面:本文主要内容包括js原生dom对象和jQuery对象的区别,联系,相互转换,以及踩坑经历。情况是这样的,今天在实现一个js验证码的功能,需要获取input的值,然后我用jQuery的方法获取到了dom节点,然后用原生js获取input的值,结果就出错了,好在后来场外求助启宸欧巴在师兄的帮助下发现问题所在,并成功解决。将今天的踩坑经历,以及网上查阅的资料,集合成一篇文章,分享一波。原创 2017-04-13 13:53:00 · 1179 阅读 · 0 评论 -
慕课网js触发事件系列demo
写在前面:在学js,顺便做了下慕课网上面事件系列的课程,将每个事件都一一做了demo,我也为了加深印象,把demo都放在这里。有兴趣的童鞋,可以复制回去试试看。js鼠标单击事件( onclick )onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。下面是代码:````原创 2017-03-26 14:22:04 · 537 阅读 · 0 评论 -
shuffle()方法、removeAttribute() 方法、split()方法
写在前面:内容包括demo代码,应用和定义,以及参考文献,本文主要内容是学习js期间学到的一些实用的零碎的js1知识,我都记下来了,需要的朋友可以过来参考下,前后可能没有太大的相关性。喜欢的可以点个赞,希望对大家有所帮助。Python shuffle()方法语法shuffle (lst )参数lst -- 这可能是一个列表或元组。作用:打乱一个有序数组,最高效的数组乱序方法应用:打乱输出后,从头输原创 2017-04-03 17:08:52 · 818 阅读 · 0 评论 -
慕课网判断和循环语句demo和知识点整理
写在前面:if...else嵌套,多种选择(Switch语句),for循环,while循环和do...while,break,continue的慕课网知识点相关介绍和demo的汇总。慕课网这部分做完,过去了五六天了。感觉很多都还不够熟练,然后把demo和相关介绍汇总,以后自己查起来也方便。做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句。语法:if(条件){原创 2017-04-02 13:14:26 · 445 阅读 · 0 评论 -
JavaScript获取DOM元素的11种方法总结
写在前面:前端开发中经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。这篇文章总结了11种获取dom的方法,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementI原创 2017-03-25 18:37:31 · 876 阅读 · 0 评论 -
js函数常见的写法以及调用方法
写在前面:本文详细的介绍了5中js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考。1.常规写法(最常见的那种)//函数的写法function run () { alert('常规写法');//这里是你函数的内容 } // 调用 run();原创 2017-04-01 13:16:45 · 15282 阅读 · 4 评论 -
js跳转页面方法汇总。
js跳转页面方法汇总。写在前面:主要内容如题,本文汇总了好几个网页的js跳转页面的方法,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。//js方式的页面跳转 script language="javascript" type=""> function countDown(secs){ tiao.innerText=secs; if(--secs>0)原创 2017-03-24 13:14:52 · 828 阅读 · 0 评论 -
JS 中文注释出现乱码——解决办法
直接上解决办法: 引:先前试过好几种办法,可能是我电脑问题吧,别人总是很容易就解决了,但是我不相信! 1.设置charset=utf-8",这也是最常见的解决办法,通常大家这样子就解决了! PS:如果你使用webstorm编辑器,可能是因为js文件的编码,不是UTF-8。在右下角有一个选项,默认选项为GBK,将它改为utf-8即可。(感觉说的好有道理,我试过了,原创 2017-03-18 13:00:55 · 8443 阅读 · 1 评论 -
favicon.ico地址栏图标,随机背景图,压缩背景
写在前面:本文内容见标题,之前github个人主页每次看到地址栏旁边的小图标默认的样子,都觉得丑爆了,前几天终于抽空把这个改了,还有之前背景图片用了一个大壁纸的网址链接,每次读取背景的时候感觉要半天那么久,一直想着要弄个反应速度快的!然后我又找到一个好方法。效果:Paste_Image.png地址栏的图标:问题描述很早之前就对别的网页有这种漂亮的原创 2017-04-08 14:32:55 · 2552 阅读 · 0 评论 -
引JS文件出错的三个原因
写在前面:今天写代码的时候,无论怎么改代码还有刷新代码,页面都没有效果出来,然后才发现是js代码没有成功引进来,所以就有了这篇文章。1.引入的js文件出错语法:使用标签引入js文件(检查有没有书写错误,有时候真是小细节的问题)比如:位置:把上述语句放在HTML的与之间,也可放在与之间。如果引入的代码在当前页面中能够正常运行(指内联的js代原创 2017-03-21 14:01:20 · 2677 阅读 · 0 评论 -
有哪些方法可以随机生成一个整数,以及如果取得的一个随机数是负数的话,获得的整数是怎么样的?
写在前面:本文的内容主要是关于有哪些方法可以随机生成一个整数,以及如果取得的一个随机数是负数的话,获得的整数是怎么样的?这篇文章跟前面那篇——JS如何用Math.random()来生成指定范围内的随机数?是儿子跟爸爸的关系。第一个问题:几种常见获得整数的方法:1.floor() 定义:对一个数进行下舍入。(相当于去掉小数点后面的,留下整数)2.ceil(原创 2017-03-20 01:15:25 · 1940 阅读 · 0 评论 -
js如何改变css,html样式
写在前面:一贯的图文文章(没图说个X),里面记载了三种方法,一个比一个方便,希望跟我一样的小白可以认真看看。虽然我知道这篇文章很水,但是我还是想写出来,毕竟真的是有人需要这种简单的东西,我现在虽然会了也用了几天,写下来印象也深刻一点,也算是记录一下自己的成长了。第一种方法:改变单个heml元素公式:document.getElementById(id).style.proper原创 2017-03-19 13:24:20 · 927 阅读 · 0 评论 -
indexOf和push()获得不重复随机数组
写在前面:整体思路:先random()获取随机数,indexOf()排除相同的随机数,push()将不重复随机数添加到数组。其实一直想写这篇已经很久了,因为之前做的一个东西还不完善,有bug。所以一直拖到现在。今天中午趁机做了个总结,需要的小伙伴可以看看,做个参考。之前本来是一个很low的去重方法:先获得三个随机数,然后三个随机数分别互相比较,当出现相等的情况时,那个随机数再随机一次,原创 2017-04-05 14:09:41 · 1134 阅读 · 0 评论 -
js变量的作用域详解、生存周期,以及一些小细节。
写在前面:是想写一个闭包的,因为写的比较细,基于篇幅,所以闭包前面关于变量的部分就单独发出来,到时候放个链接引进来,js闭包虽然是一个被讲烂的东西,但其实很多人刚接触这个概念也不太懂,所以希望写一篇接地气,能够让一个从前不知道这个内容的小伙伴能够清楚的理解闭包这个东西。so,本文是基于闭包的变量部分。首先需要理解变量的作用域(变量的有效范围):变量的作用域有两种:全局变量和原创 2017-04-29 13:26:31 · 4213 阅读 · 0 评论 -
倒计时跳转和获取实时时间
写在前面:本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。效果图:页面效果代码解析:html代码body onload="startTime()">div class="box"> div class="time">请等待span id="dd">6span>秒div>原创 2017-04-06 14:44:08 · 1414 阅读 · 0 评论 -
koroFileHeader 非常实用的Vscode 插件[用于添加文件头部注释]
前言本来之前也安装过一个头部文件注释的插件:vscode-fileheader,由于插件的注释模板都是定死的,想要自己定制一些模板注释也不行,实在用的不舒服,然后自己去研究了一番,参考vscode-fileheader插件的一些内容,开发了这个插件。koroFileHeader在 VsCode 中通过快捷键ctrl+alt+i在文件头部添加注释。languageEngl...原创 2018-05-18 09:56:45 · 9835 阅读 · 9 评论 -
前端将数据转化为弹幕效果的实现方式
前言这个需求如题,大体上是将文章的评论数据,在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候,花了挺多精力的,踩了很多坑,现将弹幕的实现思路写出来,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。 个人博客了解一下:obkoro1.com实现效果:实现原理:实现弹幕的原理,并不算太复杂,耗费一些时间,怼一怼应该都可以做出来。...原创 2018-05-02 09:12:14 · 3454 阅读 · 0 评论 -
js 简单的推箱子小游戏步骤解析--大家都玩过的
前言推箱子小游戏大家肯定都玩过,之所以写这篇文章,是觉得这个小游戏足够简单好理解,大家看完文章之后,自己也能花上半天功夫敲出一个推箱子小游戏来,如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家。 本文首发于我的个人blog:obkoro1.comdemo:推箱子小游戏步骤解析:本文代码已经放在了github上面了,里面也进行了很详细的代码注释,可以c原创 2018-01-09 10:50:35 · 2565 阅读 · 0 评论 -
【读书笔记】《高性能JavaScript》
缺陷这本书是2010年出版的,这本书谈性能是有时效性的,现在马上就2018年了,这几年前端发展的速度是飞快的,书里面还有一些内容考虑IE6、7、8的东西,殊不知现在这些都已经不再考虑了,所以不可避免的有一些知识是比较老的。有些解决方法现在已经不是最好的解决方式,比如工具那一章。前言总的来说,这本书整体给出的性能优化建议,以及作者耐心的实践,对我们开发优化的启发和帮助还是很大的,因为原创 2018-01-16 14:29:13 · 313 阅读 · 0 评论 -
cookie、localStorage和sessionStorage 存储、获取、删除等使用方式以及三者之间的区别等内容
写在前面:前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知道的。本文的主要内容就是针对这三者的存放、获取,区别、应用场景。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.原创 2017-11-27 11:20:16 · 5992 阅读 · 1 评论