JavaScript
文章平均质量分 85
wendZzz
若有需要请联系微信号:coolbigflower
微信公众号:前端一起学
展开
-
JS小技巧,让你编码效率杠杠的,快乐摸鱼
reduce版var array = [1,2,3,4,5]array.reduce((a, b) => a + b)示例:var array = [12, 34, 22, 32, 21]array.reduce((a, b) => a > b ? a : b)示例:var array = [12, 34, 22, 32, 21]array.reduce((a, b) => a < b ? a : b)示例:升序var array = ["j原创 2022-06-20 10:03:29 · 183 阅读 · 0 评论 -
JS事件循环机制
捕获冒泡,Event Loop,宏任务微任务......都是中高级必问项原创 2022-02-27 21:53:06 · 612 阅读 · 0 评论 -
JS this关键字
学习、工作、面试,绕不开的难点。原创 2022-02-26 16:08:17 · 972 阅读 · 0 评论 -
Web前端存储方式总结,可别说还不知道IndexedDB
浏览器存储的知识总结,localStorage,sessionStorage,cookie,IndexedDB和webSql,其中详述indexedDB的使用原创 2021-12-31 14:17:51 · 1971 阅读 · 0 评论 -
父子节点数据格式不一致的树状列表实现
背景后端返回的数据格式已经是树状结构了,但是其中父节点的数据格式和子节点的不一样,例如下图:很清晰看出,在ts中抽象出interface,则分别是:// 父export interface ICatalogModel { catalogCode: string; catalogName: string; projectMarker: string; catalogLogin: boolean; catalogOne ? : string; catal原创 2021-03-23 10:13:45 · 2683 阅读 · 1 评论 -
vue 项目引用 typescript 改造
这篇教程适用于手动构建的 vue 项目和 vue-cli 2x 版本的脚手架自动构建的项目。vue/cli 3x 版本以上的脚手架可以在自动构建时自选集成的 typescript 环境,这并不有利于学习。新建 vue 项目我这里采用 2x 的脚手架自动构建个 vue 项目。vue init webpack platform-test按照如下截图依次选择即可:构建完项目之后进入,查看项目的目录结构如下:改造项目安装依赖项需要新增些依赖项。ts 和 tsl原创 2021-01-20 17:12:33 · 1090 阅读 · 0 评论 -
本地缓存cookie的使用
本地存储主要有这几种:localStorage,sessionStorage和cookie。面试常问点,这三种的区别是什么~共同点:都是保存在浏览器端、且同源的。区别:1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。2、存储大小限制也不同,coo.原创 2020-12-11 16:55:44 · 1017 阅读 · 0 评论 -
three.js基础学习
这篇文章总结一下最基础的threejs知识,至少简简单单能写出个这样的效果。首先呢,使用threejs需要先安装,可以直接下载个threejs文件,本地静态引用。下载地址:https://threejs.org/build/three.js但我还是推荐的npm安装,新建个vue项目,在项目里执行:npminstallthree --save可以直接导入整个three的核心库,import * as THREE from 'three';下面就是效果实现的代码介绍。..原创 2020-11-06 13:57:42 · 697 阅读 · 1 评论 -
原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢?这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染页面。确定原始数据结构原始数据是需要按照下面这种结构来定义的,如果原始数据已经是被后端处理成树状结构,就可以省略这一步骤。let data = [ { "id": "1", "name": "1", "fatherId": "0", ..原创 2020-07-08 10:42:26 · 3343 阅读 · 0 评论 -
纪一次独立开发工作总结
代码写了很多进步不多,反思来说还是没做好总结以至于很多问题再次遇到会有很熟悉但陌生的感觉。这应该是自己实现独立开发的第一个组件了,以前都是在已有组件的基础上按需新增功能而已,所以这也是值得纪念了。更好的学习是在工作中,更快的进步是在项目中。每个公司部门的项目架构不一样,按理说这样是很难有什么参考价值,但其中封装了很多函数方法,涉及的开发思想,也是对我帮助很大,希望也能对你有所帮助。需求...原创 2019-11-12 21:51:05 · 265 阅读 · 0 评论 -
腾讯面试题,this指向问题
问题var x = 20;var a = { x: 15, fn: function() { var x = 30; return function() { return this.x } }}console.log(a.fn());console.log((a.fn())());console.log(a.fn()());console.log(a.f...原创 2019-11-05 10:19:12 · 295 阅读 · 0 评论 -
使用 JS 操作 HTML 元素
文档对象模型(DOM)JS 有很多地方让咱们吐槽,但没那么糟糕。作为一种在浏览器中运行的脚本语言,它对于处理web页面非常有用。在本中,我们将看到我们有哪些方法来交互和修改HTML文档及其元素。但首先让我们来揭开文档对象模型的神秘面纱。文档对象模型是一个基本概念,它是咱们在浏览器中所做的一切工作的基础。但那到底是什么? 当咱们访问一个 web 页面时,浏览器会指出如何解释每个 HTML 元...原创 2019-10-24 10:47:50 · 472 阅读 · 0 评论 -
点击事件的三种绑定方式(补充:事件的三种处理程序)
HTML中使用onclick属性 JS中使用onclick属性 JS中使用addEvenListener()方法三种方法的比较在第二、三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以。语法细节在第一种方法中,onclick大小写无关,但在第二种方法中,必须使用小写。因为HMTL对大小写不敏感,而JS则会区分大小写。 在第二、三种方法中,指定函数名时...原创 2018-10-17 12:02:35 · 779 阅读 · 0 评论 -
JS动画-链式运动以及在此基础上完善实现同时运动
之前写了几篇JS动画实现了缓冲运动,改变宽,高,透明度的效果,但是这些动画效果都没有同时作用于某一个元素,譬如,想要实现一个DIV元素先变宽,再变高,最后透明度再来个变化,也就是链式运动,这该如何实现呢,又譬如,想要一个DIV元素在鼠标移入时,它的宽高透明度同时改变,这又该如何实现呢。先解决第一个问题,链式运动。将所有的动画运动效果封装成在一起,取名为move.js.可见,链式的实现在于添...原创 2018-11-21 09:24:49 · 535 阅读 · 0 评论 -
JS实现QQ面板-修改状态功能
实现的功能是在点击状态时显示状态列表,选中不同状态会切换当前状态,点击屏幕其他地方可以隐藏状态列表。由此可见,实现该效果需要三个功能组成。首先确定HTML结构,状态有三部分表示,当前状态的图标;一个向下的箭头;当前状态字样。状态列表中内容由状态图标和状态字样组成。<div id="loginState" class="login-state-trigger login-state"...原创 2018-11-14 11:45:55 · 404 阅读 · 0 评论 -
JavaScript实现瀑布流式布局
瀑布流,又称瀑布流式布局。视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。 就是如下这样的布局:这样式的布局,每张图片等宽不等高,在页面上从左到右依次排列,从第二行开始,每一张图片插入到前一行整列高度最小的下方,并且随着滚动条向下移动还会不断加载新的图片,还是像之前的布局一样插入。因此,实现瀑布流布局应该达到两种效果,一个是瀑布流样...原创 2018-11-08 13:54:06 · 963 阅读 · 0 评论 -
事件冒泡(事件委托)
说是初认识,其实也不算了,刚学习JS时就已经听过事件的冒泡和捕获的大名,但真是不知所云,也是不求甚解,迷惑了很久,今天终决定好好来了解一下这个冒泡。在此之前呢,不得不提一下事件流:描述的是从页面中接受事件的顺序。什么是冒泡当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上...原创 2018-11-01 16:33:58 · 315 阅读 · 0 评论 -
arguments对象用法
JavaScript动态传参怎么做?定义一个函数,事先不知道多少个参数,也不确定有多少个参数,最终如何来返回这个参数?举个栗子,实现一个多数相加计算的功能,形象一些。function add(){ var sum=0; if(arguments.length == 0) return sum; for(var i=0; i<arguments.len...原创 2018-10-30 16:43:12 · 504 阅读 · 0 评论 -
JS中childNodes,firstChild,firstElementChild和children使用分析
在JS中获取元素子节点时候,使用childNode()遇到了一些问题,找了一些资料总结如下。首先,用于测试先规定好HTML:<div> <p> <span></span> <span></span> <span></span> &...原创 2018-10-25 11:58:18 · 2308 阅读 · 1 评论 -
JS动画-移入移出
移入移出动画效果的实现主要用到了定时器。定时器即 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。它会不停地调用函数,直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。HTML<div id="div"> <span>...原创 2018-11-16 13:58:44 · 1256 阅读 · 0 评论 -
JS实现QQ面板-拖曳效果
实现的功能是将整个QQ面板在特定区域点击鼠标按下移动,面板会随着光标移动而移动,这可以称为鼠标跟随效果,也叫拖曳效果。首先是确定HTML结构,定义一个父元素模拟整个QQ面板,设置标题区域用于JS选中进行拖曳。<div class="loginPanel" id="loginPanel"> <div id="title"></div><原创 2018-11-15 11:09:10 · 363 阅读 · 0 评论 -
JS动画-获取样式
探讨JS动画中获取样式的缘故,是因为在添加边框之后的元素缩小其宽度时,会出现不减反增的bug。如下:<style> #div1{width: 200px;height: 200px;background: red;border: 1px solid black;}</style><div id="div1"></div><...原创 2018-11-20 13:32:52 · 269 阅读 · 0 评论 -
JavaScript中this关键字改变指向的三种方法(apply、call、bind)
首先,了解一下this关键字。this关键字就涉及到函数调用的内容。函数的几种调用方式:普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调用 Function.prototype.bind方法 ES6箭头函数但是不管函数是按哪种方法来调用的,都需要记住一点:谁调用这个函数或方法,this关键字就指向谁。普通函数调用var age = 18;...原创 2018-12-14 15:04:31 · 943 阅读 · 0 评论 -
Chrome调试JS中的BUG
这是一篇我认为介绍chrome调试bug的好文章,原文链接:https://www.zhihu.com/question/35667558/answer/530643532 分享 Codeburst 上一篇过万赞的 JavaScript 前端 bug 调试教程,至于够不够“淫巧”的标准,不好说,反正绝对称得上实用。教你如何在 Chrome 开发者工具内使用断点来调试代码,彻底摒弃 cons...转载 2018-12-21 14:05:51 · 897 阅读 · 1 评论 -
JavaScript类型:关于类型,有哪些你不知道的细节?
undefined和null Undefined类型表示未定义,它的类型只有一个值为undefined。任何变量在赋值前都是undefined类型,值为undefined。但是JS中undefined是一个变量,并非是一个关键字,为了避免无意中的篡改,使用void 0来获取undefined值。 undefined和null有一定的表意差别,null表示“定义了但是为空”,它只一个值为nu...原创 2019-01-28 13:50:36 · 404 阅读 · 0 评论 -
JavaScript对象:面向对象还是基于对象?
学习JavaScript对象,当然会看看JavaScript标准对基于对象的定义,这个定义的内容是:“语言和宿主的基础设施由对象来提供,并且JavaScript程序即是一系列相互通讯的对象集合”。这听起来多么晦涩,至少我很难从中理解到任何JS对象的关键。什么是面向对象首先,什么是对象呢?由于翻译的原因,中文语境中很难理解“对象”的真正含义。实际上,Object(对象)在英文中,是一切事物的总称...原创 2019-01-30 10:34:31 · 690 阅读 · 0 评论 -
JavaScript对象的原型和继承
早期的 JavaScript 程序员一般都有过使用 JavaScript “模拟面向对象” 的经历。JavaScript 本身就是面向对象的,它并不需要模拟,只是它实现面向对象的方式和主流的流派不太一样,所以才让很多人产生了误会。所谓 “模拟面向对象”,实际上做的事情就是“模拟基于类的面向对象”。什么是原型?原型是顺应人类自然思维的产物。中文中有个成语叫做“照猫画虎”,这里的猫看起来就是虎的原...原创 2019-02-27 16:14:08 · 294 阅读 · 0 评论 -
JavaScript学习记录-构造函数
ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志:类的概念,通过类可以创建任意多个具有相同属性和方法的对象。然而,JS中没有类的概念,因此它的对象和其他那些基于类的语言中的对象是不同的。1、普通创建对象创建一个对象,给这个对象新建属性和方法。var demo=new Object(); //创建一个Object对象demo...原创 2018-08-13 22:08:34 · 164 阅读 · 0 评论 -
JavaScript学习记录-脚本模型事件绑定
事件绑定分为两种:传统事件绑定(内联模型,脚本模型) 现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。传统事件绑定的历史问题传统事件绑定中内联模型基本很少使用不必了解。所谓脚本模型就是将一个函数赋值给一个事件处理函数。<script> window.onload=function(){ alert("Bert...原创 2018-09-30 10:06:53 · 297 阅读 · 0 评论 -
JavaScript学习记录-正则表达式(1)
假设用户需要在HTML表单中填写数据,在提交表单数据到服务器验证处理之前,JavaScript程序会检查表单以确认是否输入了数据信息并且这些信息是否符合要求。1、正则表达式Regular expression,是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式,RegExp和String定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式主要用...原创 2018-07-24 12:19:57 · 250 阅读 · 0 评论 -
JavaScript学习记录-正则表达式(2)
获取控制正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能,可以控制匹配模式的方式。反斜杠后的元字符将失去其特殊含义,反斜杠后为模式修饰符的可选参数。(1)字符类:单个字符和数字 元字符/元符号 匹配情况 . 匹配除换行符外的任意字符 [a-z0-9] 匹配括号中的字符...原创 2018-07-25 12:02:07 · 224 阅读 · 0 评论 -
JavaScript学习记录-正则表达式(3)
1、贪婪模式和惰性模式。贪婪模式:如果符合要求就一直往后匹配,一直到无法匹配为止。惰性模式:一旦匹配到合适的就结束,不在继续匹配下去了, 贪 婪 惰 性 + +? ? ?? * *? {n} ...原创 2018-07-26 10:14:23 · 182 阅读 · 0 评论 -
JavaScript学习记录-Function类型
在ECMAScript中,Function(函数)类型实际上是对象,每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名 实际上也是一个指向函数对象的指针。1、函数的声明(1) 普通的函数声明function test(num1,num2){ return num1+num2;}(2) 使用变量初始化函数var...原创 2018-07-27 09:27:36 · 259 阅读 · 0 评论 -
JavaScript学习记录-关于输出
学习了慕课上JS中关于输出的内容,之前看过一遍,今天再看竟然很陌生,因此还是需要文字的记录给自己最频繁的记忆。1、输出内容document.writedoucument.write()可用于直接向HTML输出流写内容,直接在网页中输出内容。(1)输出内容用 “ ” 直接括起来。document.write("Hello World!");(2)通过变量输出内容。var ...原创 2018-08-01 16:58:29 · 239 阅读 · 0 评论 -
JavaScript学习记录-内置对象
内置对象的官方定义“由ECMAScript实现提供的、不依赖宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在了。”也就是说,内置对象已经实例化了,已经不需要显示的实例化它们。有两个内置对象:Global和Math。一、Global对象ECMAScript中任何不属于其它对象的属性和方法,都是Global对象(全局对象)的属性和方法,实际这个对象是不存在,也就是并不存在全...原创 2018-08-06 15:32:19 · 135 阅读 · 0 评论 -
JavaScript学习记录-原型
目录一、原型的属性判断1、比较构造函数和原型(1)构造函数(2)原型2、判断一个对象是否指向了该构造函数的原型对象3、原型模式的执行流程4、判断实例中是否存在指定属性5、判断实例或原型中是否存在指定属性6、判断只有原型中是否存在指定属性二、原型的字面量1、原型属性的不同创建2、不同创建的区别(1)构造函数创建原型(2)字面量方式创建原型对象...原创 2018-08-22 14:52:43 · 219 阅读 · 0 评论 -
JavaScript学习记录-继承
目录1、原型链继承2、借用构造函数继承(对象冒充继承)3、组合继承(结合上两种)一些正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而JS只支持继承,不支持接口实现,且实现继承的方式依靠原型链完成。1、原型链继承在JavaScript中,一共有两种类型的值,原始值和对象值。每个对象都有一个内部属性[[prototype]],我们通常称之为原型。原型的值...原创 2018-08-23 08:59:01 · 152 阅读 · 0 评论 -
JavaScript学习记录-匿名函数与闭包
一、匿名函数1、匿名函数没有声明函数名的函数叫做匿名函数。// 普通函数function demo(){ return "bert";}alert(demo());// 匿名函数function(){ //单独的匿名函数无法运行,就算可运行也无法调用 return "bert";}2、单一的匿名函数的执行方法(1)把匿名函数赋值给变量,通...原创 2018-08-24 23:41:56 · 174 阅读 · 0 评论 -
JavaScript学习记录-BOM中常用对象
目录一、window对象 1、对象的属性和方法2、窗口的大小与位置(1)位置信息(2)大小信息(3)保存信息3、间歇调用和超时调用(1)超时值是在指定的时间过后执行代码,(2)间歇时间值则是每隔指定的时间就执行一次代码。二、location对象三、history对象BOM(Browser Object Model)即浏览器对象模型,它提供了很多对象,...原创 2018-08-27 10:19:53 · 356 阅读 · 0 评论 -
JavaScript学习记录-浏览器检测
目录一、navigator对象1、浏览器及版本号2.浏览器嗅探器3、检测插件(1)检测非IE浏览器插件是否存在(2)检测IE浏览器的控件。(3)跨浏览器检测二、客户端检测1、能力检测(特性检测)2、怪癖检测(bug检测)3、用户代理检测每个浏览器都有自己独特的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤。浏览器之间的差异,以及不同浏览器的“怪...原创 2018-08-27 15:37:53 · 433 阅读 · 0 评论