前端面试题库
前端面试题
刚上道的小白_
这个作者很懒,什么都没留下…
展开
-
路由传参两种形式
路由传参两种形式1、name可以和params、query都可以一起使用;2、path只能和query使用;3、使用params传参 刷新后不会保存,使用query刷新后可以保存;4、params不会在地址栏显示,query会在地址栏显示;5、params能和动态路由一起使用,而query不能...原创 2020-10-27 09:11:50 · 1054 阅读 · 0 评论 -
vuex
vuex一、vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式二、Vuex核心statestate是专门用来存放数据的Gettersgetters就是计算属性,比如说 ,购物车里面的总价需要计算,就可以放在getters里面进行计算Mutationsmotations是同步操作,vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutationactionaction是异步操作 ,用来解决异步流程来改变state数据原创 2020-10-26 20:07:42 · 219 阅读 · 0 评论 -
Vue组件通信(父传子、子传父、兄弟通信)
Vue组件通信(父传子、子传父、兄弟通信)一、父传子在父组件中,给子组件绑定一个属性,这个属性上需要挂载传递的值 , 然后在子组件中用prop来接收数据二、子传父在父组件中给子组件绑定一个自定义事件 ,给这个事件上挂载需要调用的方法 ,然后再子组件中用$.emit来调用这个方法,并传参。三、兄弟通信先创建一个空的vue实例通过$.emit传入数据到空的vue实例中再用$.on 来接受数据...原创 2020-10-26 11:39:02 · 179 阅读 · 0 评论 -
Vue生命周期的执行过程(极简版)
beforeCreated$elcreatedbeforeMountmountedbeforeUpdateupdateddestroydestroyed原创 2020-10-26 10:59:40 · 128 阅读 · 0 评论 -
v-if与v-show的区别
v-if与v-show的区别一、相同点都可以控制DOM元素的显示或隐藏二、区别v-if : 判断dom元素是否显示或隐藏domv-show :判断dom是否显示或隐藏三、性能对比v-if : 有更高的切换消耗v-show :有更高的渲染消耗四、使用场景v-if : 适合运营条件不大可能改变的场景下v-show : 适合频繁切换v-if 用在 比如说在详情页面购物车按钮那 , 会显示数量 ,如果购物车里面有数据,那么他会很正常的显示出来 ,但如果购物车没有数据原创 2020-10-26 10:52:58 · 139 阅读 · 0 评论 -
vue常用的指令
vue常用的指令v-model : 双向数据绑定v-for : 循环v-show : 显示内容v-hide : 隐藏内容v-if : 显示与隐藏v-bind :动态绑定,可以缩写为:v-text :解析文本v-html : 解析html标签v-on:click : 给标签绑定函数,可以缩写为@...原创 2020-10-26 10:29:30 · 147 阅读 · 0 评论 -
原型&原型链
原型&原型链一、原型在javaScript每个函数都有一个prototype属性,这个属性就叫原型二、原型链当一个对象调用自身不存在的属性/方法时,那么它会去它的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。...原创 2020-10-23 10:39:47 · 133 阅读 · 0 评论 -
HTML5和css3新特性
HTML5和css3新特性css新特新:属性选择器属性选择器分为三种:1、基本选择器 2、伪类选择器3、伪元素选择器边框背景边框:1、border-radius 圆角2、border-image 边框背景背景:1、background-size 背景图片大小2、background-color 背景颜色文本效果text-shadow 向文本添加阴影text-justify 规定当 text-align 设置为 “justif原创 2020-10-23 10:14:58 · 211 阅读 · 0 评论 -
前端常见的浏览器兼容性问题及解决方案
常见的浏览器内核:常见的浏览器内核可以分四种:Trident、Gecko、Blink、WebkitIE浏览器 Trident内核,也成为IE内核Chrome浏览器 Webkit内核,现在是Blink内核Firefox浏览器 Gecko内核,俗称Firefox内核Safari浏览器 Webkit内核Opera浏览器 最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;常见的兼容性问题:不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不原创 2020-10-22 15:34:18 · 671 阅读 · 3 评论 -
link与@import区别
link与@import区别区别:link属于html标签。@import在css中使用表示导入外部样式表;页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别,而link是HTML标签,无兼容问题;link方式的样式的权重 高于@import的权重;link 支持使用javascript改变样式 (document.styleSheets),后者不可...原创 2020-10-20 19:43:45 · 148 阅读 · 0 评论 -
简述一下src与href的区别
简述一下src与href的区别scr : 指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置href :指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。...原创 2020-10-20 19:37:11 · 249 阅读 · 0 评论 -
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
span a b i img input select strong原创 2020-10-20 19:32:47 · 272 阅读 · 0 评论 -
常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)
常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局)1. 两栏布局左边左浮动 , 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响2.圣杯布局两侧固定宽度,中间自定义比如一个大盒子里面嵌套了三个小盒子,分别为左边右边和中间先给大盒子一个paddind:0 200px左/右边分别为200px中间100%宽度里面的小盒子都浮动 (这个时候中间的盒子撑满了一行,把两个小盒子撑到下面)给左边小盒子 margin-left : -100% (这个时候左边小原创 2020-10-20 12:09:50 · 298 阅读 · 0 评论 -
清除浮动4种方式
清除浮动4种方式1、加一个额外的标签 (不推荐使用)2、父级添加overflow方法3、使用after伪元素清除浮动4、使用after和before伪元素清除浮动 (比较常用)原创 2020-10-20 11:46:50 · 169 阅读 · 0 评论 -
盒模型
盒模型1、什么是盒模型在html中,每个div都是一个盒子。盒模型是由 内容区域 + 内边距 + 边框 + 外边距组成的2、盒模型分为那两种标准盒模型 (width+ border + padding + margin)怪异盒模型 (width + margin)3、标准、怪异盒模型的转换box-sizing:content-box (采用标准盒模型)box-sizing:border-box (采用怪异盒模型)4、获取box的高度/宽度window.g原创 2020-10-20 11:40:20 · 115 阅读 · 0 评论 -
BFC
BFC1、什么是BFC?BFC是块级格式化上下文,也是一块独立的布局环境。内部元素不影响外部,外部也不影响内部。2、什么情况下会产生BFCoverflow:auto/hiddenposition:absolute/flxedfloat:left/rightdisplay:flex3、BFC应用于什么地方自适应布局清除浮动解决垂直边距重叠...原创 2020-10-20 11:27:25 · 113 阅读 · 0 评论 -
vuejs中虚拟DOM及diff算法
vuejs中虚拟DOM及diff算法虚拟DOM及diff算法虚拟DOM(virtual dom)用一个简单的对象去代替复杂的dom对象,存储了对应dom的一些重要参数,在改变don之前,会先比较相应虚拟dom的数据,如果需要改变,才会将改变应用到真实dom上Diff算法(差异算法)Diff算法(差异算法):可以用新渲染的对象树去和旧的树进行对比,记录这两棵树差异,记录下来的不同就是我们需要对页面真正的DOM操作,然后把它们应用在真正的DOM树上,页面就变更了,这样就可以做到:视图的结构确实是原创 2020-09-21 08:41:03 · 132 阅读 · 0 评论 -
vue自定义过滤器filter
vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })12原创 2020-09-21 07:59:31 · 306 阅读 · 0 评论 -
Vue Virtual Dom 和 Diff原理(极简版)
vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念:用js来模拟DOM中的节点。传说中的虚拟DOM。再来一张图: 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念:diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。换句人话diff的过程就是调用名为patch的原创 2020-09-21 07:56:56 · 201 阅读 · 1 评论 -
vue中如何自定义指令directive
vue中如何自定义指令directive背景除了核心功能默认内置的指令 (如v-model 和 v-show等),Vue 也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: {原创 2020-09-21 07:54:22 · 293 阅读 · 0 评论 -
vue自定义指令的应用场景
使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的 DOM 变动,还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&原创 2020-09-21 07:49:43 · 195 阅读 · 0 评论 -
vue组件封装
你封装过组件吗??说一下组件封装????你在项目中是如何封装组件的?????…以上问题是面试官,最常问到的问题?那么你应该如何回答呢?答:我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组.原创 2020-09-17 22:19:06 · 184 阅读 · 0 评论 -
vue中事件修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件原创 2020-09-17 22:14:14 · 1707 阅读 · 2 评论 -
Vue双向数据原理
双向数据原理采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调双向数据流程1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3、实现一个Watcher,作为连接Observer和Compile的原创 2020-09-17 07:48:00 · 408 阅读 · 0 评论 -
vue的常用指令
vue的常用指令v-text指令:用于更新标签包含的文本,它的作用跟双大括号效果是一样的。v-html指令:绑定一些包含html代码的数据在视图上,例如Daisy,这个字符包含了标签,要想不被当做普通的字符串渲染出来,发挥应有的效果,我们就得使用v-html指令 。例如下面的写法,name里面的Daisy外层套上**,用v-html指令后**的功能效果就会正常被渲染出来,从而不会当做字符串被解析出来。********v-show指令:指令的取值为true/false,分别对应着显示/隐原创 2020-09-16 21:55:55 · 161 阅读 · 0 评论 -
Vue生命周期的执行过程(极简版)
Vue生命周期的执行过程(极简版)简单粗暴的答案直接走起:1、创建vue实例,new Vue();2、在创建Vue实例的时候,执行了init(),在init(初始化)过程中首先调用了beforeCreate钩子函数;3、同时监听data数据,初始化vue内部事件,进行属性和方法的计算;4、以上都干完了,调用Created钩子函数(一般axios请求会在这个周期内进行);5、模板编译,把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况:1)实例内部有template属性原创 2020-09-15 21:20:58 · 109 阅读 · 0 评论 -
v-if与v-show的区别
v-if与v-show的区别一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的二、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;例如:v-if:在请求后台接口,用接口返回数原创 2020-09-15 21:19:49 · 123 阅读 · 0 评论 -
axios封装与api接口管理
axios封装与api接口管理一、前言axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库二、axios封装步骤安装axios原创 2020-09-15 08:17:21 · 157 阅读 · 0 评论 -
事件模型
事件模型:1、DOM 0 级模型DOM 0 级模型叫原始事件模型,在这个模型中,事件不会传播,即没有事件流的概念;一、 HTML 代码中直接绑定:<input type='button' onclock='fun()'>1二、 通过js代码指定的属性var btn = document.getElementById('.btn')btn.onClick= fun12移除监听函数btn.onClick = null1IE 事件模型:IE事件模型有两原创 2020-09-13 22:01:11 · 144 阅读 · 0 评论 -
事件监听
事件监听 和 事件模型一、事件监听1、行内绑定行内绑定:在HTML 的标签中通过onclick属性进行绑定,绑定方式为:on+ 事件名称, 在将所触发你事件赋值给该属性<button onclick='onClick()'></button>2、 使用元素进行事件绑定使用element.onclick 进行 事件绑定,通过操作DOM元素,为DOM绑定事件【使用形式同行内绑定】window.onload = function (){ let btn = doc原创 2020-09-13 21:56:58 · 164 阅读 · 0 评论 -
垃圾回收 及 内存泄漏
垃圾回收 及 内存泄漏1、垃圾回收的策略通常有两中——标记清除 和 引用计数2、js中最常用的垃圾收集方式是标记清除。但是COM对象(BOM和DOM对象就是使用C++以COM对象的形式实现的)垃圾收集机制采用的就是引用计数策略。使用标记清除的方式,不会引起内存泄漏的问题(哪怕对象相互引用也没有关系)。因为变量离开执行环境就会被回收。现在的浏览器基本不用引用计数,只有早期的ie中com对象是使用引用计数的,现在应该都是使用标记清除,所以不要考虑内存泄漏的问题。3、使用引用计数策略, 在函数原创 2020-09-13 21:26:57 · 141 阅读 · 0 评论 -
javaScript的设计模式
javaScript的设计模式一、什么是设计模式?是一套被反复使用,多数人知晓的,经过分类的,代码设计经验的总结。换言之,就是用 “套路” 做事情。二、什么是模式?模式是一种可以复用的解决方案。模式是指从生产和生活经验中经过抽象和升华提炼出来的核心知识体系。设计模式三大好处模式是已经验证的解决方案模式很容易被复用模式富有表达力三、设计模式分类创建型设计模式说明:专注于处理对象创建的机制,以合适的方式创建对象,以此来降低创建对象过程的复杂性。包含:Constru原创 2020-09-13 21:02:17 · 77 阅读 · 0 评论 -
js中事件委托
**js中事件委托****概念事件的委托是指利用冒泡的原理,把事件加到父级上,触发执行效果。好处:提高性能案例首先看不使用事件委托时的代码 如下:<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { list-style: none;原创 2020-09-10 22:02:42 · 535 阅读 · 0 评论 -
js数组扁平化
**js数组扁平化**数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。var arr = [1, [2, [3, 4]]];//扁平化之后:[1,2,3,4];实现基本方式对数组的每一项进行遍历。判断该项是否是数组。如果该项不是数组则将其直接放进新数组。是数组则回到1,继续迭代。当数组遍历完成,返回这个新数组。1. reduce遍历数组每一项,若值为数组则递归遍历,否则concat。function flatten(arr原创 2020-09-10 21:35:19 · 112 阅读 · 0 评论 -
js数组去重
**js数组去重**1、 ES6-set使用ES6中的set是最简单的去重方法该方法可以说是最完美的方法,就是需要环境支持ES6var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr原创 2020-09-09 22:36:08 · 102 阅读 · 0 评论 -
js中数组排序(冒泡、快速、插入)
**js中数组排序(冒泡、快速、插入)**1.冒泡排序法function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ //把大的数字放到后面 var st原创 2020-09-09 22:20:32 · 108 阅读 · 0 评论 -
ES6数组中的方法
一、fromArray.from的设计目的是快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。二、of当参数个数大于1时,Array() 才会返回由参数组成的新数组。当参数个数只有一个时,实际上是指定数组的长度。Array.of 总是返回参数值组成的数组。如果没有参数,就返回一个空数组。三、copyWithin可以在当前数组内部,将指定位置的数组项复制到其他位置,会覆盖原数组项,然后返回当前数组。使用该方法会修改当前数组。它接受三个参数: target(必需):从该位原创 2020-09-08 22:43:48 · 167 阅读 · 0 评论 -
ES5中数组的方法
**ES5中数组的方法**ES5中数组的方法都有:indexOf、forEach、map、every、some、filter、reduce一、indexOf方法查找数组内指定元素的位置,查到第一个值时返回其索引,没查到返回-1.lastIndexOf(element)为倒序查找二、forEach方法遍历当前数组,参数为一个回调函数,回调有三个值:1、当前元素2、当前元素索引值3、整个数组.forEach(function(e,index,arr){});三、map原创 2020-09-08 21:46:21 · 1475 阅读 · 0 评论 -
generator(特点,项目应用)
**generator(特点,项目应用)**特点:function 关键字与函数名之间有一个*号;Generator函数内部使用yield表达式,定义内部的不同状态;Generator函数调用不像普通函数那样直接调用,要想函数执行必须调用遍历器对象的next方法,也就是说想要执行函数就需要使用next方法,调用一次next方法执行一次yield表达式,直到执行完yield表达式。function* gener(){ yield "开始" yield "停止" yie原创 2020-09-06 21:44:12 · 169 阅读 · 0 评论 -
async,await(特点,项目中如何应用)
**async,await(特点,项目中如何应用)**async用于申明一个function是异步的,而await用于等待一个异步方法执行完成。await是个运算符,用于组成表达式,await表达式的运算结果取决于它等的东西。async/await是一个用同步思维解决异步问题的方案(等结果出来之后,代码才会继续往下执行)async function语法:自动将常规函数转换成Promise,返回值也是一个Promise对象只有async函数内部的异步操作执行完,才会执行then方法指定的回原创 2020-09-06 21:30:22 · 369 阅读 · 0 评论