- 博客(16)
- 收藏
- 关注
原创 js的防抖和节流 2021/3/6
1.防抖:这是前端中最基础的性能优化,在绑定 scroll 、resize 这类事件时,当它发生时,它被触发的频次非常高,间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的,就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中,前端依赖于某种事件如resize,scroll,发送Http请求,在这个过程中,如果不做防抖
2021-03-06 16:41:09
92
原创 js的继承方式 2021/3/4
1.原型链继承 //parent构造函数function Parent(name) { this.name = name || 'Adam';}//给原型增加方法Parent.prototype.say = function () { return this.name;};//空的child构造函数function Child(name) {}//继承function inherit(C, P) { C.prototype = new P();}inherit(Child
2021-03-05 11:27:57
114
1
原创 call,apply和bind问题
1.手写apply Function.prototype.newCall=function(obj,arr){ var obj=obj||window; obj.fn=this; if(!arr){ newArgs=obj.fn(); } else{ var args=[]; for(var i=0;i<
2021-03-04 11:38:27
93
1
原创 手写深浅克隆 2021/3/3
1.深拷贝和浅拷贝的定义:其实深拷贝和浅拷贝都是针对的引用类型,JS中的变量类型分为值类型(基本类型)和引用类型;对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会进行地址的拷贝,最终两个变量指向同一份数据2.浅拷贝的实现 var obj={ name:'abc', age:123, sex:'female', card:['1','2','3'] } fun
2021-03-03 15:35:43
97
原创 this指向问题总结 2021/3/1
一、 解析器在调用函数时每次都会向函数内部传递一个参数,这个参数就是this,this指向的是一个对向,这个对象就是上下文对象,根据调用形式的不同,函数会指向不同的对象。二、 如果要判断一个运行中函数的 this 绑定, 就需要找到这个函数的直接调用位置。 找到之后 就可以顺序应用下面这四条规则来判断 this 的绑定对象。new调用,绑定到新创建的对象,注意:显示return函数或对象,返回值不是新创建的对象,而是显式返回的函数或对象。通过new操作符调用构造函数,会经历以下4个阶段。创建一个新
2021-03-02 17:12:15
148
1
原创 闭包与循环
什么是闭包:一个函数中嵌套了另一个函数,里面的一个函数要访问外层函数的变量,所以就形成了一个闭包,闭包即是为了保留某些局部变量的值而存在的。解决方法一:加一层闭包,i 以函数参数形式传递给内层函数: <ul> <li>第一个选项</li> <li>第二个选项</li> <li>第三个选项</li> <li>第四个选项</li>
2021-03-01 16:18:11
184
原创 数组去重的方法
1.对象键值对原理:利用了对象的key不可以重复的特性来进行去重。 var arr=[0,0,1,2,2,3,4,4,4]; Array.prototype.unique=function(){ var temp={}, arr=[], len=this.length; for(var i=0;i<len;i++){ if(!temp[this[i]]){ temp[this[i]]='abc';
2021-02-17 17:30:45
99
1
原创 通过原型链实现继承
function People(){ this.name=name; this.age=age; this.sex=sex; } People.prototype.sayHello=function(){ console.log('你好,我是'+this.name+'我今年'+this.age); } People.prototype.sleep=function(){ console.log(this.name+..
2021-01-17 20:34:35
91
原创 轮播图制作
1. <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style> *{ margin:0; padding:0; } .carousel{
2021-01-06 22:21:15
126
原创 三栏布局的实现方式
1.float+marginhtml部分 <div class="container"> <div class="left">11</div> <div class="right">33</div> <div class="main">22</div> </div>css部分 .left{ float:left; height: 2
2020-11-29 18:10:25
118
原创 垂直居中的方法
1 使用flex布局方法.wrap{ display:flex; width: 600px; height: 600px; border:2px solid purple; justify-content:center; align-items:center; } .item{ width: 150px; height: 150px; background-color: green; }</styl
2020-11-27 10:13:49
63
原创 css来实现圣杯布局
css来实现圣杯布局圣杯布局的要求– 纵向分为上中下三部分,上中下宽度100%,上下高度固定;中间部分高度自动。– 中间被拆分为三栏:左右宽度固定,中间自适应;1.flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
2020-11-26 20:32:26
145
原创 剑指offer 合并两个有序链表
剑指offer 合并两个有序链表1.迭代法/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} *
2020-09-28 20:21:03
52
原创 反转链表
1.反转链表(1)设置三个指针,四条语句的方法(2)通过把链表的数值取出来存储为一个数组,再利用reverse方法function ReverseList(pHead){ if(pHead==null||pHead.next==null){ return pHead; } var p=pHead; var q=pHead; var arr=[]; while(p!==null){ arr.push(p.val);
2020-09-25 16:13:24
61
原创 链表的学习
链表的定义链表的每一个元素由一个存储元素本身的节点和一个指向下一个元素的引用。链表相对于数组的优点:1.灵活的内存动态管理,内存空间不是必须连续的2.不必在创建时就确认大小,大小可以无限的延伸下去3.插入和删除数据的时间复杂度低,只有O(1)链表相对于数组的缺点:访问查找某个节点时,需要从头开始进行访问封装链表结构 function LinkedList() { //内部的类:节点类 function Node(data) {
2020-09-24 18:27:47
119
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人