- 博客(210)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 JS 哪些操作会造成内存泄露，对应的解决方法
一、内存泄漏二、哪些操作会造成内存泄漏1.意外的全局变量2、未清理的DOM元素引用3、被遗忘的定时器或者回调4、闭包5.、console.log三、怎样避免内存泄露
2022-06-05 20:57:51
1808
原创 JS为什么要延迟加载，有哪些方法可以实现延迟加载?
对于js的优化（关于js的延迟加载）的好处是有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件.HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。...
2022-06-05 14:04:05
3601
1
原创 JSON是什么？对JSON的简单理解
1.json是一种轻量级的数据交换格式，在与后端的数据交互中具有较为广泛的应用。2.在javaScript中，我们可以直接使用json，因为JavaScript中内置了json的解析，把任何的JavaScript对象变成json，就是把这个对象序列化成一个json格式的字符串，这样才能通过网络传递给其他计算机。如果我们收到json格式的字符串，只需要把它反序列化为一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。3.JSON 是适用于 Ajax 应用程序的一种有效格式，原因
2022-06-04 20:52:25
14785
4
原创 document.write、innerHTML、innerText的区别
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。.........
2022-06-04 20:23:28
613
原创 js中时间和时间戳的相互转换
Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth() 从 Date 对象返回月份 (0 ~ 11)。getFullYear() 从 Date 对象以四位数字返回年份。getYear() 请使用 getFullYear() 方法代替。getHours() 返回 Date 对象的小时 (0 ~ 23)。getMinut
2022-06-02 15:26:06
58622
原创 JS中绑定事件的5种方式——以按钮绑定点击事件为例
第一种和第二种的效果是一样，可以附加多个事件处理函数，并不是只有使用jquery才能做到。第三种方法不推荐使用，原则上HTML代码只能体现网页的结构，具体的行为应该使用javascript代码进行绑定。除非页面上绑定事件的元素超过上万个，否则响应速度的时候就不必纠结了，只做个事件绑定还是很快的。我测试了一下，使用addEventListener绑定3000次，耗时3-4毫秒。如果项目中统一使用jQuery的话，建议使用第一种做法，顺便还解决了IE的不兼容问题。......
2022-06-02 13:54:15
16114
3
原创 js中window.onload和jq中read函数区别
1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。2.编写个数window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。$(documrnt).ready()可以同时编写多个，并且都可以得到执行。3.多个的执行结果window.onload不能同时写多个，但是有多个时会执行，只是后执行的会将前一次执行的结果覆盖。
2022-06-01 15:03:24
419
原创 vue中路由守卫总结
一、 什么是路由守卫？在页面跳转时，提供拦截处理的功能。通常用于权限校验和登录判断等。1. 根据作用范围的大小，分为全局守卫、路由独享的守卫和组件内的守卫2. 根据作用顺序的前后，分为前置守卫、解析守卫、后置守卫等3. 全局守卫：每次页面跳转都会触发，无论哪个页面都会触发.代码写在`路由的index.js`或者`main.js`中。
2022-06-01 14:41:14
456
原创 前端常见安全问题及解决方法
目录一、XSS （Cross-Site Scripting）跨站脚本攻击二、CSRF (Cross-site request forgery) 跨站请求伪造三、iframe风险四、点击劫持五、第三方依赖包带来的问题六、https 存在的风险七、CDN劫持八、本地存储数据泄露防御措施总结一、XSS （Cross-Site Scripting）跨站脚本攻击定义：XSS（Cross Site Scripting，跨站脚本），即攻击者往 Web 页面里嵌入恶意的客户端
2022-05-31 16:00:18
3698
1
原创 vue中的修饰符
目录一、事件修饰符二、 v-model的修饰符三、键盘事件的修饰符四、element的修饰符 (面试回答加分)一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事
2022-05-30 14:42:44
359
原创 JS中检测数据类型的7种方法
目录一.JS中的数据类型：二、检测数据类型的方法：1、typeof 检测一些基本的数据类型2、A instanceof B检测当前实例是否隶属于某各类3、constructor构造函数4、hasOwnporperty检测当前属性是否为对象的私有属性5、is Array判断是否为数组6、valueOf7、Object.portotype.toString（最好的）一.JS中的数据类型：1） 简单类型：String、Number、Boolean...
2022-05-30 14:17:15
25010
1
原创 8种this指向问题汇总
目录1.作为对象方法被调用2. 作为普通函数被调用时3.作为构造函数被调用时4.箭头函数里面的this5.call&& apply&&bindcall或apply调用总结补充this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个最后调用它的对象1.作为对象方法被调用当函数作为对象方法被调用时this指向该对象 var obj = {
2022-05-29 11:39:04
461
原创 微信小程序的生命周期总结
什么是生命周期？生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从三个方面来介绍小程序的生命周期：（1）应用生命周期（2）页面生命周期（3）应用及页面生命周期的触发顺序一、应用生命周期App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数。onLaun...
2022-05-29 10:56:51
7781
原创 vue框架和react框架的区别以及各自的应用场景
一、框架简介React主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。React的官方网站提到了“学习一次，随处写作”这个关键功能，可以使用React框架在JavaScript中构建移动应用程序。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个...
2022-05-26 22:36:23
2479
原创 什么是Vue、Vue的特点、Vue的优点及性能优化、应用场景
一、什么是VueVue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架Vue在构建用户界面时，能够编写结构：vue提供指令、数据驱动视图构建页面的结构 美化样式：基础css样式即可美化 处理交互：基于vue提供的事件绑定，可轻松处理用户和界面之间的交互行为二、Vue的特点和优势vue两大特点：响应式编程、组件化。vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使
2022-05-26 22:22:47
18670
原创 vue可以绑定多个事件吗？代码说明
标签绑定一个事件处理函数，然后在相应的事件处理函数中调用想要触发的多个处理函数以下两种方案，都可以实施第一种<button id="test" @click="test1">按钮</button>new Vue({ el:"#test", data:"", methods:{ test1:function(){ alert("test1"); this.test2();
2022-05-25 16:15:28
1996
原创 CSS单位px、em、rem、vh、vw、vmin、vmax
一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从css3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示CSS单位相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%绝对长度单位 cm、mm、
2022-05-24 17:29:50
1439
原创 浏览器解析并渲染页面的过程
目录1、用户输入网址，浏览器发起DNS查询请求 2、建立TCP连接 3、浏览器向web服务器发送一个http请求 4、发送响应数据给客户端 5、浏览器解析http response（1）html文档解析（DOM Tree）（2）浏览器发送获取嵌入在html中的对象（3）css解析（4）js解析（5）回流和重绘1、用户输入网址，浏览器发起DNS查询请求用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP...
2022-05-24 16:50:21
550
原创 Js获取页面的各种宽高与距离
1、screen系列screen.width: 屏幕的宽度screen.height: 屏幕的高度2、style系列（必须是行内设置的样式才有效）element.style.width: 当前对象的宽度element.style.height: 当前对象的高度 ==》 jQ: $(obj).height(); 不包含补白和边框element.style.left: 当前对象的leftelement.style.right: 当前对象......
2022-05-23 17:03:18
3198
原创 vue常见的keep-alive问题
一、什么是keep-alive？keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。二、keep-alive的优点？在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性三、keep-alive有三属性include -字符串或正则表达，只有匹配的组件会被缓存max-数字，最多可以.
2022-05-23 16:30:17
1608
2
原创 js跨域相关面试题
一、什么是跨域广义的跨域包括：资源跳转：超链接跳转、重定向、表单提交 资源嵌入：link、ifram、script、img，以及css样式中的background：url()、@font-face()等外链接 脚本请求：js的ajax请求、js或DOM 中的跨域操作狭义的跨域：指浏览器同源策略限制的请求同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。当协议、子域...
2022-05-23 15:55:23
687
1
原创 Vue项目中有封装过axios吗？主要是封装哪方面的？
目录一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结 是一个轻量的 客户端基于 服务来执行 请求，支持丰富的配置，支持 ，支持浏览器端和 端。自2.0起，尤大宣布取消对 的官方推荐，转而推荐 。现在 已经成为大部分 开发者的首选。安装导入发送请求并发请求二、为什么要封装 的 API 很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次请求，就要把这些比如设置
2022-05-22 19:26:35
359
原创 【经典面试题】数据库常用的函数
目录一、字符函数：二、数字函数：三、日期函数：一、字符函数：ASCII(X)返回字符X的ASCII码CONCAT(X,Y)连接字符串X和YINSTR(X,STR[,START][,N)从X中查找str，可以指定从start开始，也可以指定从n开始LENGTH(X)返回X的长度LOWER(X)X转换成小写UPPER(X)X转换成大写LTRIM(X[,TRIM_STR])把X的左边截去trim_str字符串，缺省截去空格RTRIM(X[,TR
2022-05-22 16:42:25
362
原创 【经典面试题】vue2、vue3、uni-app用法上有什么区别
一、uni-app 和 Vue2 的区别1、组件/标签的变化以前是html标签，现在是小程序标签。div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video这些还在。 select 改成 picker iframe 改成 web-view ul、li没有
2022-05-22 16:12:22
4203
原创 【经典面试题】axios封装时请求拦截器跳转到登录页怎么实现？
axios拦截器（Interceptors）主要分为：（1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers（2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。代码演示// 导入axiosimport axios from "axios";import { MessageBo
2022-05-22 15:15:36
2927
原创 【经典面试题】websocket是什么，怎么实现消息暂存？
一、什么是WebSocket首先需要明白webSocket的概念，下边是维基百科的解释WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。首先，要明白WebSocket是一种通信协议，区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信。
2022-05-22 14:54:21
6064
原创 【经典面试题】js深拷贝浅拷贝区别，怎么实现深拷贝
目录一、区别浅拷贝（shallow copy）：深拷贝（deep copy）二、实现方法：浅拷贝1、直接赋值法深拷贝1、Object.assign()2、转成JSON3、递归4. 通过jQuery的extend方法实现深拷贝5. lodash函数库实现深拷贝一、区别浅拷贝（shallow copy）：复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；浅拷贝就是只拷贝一层，更深层次对象级别只拷贝引用（地址）当拷贝...
2022-05-19 11:20:43
676
原创 【经典面试题】v-if和v-for为什么不能同时使用，以及解决办法
原因：由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降解决方案：第一种：将 v-if 和 v-for 分别放在不同标签中<ul v-if="active"> <li v-for="(item, index) in list" :key="inde"> <p>{{item.name}}</p&
2022-05-19 10:12:43
933
原创 【经典面试题】vue2与vue3的区别
目录一. vue2和vue3双向数据绑定原理发生了改变二. Vue3支持碎片(Fragments)三. Composition API四. 建立数据 data五. 生命周期钩子 — Lifecyle Hooks六.父子传参不同，setup() 函数特性七. vue3 Teleport瞬移组件一. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订
2022-05-19 09:22:39
26390
1
原创 【经典面试题】不固定宽高的div水平垂直居中的3种方法
目录一. 固定宽高div进行水平垂直居中二.不固定宽高的div进行水平垂直居中1、定位的方法2、使用display:table-cell方法3、利用弹性布局一. 固定宽高div进行水平垂直居中 .son { position: absolute; background: green; margin:auto; left: 0; top: 0;..
2022-05-18 21:49:22
1530
原创 【经典面试题】伪数组是什么？伪数组与数组的区别，将伪数组变成真数组
了解伪数组之前先了解下普通的数组1、普通数组数组是用来存储一系列值的一个集合，而每个值在数组里面都有一个对应的索引，也可以叫做下标，索引是从0开始的，依次递增。比如：let arr = ['a','b','c'];// 字符串a，b，c对应的下标分别为0， 1， 2，使用 数组名字[索引] 的方法即可取到对应的值。2、什么是伪数组像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组， 不具有数组所具有的方法3、常...
2022-05-18 21:23:23
506
原创 前端代码规范--- html、css、less、js
程序员写好看的代码，不亚于写一行好看的字好看的代码总是让人心旷神怡，不好，不规范的代码，让人看了只想摇头，那我们就来学习一下规范的代码怎么写的吧一、命名规范(一) 项目命名全部采用小写的方式 以中划线分割正确命名：mall-management-system(商城管理系统)错误命名：mall-management-system或mallManagementSystem(二) 目录命名全部采用小写的方式 以中划线命名 复数时，要采用复数结构正确命名：sctipts...
2022-05-18 20:31:39
641
2
原创 大数据可视化—Echarts的基本使用和基本配置详情
一、数据可视化相关库介绍D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案 等等 Highcharts 和 Echarts 就像是 Office 和 WPS 的关系ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行
2022-05-18 20:00:10
881
原创 【经典面试题】Vue中computed和watch的区别
vue 的 computed 和 watch 要在哪些场景下使用，其实也就是在问他们的区别。一、computer当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。代码演示<p id="app"> {{fullName}} </p><script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo',
2022-05-18 19:35:11
1047
原创 【经典面试题】let和const的区别
var 命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。使用var关键字声明的全局作用域变量属于 window 对象:可以使用 window.carName 访问变量var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。ES6声明变量的六种方法ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，还有import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。le..
2022-05-17 16:47:32
338
原创 【经典面试题】Promise 中reject 和 catch 处理上有什么区别？
//第一种promise.then((res) => { console.log('then:', res);}).catch((err) => { console.log('catch:', err);})//第二种promise.then((res) => { console.log('then:', res);}, (err) => { console.log('catch:', err);})第一种 catch 方法可以捕.
2022-05-17 16:22:55
1467
原创 【经典面试题】delete和Vue.delete的区别
delete和和Vue.delete都是对数组或对象进行删除的方法。这两种方法对于对象来说其实是没有区别的，使用方法会直接删除对象的属性（物理删除）let obj = {name: 'fufu', age: 20}// delete obj.age => {name: 'fufu'}// Vue.delete(obj, 'age') => {name: 'fufu'}// 测试发现对于对象来说delete和Vue.delete是没有任何区别的但是这两种方法对于数组来说
2022-05-17 16:08:38
3856
4
原创 【经典面试题】如何使用js实现省市区三级联动
目录一、省市区数据获取二、遍历省级数据三、二级联动的实现四、三级联动的实现一、省市区数据获取链接: https://pan.baidu.com/s/1AqXINno57a3og0oVYZCn0g?pwd=6beh 提取码: 6beh效果展示二、遍历省级数据 1.导入数据 2.在body标签创建三个下拉框 3.分别获取这三个下拉框 4.遍历数据 5.添加到省级下拉框中代码实现二级联动在遍历省级基础上又多了些步骤具体实现步骤...
2022-05-17 11:04:01
1398
原创 【经典面试题】js防止重复点击、防止点击过快的方法
若用户疯狂点击提交按钮，请求很多次，生成好多条数据，为了解决这种问题，通常采用以下两种简单两种方法1.可以添加一个开关,让这个开关默认为true，第一次点击将其变为false,点击事件的执行需要判断这个开关是否为true(例如有了请求结果然后在设置为true)，为true执行,false不执行 var isclick = true; function fn(){ if(isclick){ isclick = false;
2022-05-17 10:44:04
9089
1
面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典
2022-04-23
WEB前端开发常用英语单词和语句汇总， 里面包含web前端开发常用的英语单词和常用语句，掌握好英语对编程有事半功倍的效果
2022-04-10
大数据可视化20个demo源码，包含Html文件，css文件，js文件，还有部分框架源码
2022-04-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人