前端面试题
前端面试题
半夜追风人
梦不追,不可为
展开
-
webpack5搭建vue3全家桶环境配置
1.配置文件const path=require('path')const {VueLoaderPlugin}=require('vue-loader')const HtmlWebpackPlugin=require('html-webpack-plugin')module.exports={ entry:'./src/app.js', mode:'development', devtool:'source-map', output:{ path:pa原创 2021-09-25 15:24:59 · 326 阅读 · 0 评论 -
19.js对象拷贝
直接上代码 function copy(obj){ //是对象进行递归拷贝 if (typeof obj ==='object' && obj!==null){ let Constructor=obj.constructor if (Constructor===Date){ return new Date(obj.getTime()) } if (Constructor===R原创 2021-09-24 12:15:24 · 60 阅读 · 0 评论 -
15.文档对象的load DOMContentLoaded readystatechange 三事件的调用顺序
1.document加载的过程中会不断修改document.readyState属性该属性标志着文档加载到哪个阶段了;其取值有:uninitialized:文档对象已存在,但未初始化loading:文档对象正在初始化loaded:文档对象加载完毕interactive:文档可交互了complete:文档加载资源完毕(如css、图片等)2.document在状态切换时会调用其绑定的readystatechange事件(按理说应该会调用四次,但往往只能调用两次,我估计是在绑定事件之前文档就已经加载原创 2021-09-24 10:40:24 · 195 阅读 · 0 评论 -
13.浏览器的事件循环 引入--异步--定义--常见宏、微任务
1.引入:由于JS是单线程语言,所以在执行代码的过程中,上面的代码没有执行完成,下面的代码就会一直等待;试想一下,如果我们在代码中发送请求获取数据,而由于网络慢等原因,该操作就比较耗时,如果要等该操作执行完再执行后续的代码,这显然是不合理的,cpu空出来了,利用率降低了,而代码的执行时间也增加了2.异步:(紧接上文)我们希望发送一个请求,而这个请求会在浏览器http异步请求的线程里去完成;发送请求以后,就立即执行下面的代码,而需要用到请求结果的代码,则等到请求完成后自动执行;没错,这就是异步的概念。总原创 2021-09-23 20:27:14 · 105 阅读 · 0 评论 -
12.区分数组和对象
方式1:Array.isArray(arr)方式2:arr instanceof Array //在原型链被修改的情况下不准确方式3:Object.prototype.toString.call(arr)==='[object Array]'instanceof原理:例如 a instanceof B主要是判断a的原型链上是否出现了B函数的prototype...原创 2021-09-23 19:38:54 · 44 阅读 · 0 评论 -
11.事件冒泡事件捕获
1.事件过程事件捕获---->事件执行---->事件冒泡2.事件捕获顺序从父元素向子元素的方向捕获3.事件冒泡顺序从子元素向父元素方向冒泡4.阻止事件冒泡和默认事件//阻止事件冒泡estopPopgation || e.cancelBubble=true//取消默认事件e.preventDefault || e.returnValue=false5.事件代理:将子元素的事件过程绑定到父元素上执行原理:通过e.target判断是哪个子元素,然后进行对应事件的编写6.原创 2021-09-23 19:22:50 · 89 阅读 · 0 评论 -
10.JS数组常用方法
第一类:修改原数组的方法:1.push:向数组末尾追加一个或多个元素2.pop:从数组末尾取出一个元素3.unshift:向数组前面添加一个或多个元素4.shift:从数组前面取出一个元素5.sort:将数组排序6.splice:截断并加入0个或多个元素第二类:不修改原数组的方法:1.slice:截取原数组,并返回2.join:以特殊符号连接数组元素,返回字符串3.find(fn):返回满足fn返回值条件的第一个元素4.findIndex(fn):返回满足fn返回值条件的第一个元素索原创 2021-09-21 21:55:46 · 54 阅读 · 0 评论 -
9.this是什么?为什么有this?以及call、apply、bind修改this
1.this是什么?答:this是执行上下文中的一个属性,在编写代码时,可以动态底让他指向我们需要的对象。2.为什么要有this?答:为了让代码更加灵活,在运行时可以让其变化指向3.执行上下文是什么?答:执行上下文可理解为 在执行某一段代码时,所生成的用于记录当前代码执行环境的对象。4.什么是执行环境?答:执行环境是代码在执行过程中某一刻计算机的状态【比如说:寄存器,cpu,内存 当前有哪些数据,状态是怎样的】5.JS执行环境有哪几种?答:1.全局上下文 2.函数上下文 3.eval上原创 2021-09-18 09:30:37 · 96 阅读 · 0 评论 -
6.HTML5常用拽API
废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5拖放API</title> <style> *{ margin: 0; padding: 0; } html,body{原创 2021-09-16 17:24:40 · 66 阅读 · 0 评论 -
5.JS实现简单拖拽效果
1.拖拽步骤描述:鼠标按下–>鼠标移动—>鼠标抬起(停止移动)2.实现步骤:监听鼠标在目标元素内的按下事件,按下就设置鼠标移动事 件,开始拖拽,当鼠标抬起时,取消移动事件3.代码如下://用到事件:onmousedown、onmousemove、onmouseup<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS实现简原创 2021-09-16 15:51:07 · 170 阅读 · 0 评论 -
3.手写Promise简单功能
1.Promise有三个状态 pending待决议 fulfilled成功 rejected失败,一旦改变不能再修改2.Promise构造函数接受一个函数,参数分别未resolve、reject两个函数,用于修改状态3.有一个then方法,接受两个回调,状态变化时调用相应的函数,并返回新的promise对象4.有一个catch方法,接收一个失败回调const PENDING="pending"const FULFILLED="fulfilled"const REJECTED="rejecte原创 2021-09-11 15:48:55 · 55 阅读 · 0 评论 -
webpack 动态链接库基础配置
1.webpack.config_dll.jsconst path=require('path')const DllPlugin=require('webpack/lib/DllPlugin')module.exports={ entry:{ vendors:['jquery'] }, mode:'development', output:{ filename:'[name]webpack.config.js', pat原创 2021-08-20 16:25:51 · 192 阅读 · 0 评论 -
webpack+vue3 入口文件实例化Vue,打包后白屏,不报错
’将 import Vue from 'vue'换成import Vue from 'vue/dist/index.js'即可,原因是 前者打包时打包的是vue的runtime文件原创 2021-08-16 18:50:31 · 166 阅读 · 0 评论 -
let obj={} 和 let obj=Object.create(null)
//Obj2比Obj1更空let obj1={};let obj2=Object.create(null);console.log(obj1);console.log(obj1.__proto__);console.log(obj2);console.log(obj2.__proto__);原创 2021-06-01 11:13:38 · 866 阅读 · 0 评论 -
部分JS作用域本质【读书有感】
JS作用域的本质:谈谈JS作用域的本质之前,先谈一下编程语言的功能是什么;编程语言的功能是什么,用来操作计算机,那么怎样操作计算机呢?无非就是让计算机按照我们的想法,去进行计算,然后得到结果;那么计算又是计算什么呢?当然是数据呀,那么数据存在哪里呢,当然是内存;因此,我将编程语言的功能理解为两部分:1.存取数据(将数据存入内存或者从内存中读出) 2.根据内存中的数据指导计算机做运算现在我们谈一下JS的作用域:上面说到:编程语言的剧本功能之一就是数据的存取,比如 var a=10,可以理解为在内原创 2021-05-31 17:53:23 · 88 阅读 · 0 评论 -
js类型转换 之 引用类型+引用类型=???
//判断下面语句的输出结果console.log({}+{});console.log([]+[])console.log({}+[])console.log(function(){}+function(){})首先淡定地来句:卧槽,怎么还有这些奇奇怪怪的操作,对象相加?没错,我也哭了!那么我们先来解析一下;先把这类题的规律丢在这儿:两个引用类型相加,会将操作数一个一个转为数字或者字符串再做加法运算;可能你会问,这怎么转?没错,我也问过,哈哈哈是这样的:js里的引用类型默认继承了Obj原创 2020-11-26 14:57:22 · 172 阅读 · 1 评论 -
前端:webpack常用插件
插件:1.什么是插件:用于扩展webpack的功能【每个插件的详细请自己去看文档】 注: loader其实也是一种插件,但它只专注于处理文件这一块 使用步骤:下载插件----->在webpack.config.js中的plugins[]中实例化----->配置插件[可选] ---->配置文件中导入require("插件名称")2.HtmlWebpackPlugin: 作用:自..原创 2020-11-16 22:55:17 · 235 阅读 · 0 评论 -
前端:带你入门Sass
1.SASS:一套利用Ruby语言编写的 最早最成熟 的 CSS预处理器 它扩展了CSS 语言,增加了 变量 混合 嵌套 函数 运算 等特性2.SASS有两种文件后缀 .sass(不需要写大括号,通过缩进来表示层级结构) 和 .scss(需要写大括号,以表示层级结构)3.sass中的变量: 3.1定义变量:$变量名:值;例如 $w:300px; 3.2使用变量: 例如:width:$w; 3.3特点:...原创 2020-11-16 15:55:41 · 191 阅读 · 0 评论 -
前端:Webpack入门
前端:webpack 基础0.ES6模块化 原生js:①export {需要暴露的数据} 和 import {需要导入的数据} from "模块路径" 【注意点:接收和暴露的名称必须一样】 注意:如果需要改变暴露数据名称 可用 import{暴露名称 as 需要名称} from '模块路径' ②export default 导出数据; import 接收数据 from '模块路径'【接收和导出名称可以不一样】 注意..原创 2020-11-16 15:53:39 · 63 阅读 · 0 评论 -
前端:Webpack常用loader
6.webpack loader 6.1默认情况下 webpack 只能对js进行打包,因为只有js有模块的概念 6.2开发过程中,我们可能会打包css 图片等文件,那么就得使用相应的loader,让这些文件也被 模块化 以便于webpack能够识别并打包7.file-loader:【注:简单拷贝的文件都可以用。例如:字体图标,只需要改变正则表达式即可】 作用:将require()或者import导入的文件 输出到目标文件夹,并将打包后 的..原创 2020-11-16 15:51:19 · 231 阅读 · 0 评论 -
我的状态码?不,是你的状态码
状态码200 成功202 只有响应头没有响应体206 返回指定范围的响应内容301永久重定向302临时重定向303临时get重定向304资源未改变 请使用缓存307 重定向时不会转为get方法来请求而301 302 303 重定向时,浏览器会转为get方式请求(虽然这是不符合标准的)400 请求失败(客户端请求报文中有错误)401 此次请求需要认证403 请求资源被服务器拒绝访问404 请求资源在该服务器上未找到500 表明服务器端出现了故障503 服务器超负载或正在停机维护中原创 2020-10-28 10:49:35 · 85 阅读 · 0 评论 -
maven定义和配置
学一样东西原创 2020-11-06 22:21:05 · 103 阅读 · 0 评论