浏览器相关
有哪几种浏览器,它们的内核是
浏览器有ie /safari/ chrome /mozilla firefox /opera
对应的内核有:ie----trident safari/chrome---webkit mozilla firefox---gecko opera---presto
说下对浏览器内核的理解
浏览器内核主要包括以下三个技术分支:排版渲染引擎、 JavaScript引擎,以及其他。
排版渲染引擎:主要负责取得网页的内容(HTML、XML、图像等)、整理信息,以及计算网页的显示方式,然后输出至显示器
JavaScript引擎:是用来渲染JavaScript的,JavaScript的渲染速度越快,动态网页的展示也越快
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
1.浏览器根据请求的URL交给DNS域名解析,找到真实IP;
2.浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后,再次向服务器发送了确认信号,然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;
4.服务器处理请求并返回HTTP报文(HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。):
a…服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
b.服务器将得到的 HTML 文件发送给浏览器;
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
d在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML 。
5.断开连接
浏览器缓存有哪些
sessionStorage/localStorage/cookie
数据存放有效期
sessionStorage:仅在当前浏览器窗口关闭之前有效,浏览器关闭就没了
localStorage:始终有效,窗口或者浏览器关闭也保存,所以叫持久化存储
cookie只在设置的cookie过期时间之前有效,即使窗口或浏览器关闭也有效
过期时间设置
sessionStorage/localStorage不可以设置过期时间
cookie有过期时间,可以设置过期时间(把时间调整到之前的时间,就过期了)
存储大小
cookie存储量最大不能超过4k
sessionStorage/localStorage不能超过5M(localstorage大小有点争议,另外一个地方我看到的说说是10mb,不知道谁为准)
注意:不同的浏览器存储的大小是不同的,会有影响
http状态码有哪些,有哪些
1xx代表临时响应并需要请求者继续执行操作的状态码
100,服务器已收到请求的第一部分,正在等待其余部分
2xx表示成功处理了请求的状态码
200,成功处理了请求
202,服务器已接受请求,但尚未处理
3xx重定向,要完成请求,需要进一步操作
304,自上次请求后,请求的网页未修改过
4xx 请求出错,妨碍了服务器的处理
400 服务器不理解请求的语法
401 未授权,需要进行身份验证
404 找不到请求的网页
5xx服务器错误,服务器在处理请求时发生内部错误
500 服务器内部错误
http与https的区别
HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
HTTP 的连接很简单,是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
前端三要素是
html 结构,超文本标记语言,决定网页的结构和内容
css表现,层叠样式表,设定网页的表现样式
js,行为,弱类型的脚本语言,源码不需要经过编译,由浏览器解释运行,用于控制网页的行为。
强缓存、协商缓存、cdn缓存
http2
三次握手与四次握手
跨域(jsonp/cors)
跨域时如何处理cookie
垃圾回收机制
网络安全
https
什么是xss以及如何防止它
什么是csrf以及如何预防它
为什么会引起csrf攻击
事件循环-----涉及宏任务、微任务、ui渲染等的执行顺序
Vue部分
Vue中的v-if和v-for为什么不能一起用
v-if 指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 true值的时候被渲染
v-for 指令基于一个数组来渲染一个列表, 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化
v-if与v-for都是vue模板系统中的指令,在vue模板编译的时候,会将指令系统转化成可执行的render函数
v-for优先级比v-if高, v-if 将分别重复运行于每个 v-for 循环中
所以,不推荐v-if和v-for同时使用
Vue的三种常用传值方式
父组件向子组件传值,在子组件中通过props传递过去的数据
子组件向父组件传值,在子组件中定义数据,使用$emit来进行自定义事件的触发及事件的发送
非父子组件传值,公共的vuex来进行传递值和获取值,或者用localsstorage来传值和取值
通过vuex来进行传递或者获取值,在state中定义变量,对变量值进行修改通过mutations,比如点击按钮进行加减,对变量值进行变异使用getters,比如变量初始值为100,修改后为10000,有异步使用action
兄弟组件之间
兄弟组件指的是平级之间的组件,他们中得传值方式比较多
1.第一种是属于一种比较麻烦的方法,可以将值先传给父组件,再通过父组件传值给子组件得传值方式传值给另一个子组件
2.可以使用Bus事件总线,创建一个中转站来进行传值。
组件之间如何通信
父子组件之间如何通信
组件间传递数据
父组件向子组件传递数据,使用props属性;子组件向父组件中传递数据,在子组件中使用$emit派发事件,父组件中使用v-on
监听事件;缺点:组件嵌套层次多的话,传递数据比较麻烦。
祖先组件通过依赖注入(inject / provide)的方式,向其所有子孙后代传递数据;缺点:无法监听数据修改的来源,不支持响应式。
通过属性$root / $parent / $children /
ref,访问根组件、父级组件、子组件中的数据;缺点:要求组件之间要有传递性。
通过事件总线(event bus)的方式,可以实现任意两个组件间进行数据传递;缺点:不支持响应式,这个概念是vue1.0版本中的,现在已经废弃。
通过 VueJs 的状态管理模式 Vuex,实现多个组件进行数据共享,推荐使用这种方式进行项目中各组件间的数据传递。
vue中的父组件及子组件生命周期的执行顺序
什么是MVVM
MVVM 是Model-View-ModelView的缩写,是一种脱胎于 MVC 模式的设计模式。
2.Model 代表数据层,负责存放业务相关的数据;
3.View 代表视图层,负责在页面上展示数据;
4.ViewModel 是的作用是同步 View 和 Model 之间的关联,其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化,并会选择性的传给 Model;Data Bindings 工具用于监听 Model 数据变化,并将其更新给 View。
MVC:MVC是Model-View- Controller的简写,即模型-视图-控制器,M和V和MVVM中的M和V是一样的。C是Controller即页面义务逻辑。区别。MVC是单向的数据传递。MVVM是双向的数据绑定,解决了MVC中大量的DOM操作使页面的渲染性能降低,加载速度变慢,影响用户体验。
为什么使用MVVM
低耦合-----视图view可以独立于model数据的变化和修改
可复用----你可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑
独立开发------开发人员可以专注于业务逻辑和数据的开发(ViewMode),设计人员可以专注于页面设计
可测试-----现在可以针对ViewModel来写测试
什么是Vue
Vue是一套用于构建用户界面的渐进式JavaScript框架
与传统JS和JQuery框架不同,Vue的渐进式框架,开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台。
Vue渐进式框架的核心概念:组件化,MVVM,响应式,和生命周期
Vue的优缺点
优点:轻量级、易上手、高性能、便于测试,移动优先(更适合移动端, 比如移动端的Touch事件)
缺点:生态环境不够完善
vue组件中data为什么是一个函数
javascript的特性导致,在component中,data必须以函数的形式存在,不可以是对象
组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都要自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。
写成对象形式,就是所有的组件实例共用了一个data,这样一个修改等于全部都改了
案列对比:图1图二对比
![](https://i-blog.csdnimg.cn/blog_migrate/8a54710672ac5a8494d8075c41a2416a.gif)
<template>
<!-- 组件页 HelloWorld页面 -->
<div class="hello">
<button @click="count++">+</button>
<h2>count:{{count}}</h2>
<button @click="count--">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
//data为一个函数时,组件里的count各自独立
data(){
return{
count:0
}
}
}
</script>
<style scoped>
</style>
<template>
<div id="app">
<hello-world></hello-world>
<br/><br/>
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: "App",
components:{
HelloWorld
},
data() {
return {
};
},
}
</script>
<style>
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/aefc7f16404cd4f97122d948ecd3d392.gif)
<template>
<!-- 组件页 HelloWorld页面 -->
<div class="hello">
<button @click="count++">+</button>
<h2>count:{{count}}</h2>
<button @click="count--">-</button>
</div>
</template>
<script>
// data为一个对象时
const data = {count:0}
export default {
name: 'HelloWorld',
data(){
return data;
}
}
</script>
<style scoped>
</style>
<template>
<div id="app">
<hello-world></hello-world>
<br/><br/>
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: "App",
components:{
HelloWorld
},
data() {
return {
};
},
}
</script>
<style>
</style>
Vue 中 methods,computed, watch 的区别
computed:
有缓存性,依赖于属性值,属性变化才会重新计算
methods:
没有缓存性,只要调用就会执行
watch:
没有缓存性,监听属性,当属性发生改变就会被调用
vue路由传参到底有几种方式
有两种:
query和params
query和params的区别:
params传参只能由name引入路由,如果写成path页面会显示undefined报错。
query传参的话可以使用path也可以使用name引入路由,不过建议使用path引入路由。
Vue-router 路由有哪些模式?
一般有两种模式:
hash 模式:监听hashchange事件实现前端路由,利用url中的hash来模拟一个hash,以保证url改变时,页面不会重新加载。
history 模式:利用pushstate和replacestate来将url替换但不刷新,但是有一个致命点就是,一旦刷新的话,就会可能404,因为没有当前的真正路径,要想解决这一问题需要后端配合,将不存在的路径重定向到入口文件。
GET和POST的区别
1、url可见性:
get,参数url可见; post,url参数不可见
2、数据传输上:
get,通过拼接url进行传递参数; post,通过body体传输参数
3、缓存性:
get请求是可以缓存的 post请求不可以缓存
==4、传输数据的大小: ==
get一般传输数据大小不超过2k-4k(根据浏览器不同,限制不一样,但相差不大)
post请求传输数据的大小根据php.ini 配置文件设定,也可以无限大。
keep-alive 的作用
1、 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果 之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候 会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索 的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.
2、 在 router-view 上使用可以缓存该路由组件
3、 有两个参数 include - 字符串或正则表达,只有匹配的组件会被缓存 exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
promise 是什么?有哪些状态和参数?如何使用?
1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作 promise,帮助我们处理队列
promise 有三个状态:
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
resolve与reject两种参数
resolve 作用是,将 Promise 对象的状态从“未完成”变为“成功”(即 从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果, 作为参数传递出去;
reject 作用是,将 Promise 对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错 误,作为参数传递出去
当 promise 状态发生改变,就会触发 then()里的响应函数处理后续步骤;
Promise 对象的状态改变,只有两种可能: 从 pending 变为 fulfilled 从 pending 变为 rejected。
这两种情况只要发生,状态就凝固了,不会再变了。
常见的修饰符
Vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个:
1:stop:阻止冒泡(通俗的讲就是阻止事件向上级DOM元素传递)
2:prevent:阻止默认事件
3:capture:捕获冒泡,即有冒泡发生时,有此修饰的DOM元素会先执行,如果有多个就从外向内依次执行,然后再按照自然顺序依次执行。
4:self:将事件绑定到自身,只有自身触发时才能触发,通常用于避免冒泡事件的影响。(官网) 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此, 用 v-on:click.prevent.self 会阻止所有的点击, 而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5:once:设置事件只能触发一次
6:passive尤其能够提升移动端的性能,滚动事件的默认事件,即滚动行为,滚就会触发。
7按键修饰符:keydown和keyup 键盘事件。(keycode)
vue 自定义指令如何使用
【全局指令】 使用 Vue.diretive()来全局注册指令。
【局部指令】 也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的选项。
【bind】只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在 绑定时执行一次的初始化动作。
【update】 所在组件的VNode更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略 不必要的模板更新。
【unbind】 只调用一次,指令与元素解绑时调用。
生命周期有几个,他们的作用是什么
new Vue() ---创建了一个Vue的实例对象
init--表示,刚初始化一个Vue空的实例对象,这个时候,这个对象身上,只有默认的一些生命周期函数和事件,其他东西都来创建
befotrecreate:生命周期函数执行的时候,data和methods中的数据都还没有初始化
created: data和methods已经被初始化好了,如果要调用methods中的方法或者操作data中的数据,最早,只能在created中操作。
beforeMount:此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时,页面还是旧的
Mounted:内存中编译好的模板,已经挂载到页面上了,用户可以看见了
beforeUpdate:当执行beforeupdate时,页面中的显示数据,还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步
updated:执行时,页面和data数据已经保持同步,都是最新的
beforeDestory:执行时,组件身上所有的data和所有methods以及过滤器指令等,都处于可用状态,还没有真正执行销毁过程
Destoryed:执行时,组件已经完全销毁了,组件中的所有的数据方法指令等都不可以用了
Vue 中 v-if 和 v-show 有什么区别?
v-if 在进行切换时,会直接对标签进行创建或销毁,不显示的标签不会加载在 DOM 树中。
v-show 在进行切换时,会对标签的 display 属性进行切换,通过 display 不显示来隐藏元素。
一般来说,v-if 的性能开销会比 v-show 大,切换频繁的标签更适合使用 v-show。
v-for 中 key 的作用是什么?
key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后,当列表项发生变化时,Vue 会基于 key 的变化而重新排列元素顺序,并且移除 key 不存在的元素,提升运行效率。
为什么要设置key值,特别是循环操作的时候
因为Vue是采用虚拟Dom,diff算法。需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM。
vue在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
注意:·1:v-for循环的时候,key属性只能使用number或string 2:key使用的时候,必须使用v-bind绑定属性的形式,指定key的值
vue核心是
数据驱动,组件化
Vuex是什么?它的五大核心是
vuex是一个专为vue.js应用程序开发的状态管理模式,它作用是将应用中的所有状态都放在一起,集中式来管理
1.state: 用来存储变量,通过$store.state.变量名访问
2.mutations: 相当于我们vue里面方法,用来改变state存储的变量值,通过this.$store. commit来获取值
3.getters: 相当于组件中的计算属性,改变mutations变异的值
4.actions: 需要异步处理的时候可以使用actions,它跟mutations的区别是dispatch
5.modules: 这个是对处理过后的状态进行分类。
Vue的双向数据绑定原理是什么?
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
三个参数 to 、from 、next 分别的作用:
1.to: Route,代表要进入的目标,它是一个路由对象
2.from: Route,代表当前正要离开的路由,同样也是一个路由对象
3.next: Function,这是一个必须需要调用的方法,而具体的执行效果则依赖 next 方法调用的参数
路由守卫有几种,是哪些
1.全局路由守卫:
定义:所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫
前置守卫:router.beforeEach((to, from, next) => {}
后置守卫:router.afterEach((to, from, next) => {}
2.组件路由守卫:
定义:跟 methods: {}等同级别书写,组件路由守卫是写在每个单独的 vue 文件里面的路由守卫
beforeRouteEnter (to, from, next){}
beforeRouteUpdate((to, from, next){}
beforeRouteLeave((to, from, next){}
3.独享路由守卫:
定义:路由独享守卫是在路由配置页面单独给路由配置的一个守卫
beforeEnter(to, from, next) =>{}
在Vue文件中template模板部分 使用template标签的作用是什么
使用template时,会忽略template标签直接输出template中的内容。template不会渲染成元素,用div的话会被渲染成元素。把if,show,for等语句抽取出来放在template上面,把绑定的事件放在temlpate里面的元素上,可以使html结构更加清晰,还可以改善一个标签过长的情况。
介绍一下SPA,优势以及不足,如何解决
SPA的全称是单页面应用。一个SPA就是一个web应用,他所需 的资源有HTML JS CSS等,一次请求就加载完成,不需要刷新的动态加载 。术语“单页”就是在页面初始化加载以后就永远不会刷新重新加载。 2:优势:减轻服务器端的压力 ,提高页面的渲染效果,减少请求数量。 3:不足之处:首屏加载时间会很长。 SEO不友好。
nextTick的作用是什么
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
应用
想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数
在数据改变后要执行的操作,而这个操作需要等数据改变后而改变DOM结构的时候才进行操作,需要用到nextTick
单向数据流与双向数据绑定的区别是怎么样的
单向数据流,以往的MVC模式,它是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新
数据的双向绑定 由MVVM框架实现,由View、ViewModel和Model组成,view和model不能直接进行通信,他们通过中间件ViewModel来进行通信。 当Model部分数据改变时,Data Bindings监听数据变化,会通知view更新视图; DOMListeners 监听视图,当view变化也会同步到Model中,View和Model之间的同步是自动的.
Vue中如何实现全局变量的定义
1:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。 使用方式1:在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。 使用方式2:在程序入口的main.js文件里面,将上面那个Global.vue文件挂载到Vue.prototype。
Vue优化方式
v-if 和v-show
使用Object.freeze()方式冻结data中的属性,从而阻止数据劫持
组件销毁的时候会断开所有与实例联系,但是除了addEventListener,所以当一个组件销毁的时候需要手动去removeEventListener
图片懒加载
路由懒加载
为减少重新渲染和创建dom节点的时间,采用虚拟dom
diff算法
diff算法是指对新旧虚拟节点进行对比,并返回一个patch对象,用来存储两个节点不同的地方,最后利用patch记录的消息局部更新DOM
虚拟DOM的优缺点
缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢
优点:减少了dom操作,减少了回流与重绘
保证性能的下限,虽说性能不是最佳,但是它具备局部更新的能力,所以大部分时候还是比正常的DOM性能高很多的
为什么选Vue进行项目开发
Vue是一个以数据驱动为核心的渐进式MVVM模式框架。采用了虚拟DOM,diff算法,在页面的渲染上性能要好一些。同时他还是一个高性能,轻巧,可组件化的库,并且拥有非常易用上手的API库。
深拷贝和浅拷贝的区别
浅拷贝 扩展运算符... 赋值符号= object.assign
深拷贝 json.parse(json.stringify())、递归拷贝 、var newobje=object.create(oldobj)
浅拷贝是拷贝对象指针,之间会相互影响,深拷贝是重新分配内存,不会影响
怎么把网址里的参数传出来呢?
querystring.parse
怎样实现继承
class的extends、Object.setPrototypeOf(子对象,父对象)、prototype
//父类型定义子类型都有的属性方法
class Enemy{
constructor(x,y) {
this.x=x;
this.y=y;
}
fly(){
console.log(`飞到x=${this.x},y=${this.y}位置`);
}
}
//子类型plane 继承extends父类型Enemy
class plane extends Enemy{
constructor(x,y,score) {
//子类型请求super父类型
super(x,y);
this.score=score;
}
getScore(){
console.log(`击落敌机,得${this.score}分`);
}
}
var Kevin=new plane(50,100,5);
console.log(Kevin);
Kevin.fly();
Kevin.getScore();
//正常的
function Student(name,age){
this.name=name;
this.age=age;
}
var Kevin=new Student("Kevin",18);
var Alan=new Student("Alan",20);
console.log(Kevin);
console.log(Alan);
//继承的对象
var father={
money:10000,
car:"大众"
}
//给子对象Kevin添加father
Object.setPrototypeOf(Kevin,father)
console.log(Kevin);
axios怎样封装
安装axios模块,然后建立request.js文件,引入axios文件,建立request函数请求,通过axios.create存放网址,再建立请求拦截 instance.interceptors.request.use 响应拦截instance.interceptors.reponse.use()
之后再建立对应模块的文件,引入request文件,存放路由地址
import axios from 'axios'
export function request(config){
//创建axios的实例
const instance=axios.create({
baseURL:'http://152.136.185.210:7878/api/hy66/',
timeout:5000
})
//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config=>{
//console.log(config);
//1.比如config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
//3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config
}, err => {
console.log(err);
})
//2.2响应拦截
instance.interceptors.response.use(res=>{
//console.log(res);
return res.data
},err=>{
console.log(err);
})
//3.发送真正的网络请求
return instance(config)
}
import {request} from "./request";
export function getHomeMultidata(){
return request({
url:'/home/multidata'
})
}
说下axios
axios是一个可以用在浏览器端和node js的异步通信框架,主要作用就是实现ajax异步通信。
功能特点:从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持PromiseAPi ---js中链式编程
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF
简单说下webpack
webpack是一个js程序的静态模块打包器,当webpack处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle.
webpack.config.js配置文件如何写
module.exports = {
entry:"",//入口文件,指定web pack用哪个文件作为项目的入口
output:{ //output 输出,指定webpack把处理完成的文件放置到指定路径
path:"",
filename:""
},
module:{ //module模块,用于处理各种类型的文件
loaders:[
{test:/\.js$/,;loade:""}
]
},
plugins:{},//插件,如热更新,代码重用等
resolve:{},//设置路径指向
watch:true//监听,用于设置文件改动后直接打包
}
watch与computed的区别
vue生命周期及对应的行为
vue父子组件生命周期执行顺序
组件间通讯方法
如何实现一个指令
vue.nextTick实现原理
diff算法
如何做到的双向绑定
虚拟dom为什么快
如何设计一个组件
webpack部分
用过哪些loader和plugin
loader的执行顺序为什么是后写的先执行
webpack配置优化
webpack打包优化(happypack/dll)
plugin与loader的区别
webpack执行的过程
如何编写一个loader/plugin
tree-shaking作用,如何才能生效
首屏加载如何优化
一个网页从请求到呈现花了很长时间,如何排查
css部分
什么是箱型
箱型阴影 box-shadow
具体的答案没有,就是指怎样用这个属性看起来的效果更好,光影和日照关系的更好。
怎样把元素垂直居中心
这个问题我打算分开答水平居中和垂直居中,到时候试验答复。
如何三栏式布局
我之前做过,之后把答案整理过来
选择器权重计算方法
!important优先级最高
内联优先级又比较高,在html元素中直接添加样式---1000
id选择器---100
类class和伪类选择器--10
元素/标签选择器----1
通配选择器*
继承的样式
种类规则:
只要有!important,优先级就最高
优先级相同,就使用靠近的样式,就近原则
比较优先级时,需要将每个选择器的所有结果相加后进行比较
选择器的累加不会超过最大的数量级,比如类选择器再高也不会超过id选择器
--------------------奇怪,明明我记得我在html/css基础知识写了的,但就是找不到这块内容,为什么啊啊啊啊啊!!!!!!
如何清除浮动
clear:both
还有一个是通过::after/::befter写的,之后补
说下flex
flex是css方式布局的一种,它有主轴和交叉轴,通过dispaly:flex设定flex布局,flex-direction属性来决定主轴方向是水平方向还是垂直方向,justify-content主轴对齐方式,align-items交叉轴对齐方式,flex-wrap决定是否换行,flex:是flex-grow(项目放大,有剩余空间) flex-shrink(项目缩小,空间不够) flex-basis (元素的宽就是它的值 )的缩写
什么是bfc,可以解决什么问题
bfc块级格式化上下文,它是一个独立的渲染区域,规定了内部如何布局,并且这个区域的子元素不会影响到外面的元素。
多用于清除浮动,解决高度塌陷,父子margin重叠等问题
//清除浮动
.clearfix:after{
content:""; /*内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*块级元素*/
visibility:hidden; /*隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*兼容IE678*/
}
位置属性
就是问的是position,position五个值,然后是relative和ansoluted的关系
如何实现自适应平方
我搜了一下,出来的是css实现自适应的正方形,都说高不固定,不能用height值,需要用width值实现正方形的height赋值。
可以用vw单位,具体的之后再说。
如何用css实现三角形
宽高设为0,border-三边为transparent,有一边有颜色值。
border边值设为1就是一个点,为何用border就可以,我首先想的就是padding/margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:0;
height:0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
什么是css预处理器
css预处理器定义了一种新的语言,用一种专门的编程语言,为css增加一些编程的特性,再通过编译器转换为正常的css文件,以供项目使用。
常见的css预处理器有:sass less
js部分
js构建工具有哪些
babel:JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
webpack:模块打包器,主要作用就是打包、压缩、合并及按序加载
手写防抖和节流
手写深拷贝
手写数组去重、数组乱序
说下继承
手写call/apply/bind
sleep函数
实现promise、实现promise.all、实现promise.retry
将一个同步callback包装成promise形式
写一个函数,可以控制最大并发数
jsonp的实现
eventEmitter(emit,on,off,once)
实现instanceof
实现new
实现数组flat/filter等方法
lazyMan
函数currying
箭头函数与普通函数的区别
变量的解构赋值
promise.async await 和generator的区别
es6和es5继承有何不同
js模块化(common/amd/cmd/es6)
说下this,如何改变this指向,call/apply/bind的区别
this一般有5种情况 全局和独立调用中指向window
箭头函数的this看父级情况
构造函数是指向new的实例
use strice 模式下,指向undefined
其他的就是谁调用指向谁。比如对象.对象里的函数指向对象