前端
关注
分享
扫一扫
文章平均质量分 65
SpringRolls
我是一只小拉吉
展开
-
数据过多/DOM操作导致页面卡顿和请求突增导致页面崩溃
数据过多导致页面卡顿采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表)请求突增导致页面崩溃原创 2021-06-11 21:41:26 · 8764 阅读 · 1 评论 -
js实现trim方法
trim()：去除字符串左右两端的空格方法一：正则表达式^:从头匹配$:从尾匹配\s:s匹配空字符(空格,tab,\n,换页,回车)*:匹配前面的表达式0次或多次|:指明两项之间的一个选择g:执行全局匹配,而不是找到第一个匹配就停止...原创 2021-06-05 16:59:09 · 10901 阅读 · 0 评论 -
v-if 与 v-show的区别及对生命周期的影响
两者的区别(1) v-if 的原理是根据判断条件来动态的进行增删DOM元素，只有v-if的值为true时,元素才会存在于html页面中； v-show是根据判断条件来动态的进行显示和隐藏元素，是通过修改DOM元素的display属性来实现的，无论v-show的值为true或者false,元素都会存在于html页面中。(2) 只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断(3) 如果需要非常频...原创 2021-05-23 09:44:46 · 1883 阅读 · 0 评论 -
如何在页面上实现一个圆形的可点击区域？
方法一：通过map加area<img>标签中的 usemap 属性将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。usemap 属性与<map>元素的 name 或 id 属性相关联。这里通过 usemap 映射到 <map> 的circle形 <area>。<area>标签类似<img>，是无法有子元素或其他子内容的。shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形po..原创 2021-05-11 09:17:05 · 2122 阅读 · 0 评论 -
模拟实现函数的apply.call.bind函数
apply.call.bind 的作用：都是为了改变函数运行时上下文(this指向)。三兄弟的区别：三兄弟接收的第一个参数都是 要绑定的this指向. apply的第二个参数是一个参数数组,call和bind的第二个及之后的参数作为函数实参按顺序传入。 bind不会立即调用,其他两个会立即调用。模拟实现函数的call方法函数定义：call是可以被所有方法调用的，所以需要定义在 Function的原型上。函数接收参数：绑定函数被调用时只传入第二个参数及之后的参数。首先contex.原创 2021-04-09 17:47:13 · 162 阅读 · 0 评论 -
模拟实现Promise.all方法
模拟实现 Promise.all 方法function myall(proArr) { // 返回一个promise实例 return new Promise((resolve, reject) => { // 判断参数是否是数组 if (!Array.isArray(proArr)) { return reject(new TypeError('arguments must be Array')) } let count = 0 l原创 2021-04-08 19:54:10 · 543 阅读 · 0 评论 -
事件冒泡和事件捕获区别及设置
事件冒泡：从下至上(是指子元素向父元素传递的过程)， bool=false冒泡(默认)事件捕获：从上至下(是指父元素向子元素传递的过程)， bool=true 捕获 一般不会用到事件委托利用冒泡阶段运行的机制实现的，使用事件代理的方法少了遍历所有li节点的操作，性能上肯定更加优化，而且如果后期又动态的增加li节点，不使用事件代理的话还需要再重新给新增的li节点绑定事件，但是使用事件代理的话则不需要了。例子：假设一个元素div，它有一个下级元素p。<div> <p.原创 2021-03-01 17:22:18 · 1790 阅读 · 2 评论 -
Vue之父子组件间通信实例讲解(props、$ref、$emit)
在说如何实现通信之前，我们先来建两个组件 father.vue 和 child.vue 作为示例的基础。父组件：<template> <div> <h1>我是父组件！</h1> <child></child> </div></template><script>import Child from '../components/child.vue'export ...转载 2021-01-19 21:47:35 · 4592 阅读 · 9 评论 -
Vue 中的 ref 和 $refs 的使用
在vue中一般很少直接操作DOM，如果需要操作DOM，我们可以通过ref 和$ref来实现。refref被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的$refs对象上，如果是在普通的 DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。当在子组件或者DOM元素上写 ref="xxx" 时，vm 实例上就有了一个 $refs 属性，包含了所有注册过 ref 的 DOM对象$refs$refs是一个对象，持有已注册过ref的所有...原创 2021-01-19 21:48:09 · 943 阅读 · 0 评论 -
export与export default的区别
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个（export 可以导出多个命名模块），export default仅有一个输出单个值，使用export default 输出多个值，使用转载 2021-01-04 19:47:10 · 3166 阅读 · 1 评论 -
实现jsonp js
JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件，利用这一特性实现数据传输。用原生JS实现JSONP非常简单，无非几点：1）定义一个函数，用于处理接收到的跨域数据。2）生成一个dom节点(script节点)，然后src属性上面记入发送的目的URL以及参数。3）在跨域服务器端接收GET请求，返回数据（返回之前定义函数的调用的字符串）。4）删除之前生成的script节点。...原创 2020-12-02 19:04:00 · 455 阅读 · 0 评论 -
模拟实现instanceof的功能 js
typeof返回值为6个字符串typeof是用来判断数据类型的，就一个参数 ,使用方式像这样：typeof num, 就是判断num是什么类型typeof 一般只能返回如下几个结果："number"、"string"、"boolean"、"object"、"function" 和 "undefined"；着重看这几个：typeof 不存在的变量 = “undefined” typeof 对象 = “object” typeof null = "object" typeof...原创 2020-11-29 22:18:37 · 253 阅读 · 0 评论 -
模拟实现构造函数new的过程 js
用new操作符创建对象时发生的事情：（1）创建一个新对象；（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；（3）执行构造函数中的代码（为这个新对象添加属性和方法）；（4）返回新对象；function myNew(constructor, params) { var args = [].slice.call(arguments); //将具有length属性的arguments转换为数组 var constructor = args.shift()原创 2020-11-27 18:13:02 · 489 阅读 · 0 评论 -
使用原生的JavaScript实现ajax请求（ajax实现原理)
Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。XMLHttpRequest 对象XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。var xhr = new XMLHttpRequest()原创 2020-11-27 16:10:08 · 454 阅读 · 0 评论 -
嵌套数组指定层次展开 flat扁平化 js
数组的扁平化即为将一个嵌套多层的数组转换为只有一层的数组。[1, [2]] => [1,2][[1, 2], [3, 4]] => [1, 2, 3, 4][1, 2, [3, 4, [5, 6]]] => [1, 2, 3, 4, 5, 6]方法一：递归思路：通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中。// 1. 普通方法 递归function flattenMd1() { let.原创 2020-11-23 21:59:37 · 1261 阅读 · 0 评论 -
模拟实现函数节流(throttling)、防抖(debounce) js
防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。效果：如果短时间内大量触发同一事件，只会执行一次函数。实现：既然前面都提到了计时，那实现的关键就在于这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：function debounce(fn, delay) {//防抖 // 定义一个定时器timer，用来记录当前执行函数状态（借助闭包） let timer = null原创 2020-11-23 15:09:20 · 347 阅读 · 0 评论 -
二分查找（非递归/递归）js
二分查找（折半查找），是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。（3）如果某一步数组为空，则表示找不到目标元素。非递归算法：// 非递归算法function binary_search1(nums, target) { var原创 2020-11-01 22:03:28 · 338 阅读 · 0 评论 -
js排序算法：冒泡、选择、插入、快排★★★ 归并★
一、冒泡排序算法描述如下: 1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。2.第一轮的时候最后一个元素应该是最大的一个。3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。算法实现:/*** @Author spring* @DateTime 2020-10-29* @param {arr} 待数组* @return {arr} 排好序的数组* @description 这是一个冒泡排序算..原创 2020-11-01 12:15:51 · 439 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</title> <style> body {原创 2020-10-01 16:20:23 · 153 阅读 · 0 评论 -
Vue的样式绑定
一、绑定class1. 第一种:样式和数据的绑定，通过对象方式{ }v-bind:class设置一个对象。当isActivated为true的时候，div上会增加一个class属性，属性名称为activated，如果再在css里加上activated类的样式，则会有CSS效果了；如果isActivated为false，则没有class属性。在函数中使当前状态取反做到来回切换。2.第二种方式：通过数组方式，v-bind:class设置一个数组。class里面存放的是一个数组，我们最开始在da.转载 2020-09-22 19:36:46 · 979 阅读 · 1 评论 -
Vue中watch、computed和methods的区别
watch和computed的区别watch和computed都是对数据的监听只有数据发生变化时才会触发，但是他们擅长的领域不一样watch更擅长一对多：就是主要监听一个可以影响多个数据的数据computed擅长多对一：主要监听多个数据影响一个数据的数据，一定要return组合出的那个数据会自动定义不用在data中再次定义，当然也可以使用watch来监听组成computed所监听数据的每一个数据，但是这样代码的重复率过高### watchvar vm = new Vue({ el: '原创 2020-09-22 15:51:30 · 224 阅读 · 0 评论 -
将Vue页面导出为pdf格式并进行下载
1.使用npm下载两个插件a.将html页面转换成图片npm install --save html2canvas b.将图片生成pdfnpm install jspdf --save2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件，内容如下：// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default{ install (Vue, o转载 2020-08-19 17:01:15 · 3167 阅读 · 5 评论 -
Less和Sass的区别
背景CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码。为了方便前端开发的工作量，出现了Sass和 Less。简介SASS（英文全称：Syntactically Awesome Stylesheets），使用R...原创 2020-08-17 17:00:13 · 750 阅读 · 0 评论 -
浏览器解析渲染页面过程
答案： 解析HTML，生成DOM树 解析CSS，生成CSSOM树 将DOM树和CSSOM树关联，生成渲染树(Render Tree) 布局render树（Layout/reflow），负责各元素尺寸、位置的计算 绘制render树（paint），绘制页面像素信息 将像素发送给GPU，展示在页面上。(Display) ...原创 2020-06-22 11:13:48 · 254 阅读 · 0 评论 -
for in与for of用法及区别
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。for-in总是得到对象的key或数组、字符串的下标。for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。var arr=[{name:'张三'},{name:'李四'}];for (var i in arr){ console.log(i)}for (var i of arr){ console.log(i)}结果：...原创 2020-05-26 19:18:47 · 1097 阅读 · 0 评论 -
EventLoop
答案：了解几个概念：调用栈、同步/异步任务、宏任务/微任务JavaScript本身是单线程，也就是同一时刻只能干一件事，JS任务包含了同步任务和异步任务，遇到执行函数会将其放入调用栈(先进后出)中，遇到setTimeout/setInterval等异步任务时，会把它放入到消息队列中，等主线程的任务执行完成以后，再回过头执行消息队列中的异步任务，如果异步任务中仍然有异步任务，会继续放入消息队列，以此类推，便形成了一个事件循环。异步任务： setTimeout setInterv原创 2020-05-22 09:10:41 · 292 阅读 · 0 评论 -
call/apply/bind作用和区别
答案：他们都可以改变函数的作用域。 call/apply 可以直接执行该函数，而 bind 不会立刻执行 fucntion.bind(thisArg, arg1, arg2, ...) call/apply 作用类似，都可以改变指针和执行函数，区别在于传参不同，call 需要单个传参，apply 通过数组传参 function.call(thisArg, arg1, arg2, ...)function.apply(thisArg, [arg1, arg2, ...]).原创 2020-05-19 14:06:29 · 2715 阅读 · 1 评论 -
数组有哪些常用方法
答案： push 末尾添加 pop 末尾删除 shift 首部删除 unshift 首部添加 concat 数组合并 join 数组元素 通过连接符 连接 reverse 数组反转 sort 数组排序 map/forEach/filter/indexOf/includes/slice/splice 详细解析：1. Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。.原创 2020-05-17 11:30:52 · 2364 阅读 · 1 评论 -
slice和splice区别
答案：slice表示截取，slice(start,end)，不改变原数组，返回新数组。splice表示删除，splice(start,length,item)，会改变原数组，从某个位置开始删除多个元素，并可以插入新的元素。详细解析：slice()：从已有的数组中返回你选择的某段数组元素语法：arrayObject.slice(start,end)①：start表示从何处开始选取，end表示从何处开始结束选取，表示一个选取的范围②：start可以为负数，此时它规定从数组尾部开.原创 2020-05-17 13:24:14 · 2026 阅读 · 1 评论 -
如何准确判断一个对象是数组
答案：Object.prototype.toString.call([]) 返回 "[object Array]"扩展答案 [].slice (能力判断 ) [] instanceof Array(类型判断) [].proto=== Array.prototype Array.isArray([]) 存在兼容问题 数组也是引用类型，通过 typeof 依然返回 object详细解析：背景 —— typeof {}和typeof []的结果都是o..原创 2020-05-16 11:17:46 · 571 阅读 · 0 评论 -
什么是深/浅拷贝，有哪些实现方式
答案：JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 详细解析：基本数据类型：string、number、boolean、undefined、null引用数据类型：object、array、funct.原创 2020-05-15 14:41:18 · 1435 阅读 · 2 评论 -
js继承有哪些方法
答案： 原型继承 构造继承 实例继承 call/apply继承(组合继承) ES6 使用class extends继承 详细解析：父类Animal//父类function Animal(name){ this.name = name; this.sum = function() { alert(this.name); }}Parent.prototype.age = 10; //给原型对象添加属.原创 2020-05-14 14:09:30 · 191 阅读 · 0 评论 -
如何理解JS中的闭包及其优缺点
答案：简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。// 正常访问var lan = 'zh';function hello(){ var name = '前端';}console.log(name) //很明显'undefined'// 换成闭包function hello(){ var name = '前端'; function demo(){ console.log(name) //打印：前端 }原创 2020-05-13 14:13:53 · 689 阅读 · 0 评论 -
如何理解作用域链
前沿知识：js代码执行前会创建上下文环境，这个上下文环境包含了变量、作用域链和this.答案：简单理解就是从当前环境向父级一层一层查找变量的过程称之为作用域链。varname='前端';functionhello(){console.log(name);}解释：当我们在函数hello里面打印name的时候，会先在hello作用域中查找，如果没有找到就去hello的父级作用域中查找。详细解析：一、作用域在 Javascript 中，作用域分为...转载 2020-05-11 10:26:48 · 678 阅读 · 0 评论 -
如何理解JS执行上下文
JavaScript执行上下文(context)主要指代码执行环境的抽象概念。执行上下文分为三种： 全局执行上下文 函数执行上下文 eval执行上下文 每一段js代码执行，都会先创建一个上下文环境。...原创 2020-05-10 21:42:48 · 690 阅读 · 0 评论 -
transition和animation的区别及详细解析
答案：他们虽然都可以做出动画效果，但是transition主要做简单的过渡效果，而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画，过渡只有一组（两个：开始-结束）关键帧。animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且...原创 2020-05-08 14:13:11 · 5807 阅读 · 0 评论 -
w3c标准盒子模型和IE盒子模型
答案：盒模型分为：IE盒模型 和 标准w3c盒模型w3c标准盒子模型：宽度 = 内容宽度（content）+ padding + border + margin低版本IE盒子模型：宽度 = 内容宽度（content + padding + border）+ margin注意：IE盒模型的内容宽度包含了padding和border，w3c盒模型宽度就是内容宽度。详细解析：...原创 2020-05-07 12:39:21 · 708 阅读 · 0 评论 -
ES6数组遍历之forEach,map和filter
循环数组,通常使用的是for循环,去循环数组的下标,而在ES6中提供了一种新的方式进行遍历数组!在看这个之前我们先对比一下之前的遍历方式let phone = ['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];for(var i=0; i<=phone.length; i++){ console.log(phone[i])...转载 2020-05-06 14:19:50 · 1496 阅读 · 0 评论 -
CSS实现三列布局的3种方法及解析
CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right 绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right flex布局 .left{ width:200px; 或者 flex:0 0 200px;}.right{...原创 2020-05-05 13:08:48 · 4272 阅读 · 0 评论 -
CSS选择器优先级及解析
答案：!important > 内联样式(style) > ID选择器 > 类/属性/伪类 > 元素/关系详细解析：原创 2020-05-03 23:20:07 · 253 阅读 · 0 评论