![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
liuhua_2323
星空不问赶路人,时光不负有心人
展开
-
事件代理(事件委托)
事件代理,又称之为事件委托,是JS中绑定事件的常用技巧,顾名思义,事件代理就是把原本需要绑定在子元素上的事件委托给父元素,事件代理的原理是冒泡机制。下面我来举个例子:先写出页面上的HTML结构<button id="btn">添加按钮</button><ul> <li>1</li> <li>2</...原创 2020-02-25 15:16:19 · 237 阅读 · 0 评论 -
JS判断图片是否加载完成
我们经常需要获取图片的宽高,这需要在图片加载完成后才可以。下面我就介绍几种判断图片是否加载完成的方法:首先我们先写一个img标签<img src="./img.png" alt="">1.complete属性:var imgNode = document.getElementsByTagName('img')[0];var timer = setTimeout...原创 2020-02-24 23:56:13 · 3366 阅读 · 1 评论 -
JS延迟加载的方式有哪些
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件,有助于提高页面的加载速度。1.defer 属性:等于告诉浏览器立即下载,但延迟执行(脚本会被延迟到整个页面都解析完毕之后再执行。),即使<script>元素放在了<head>元素中,但包含的脚本将延迟浏览器遇到</html>标签后再执行,所有的defer脚本保证是按顺序依次执行的。...原创 2020-02-24 08:29:27 · 1464 阅读 · 0 评论 -
DOM操作方法大全
1.nodeType: 以数字值返回指定节点的节点类型元素节点:1属性节点:2文本节点:32.attributes:返回当前元素属性列表集合通过name取当前属性通过value取当前属性的属性值3.childNodes:返回子节点列表集合只包含一级子节点,不包含孙子级及以下;标准下,包含元素节点和文本节点,也会包含非法嵌套的子节点,如下面的p;非标准下,只包含元素...原创 2020-02-24 06:42:52 · 1520 阅读 · 0 评论 -
Js之动画的最佳实现requestAnimationFrame
在讲解这个API之前,我们先来了解一些基础知识:屏幕刷新频率:屏幕每秒出现图像的次数。普通笔记本为60Hz。1000 / 60≈16.67 ,所以计算机每16.7ms刷新一次,由于人眼的视觉停留,所以看起来是流畅的移动。setTimeout:通过设定间隔时间来不断改变图像位置,达到动画效果。但是容易出现卡顿、抖动的现象;原因是:1、settimeout任务被放入异步队列,只有当主线程任务...原创 2019-12-25 15:39:16 · 916 阅读 · 1 评论 -
Object.defineProperty定义对象属性
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。语法:Object.defineProperty(obj, prop, descriptor)参数:obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符。value:属性...原创 2019-12-23 16:32:39 · 4470 阅读 · 0 评论 -
js中继承(拷贝)的几种常用方法
寻寻觅觅,寻寻觅觅,你终于找到了这儿。话不多说,直接开撸,我们先从最简单的浅拷贝开始浅拷贝:这里关于浅拷贝,我总结了三种方法,我们先来定义两个对象var person={ name:"cj", age:'22', add:{ c:"33", d:'44' }}var prog={ lang:"javascri...原创 2019-12-23 16:25:41 · 278 阅读 · 0 评论 -
Iterator迭代器
什么是Iterator迭代器:lterator(遍历器)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据只要部署lterator接口,就可以完成遍历操作(依次处理该数据结构的所有成员)Iterator的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创造了一种新的遍历命令for...of循环,Iterator接...原创 2019-11-09 16:18:04 · 225 阅读 · 0 评论 -
JavaScript 语句执行机制涉及的一种基础类型:Completion 类型
我们来看一个例子。在函数 foo 中,使用了一组 try 语句。我们可以先来做一个小实验,在 try 中有 return 语句,finally 中的内容还会执行吗?我们来看一段代码。function foo(){ try{ return 0; } catch(err) { } finally { console.log("a") }}console.l...原创 2019-11-04 12:48:25 · 1111 阅读 · 0 评论 -
this指向及改变this指向
1.全局下的this指向windowthis.a=1;alert(window.a); //12.事件里面的this指向事件源var obj=document.getElementById('oDiv');obj.onclick=function(){ alert(this.innerHTML) ;//这里的this指向obj}3.函数中的this谁调用就指向谁...原创 2019-11-02 13:58:34 · 181 阅读 · 0 评论 -
js数据类型中的小知识
1.为什么某个表达式在控制台的输出结果为undefined?控制台在执行完我们输入的表达式之后,总是要输出该表达式的运行结果,但是有一些表达式(例如:var a = 1)是没有任何返回值的,在这种情况下,控制台就会隐式的打印一个undefined。2. a++和++a的区别:后置的++操作会先返回该值,然后再增1let a=123;let b=a++;b //123...原创 2019-11-01 11:40:09 · 108 阅读 · 1 评论 -
数组方法大全
花了几个小时收集整理了数组常见常用方法,分享给大家因为数组方法较多,变量名字难取,又不想写一个注释一个,于是通过函数的方式包装变量。//数组所有知识总结// 1.join(sp): 将数组的元素组成一个字符串,以sp为分隔符,省略的话则用默认用逗号为分隔符,原数组不变function join(){ let arr1=[1,"json"]; console.log(...原创 2019-10-30 18:01:19 · 293 阅读 · 0 评论 -
new运算符的介绍与模拟实现
new运算符,创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(得到的是一个对象)语法:new constructor[([arguments])] constructor 一个指定对象实例的类型的类或函数。 arguments 一个用于被constructor调用的参数列表。 function Person(name,age){...原创 2019-10-30 17:53:14 · 169 阅读 · 0 评论 -
你不知道的Javascript类型知识
前言:JavaScript 类型对每个前端程序员来说,几乎都是最为熟悉的概念了。我们不妨先来思考几个问题:为什么有的编程规范要求用 void 0 代替 undefined? 字符串有最大长度吗? 0.1 + 0.2 不是等于 0.3 么?为什么 JavaScript 里不是这样的? ES6 新加入的 Symbol 是个什么东西? 为什么给对象添加的方法能用在基本类型上?类型:...原创 2019-10-30 09:11:54 · 131 阅读 · 0 评论 -
js中静态方法与实例方法
静态方法:直接定义在类上的方法,不需要实例化类就可以调用function Person(pname){ this.name=pname;}//定义在类上Person.say=function(){ console.log('我是静态方法');}Person.say()实例方法:定义在prototype属性上的方法,需要实例化类才能调用function Pe...原创 2019-10-16 09:47:43 · 1421 阅读 · 0 评论 -
js解析与执行过程
js解析与执行过程分为全局与局部1:全局,预处理阶段===>执行阶段2.局部(函数),预处理阶段===>执行阶段全局:预处理全局的词法环境===window{a:undefinedb:对函数的一个引用}在全局下找到:用var定义的变量 eg:var a=5 用声明方式创建的函数 eg:function b(){} ,加...原创 2019-10-14 13:20:50 · 248 阅读 · 0 评论 -
for循环体中函数对变量i的使用
话不多说,先看看大家常常出现的问题:var a=[];for(var i=0;i<10;i++){ a[i]=function(){ console.log(i); }}a[6](); //10有些小伙伴会问不是应该输出6的吗?为什么会是10?因为这里是用var声明的变量,是一个全局变量,被赋给数组a的函数内部的co...原创 2019-07-20 18:29:45 · 3340 阅读 · 0 评论 -
回流和重绘
浏览器渲染过程:在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree(渲染树),然后根据渲染树进行布局,最后调用GPU进行绘制,显示在屏幕上。ren...原创 2019-12-21 10:03:25 · 288 阅读 · 0 评论 -
防抖和节流
在实际开发中,我们经常会绑定resize、scroll等持续触发的事件。但是有时候我们并不希望事件在持续的过程中那么频繁的去执行。对于这种需求我们只能限制事件触发的频率。前端术语称为防抖和节流。防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数的执行时间。1.触发事件后立即执行function debounce(func,wait) { ...原创 2019-07-31 11:51:36 · 89 阅读 · 0 评论 -
js原型链
话不多说,先看下面这张图:简单解释一下:通过构造函数创建出来的ff对象的__proto__指向构造函数的prototype构造函数的prototype里面的__proto__又指向Object的prototype对象Object的prototype里面的__proto__指向null这就是所谓的原型链,这也就是为什么ff对象能使用toString等方法,因为顺着原型链,它能读取...原创 2019-10-08 17:23:50 · 87 阅读 · 0 评论 -
constructor构造器
constructor是每一个实例对象都拥有的属性,而这个属性也相当于是一个指针,它指向于创建当前对象的对象//两种方式创建对象是否有区别(没有区别)var o={};var p=new Object();console.log(o.constructor);//[ Object]console.log(p.constructor);//[ Object]console.log(o...原创 2019-10-10 08:41:36 · 188 阅读 · 0 评论 -
初探原型prototype
prototype是函数的一个属性( 只有函数才有 ) ,指向的是一个对象,称之为原型对象function Person(){ this.age=21; this.name='dj'}Person.prototype.head='liuhua';var p=new Person();var p2=new Person();console.log(p.head); ...原创 2019-10-11 01:13:13 · 71 阅读 · 0 评论 -
浅谈对js闭包的理解
闭包就是能够读取其他函数内部变量的函数。由于在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。(引用了自由变量的函数)function f1(){ var a=10; var b=20; function f2(){ console.log(a); ...原创 2019-07-11 09:44:20 · 1050 阅读 · 0 评论