OBKoro1
OBKoro1
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96%E5%92%8C%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81.html) # 防抖函数&节流函数 节流函数和防抖函数是 JS 比较重要的概念,应用好了可以提高很大的性能,在面试中也是很高频的一个考点。下面一起来看看这两种方法是如何使用的: # 防抖函数(debounce): # 概念: 在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。 # 生活中的栗子: 如果有人进电梯(触发事件),那电梯将在 10 秒钟后出发(执行事件),这时如果又有人进电梯了(在 10 秒内再次触发该事件),我们又得等 10 秒再出发(重新计时)。 # 代码栗子: /** * @description:...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/webWorker%E4%B8%8A%E6%89%8B.html) # 前端er来学习一下webWorker吧 我们都知道,JavaScript 是单线程的,在同一时刻只能处理一个任务,我们会通过 setTimeout()、setInterval()、ajax 和事件处理程序等技术模拟“并行”。但都不是真正意义上的并行: Web Worker 是 HTML5 标准的一部分,这一规范定义了一套 API,它允许一段 JavaScript 程序运行在主线程之外的另外一个线程中。 这在很大程度上利用了现在不断升级的电脑计算能力:能够在同一时间平行处理两个任务。 游泳、健身了解一下:博客、前端积累文档、公众号、GitHub # 场景 当我们有些任务需要花费大量的时间,进行复杂的运算,就会导致页面卡死:用户点击页面需要很长的时间才能响应,因为前面的任务还未完成,后面的任务只能排队等待。对用户来说,这样的体验无疑是糟糕的,web worker 就是为了解决这种花费大量时间的复杂运算而诞生的! # WebWorker 的作用:创建 worker 线程 WebWorker 允许在主线程之外再创建一个...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/cookie%E5%92%8Cstorage%E7%9A%84%E4%BD%BF%E7%94%A8%E4%BB%A5%E5%8F%8A%E5%8C%BA%E5%88%AB.html) # cookie、localStorage 和 sessionStorage 的使用以及区别 # localStorage 和 sessionStorage 的增删改查: 存储数据: sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据 获取指定键名数据: let dataSession=sessionStorage.getItem('key');//获取指定键名数据 let dataSession2=sessionStorage.key;//sessionStorage是js对象,也可以使用key的方式来获取值 console.log(dataSession,dataSession2,'获取指定键名数据'); 获取sessionStorage全部数据: let dataAll = sessionStorage.valueOf(); //获取全部数据 console.log(dataAll,...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/ES6/%E8%AE%BA%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%E5%92%8C%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB%E4%BB%A5%E5%8F%8A%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%E5%92%8C%E4%B8%8D%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF.html) # 论普通函数和箭头函数的区别以及箭头函数的注意事项和不适用场景 箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... # 普通函数和箭头函数的区别: # 箭头函数的this指向规则: # 1. 箭头函数没有prototype(原型),所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined # 2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。 下面栗子中在一个函数中定义箭头函数,然后在另一个函数中执行箭头函数。 let a, barObj = { msg:...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/ES6/let%E5%92%8Cconst%E5%91%BD%E4%BB%A4.html) # var和let/const的区别 let和const是 ES6 新增的命令,用于声明变量,这两个命令跟 ES5 的var有许多不同,并且let和const也有一些细微的不同,再认真阅读了阮一峰老师的文档后,发现还是有一些不知道的细节... 博客、前端积累文档、公众号、GitHub # 内容: var和let/const的区别 块级作用域 不存在变量提升 暂时性死区 不可重复声明 let、const声明的全局变量不会挂在顶层对象下面 const命令两个注意点: const 声明之后必须马上赋值,否则会报错 const 简单类型一旦声明就不能再更改,复杂类型(数组、对象等)指针指向的地址不能更改,内部数据可以更改。 # 为什么需要块级作用域? ES5只有全局作用域和函数作用域,没有块级作用域。 这带来很多不合理的场景: 内层变量可能覆盖外层变量 用来计数的循环变量泄露为全局变量 var...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/CSS/CSS%E6%A6%82%E5%BF%B5-BFC%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA.html) # CSS 概念-BFC 深入浅出 好记性不如烂笔头,研究了一下 BFC,发现里面比较细的东西也是很多的!关于 BFC,很多人可能都听说过 BFC 这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本文预计篇幅较长,认真,耐着性子看,应该都能够比较深入的理解 BFC 这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞,或者关注一波本人,谢谢。 # BFC 是什么鬼? 所谓的 BFC 就是 css 布局的一个概念,是一块区域,一个环境。 先稳住别懵逼,接着往下走。 # 关于 BFC 的定义: BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与(在下面有解释),...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/CSS/CSS%E6%9D%83%E9%87%8D%E8%A7%84%E5%88%99.html) # CSS 权重规则 日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了. # 权重规则总结: !important 优先级最高,但也会被权重高的 important 所覆盖 行内样式总会覆盖外部样式表的任何样式(除了!important) 单独使用一个选择器的时候,不能跨等级使 css 规则生效 如果两个权重不同的选择器作用在同一元素上,权重值高的 css 规则生效 如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则. 权重相同时,与元素距离近的选择器生效 # css 权重优先级用来干嘛? 在同一个元素使用不同的方式,声明了相同的一条或多条 css 规则,浏览器会通过权重来判断哪一种方式的声明,与这个元素最为相关,从而在该元素上应用这个声明方式声明的所有 css 规则。 #...
### [博客链接](http://obkoro1.com/web_accumulate/accumulate/) # 前端进阶积累 本项目用于记录前端进阶路上积累的知识点,希望我们能够在纷乱的前端娱乐圈里,专注js基础,打磨核心竞争力,一通百通,无惧工具/框架变迁。 前端进阶之路漫漫,期待与你一起成长... 如果我的博客对你的成长有帮助的话,那就给我的点个Star吧~ # 来社区关注我,不错过最新文章: 掘金 segmentfault 微信公众号 # 点个Star支持我一下~ [博客链接](http://obkoro1.com/web_accumulate/accumulate/)
### [博客链接](http://obkoro1.com/web_accumulate/algorithm/simple/%E5%90%88%E5%B9%B6%E6%8E%92%E5%BA%8F%E6%95%B0%E7%BB%84.html) # 合并排序数组 # 难度:简单 # 描述: 合并两个排序的整数数组 A 和 B 变成一个新的排序数组。 # 样例: 给出A=[1,2,3,4],B=[2,4,5,6],返回 [1,2,2,3,4,4,5,6] # 题目分析: 注意 A 和 B 本来就是排序好的数组,最简单的就是用sort排序了。 # sort排序 把两个数组合并成一个数组 用 sort 升序进行排序。...
### [博客链接](http://obkoro1.com/web_accumulate/algorithm/induction/%E6%9F%A5%E6%89%BE%E6%96%90%E6%B3%A2%E7%BA%B3%E5%A5%91%E6%95%B0%E5%88%97%E4%B8%AD%E7%AC%ACN%E4%B8%AA%E6%95%B0.html) # 查找斐波纳契数列中第 N 个数 # 描述 所谓的斐波纳契数列是指: 前 2 个数是 0 和 1 。 第 i 个数是第 i-1 个数和第 i-2 个数的和。 斐波纳契数列的前 10 个数字是: 0, 1, 1, 2,...