1.对于模块化你的理解是什么?
降低软件的复杂性,使其可控,可维护,可拓展。
一个功能就是一个模块,多个模块可以组成完整的应用,抽离一个模板不会影响应用其他功能的运行
2.Node是什么?
Node是一个基于ChromeV8引擎的JavaScript代码运行环境;
浏览器能运行JavaScript代码,浏览器就是JavaScript代码的运行环境;
Node能够运行JavaScript代码,Node就是JavaScript代码的运行环境。
3.谈谈对Vue组件化的理解?
Vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目可维护性,便于多个协同开发。
4.单页面是什么及其原理?单页面与多页面比较的优缺点又是什么?
SPA单页面应用,指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。
原理:
用js监听url中hash值的变化,onhashchange事件在当前URL的锚部分发生改变时触发。哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术。
MPA多页面应用,指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源,多页应用跳转,需要整页资源刷新。
名称 | 优点 | 缺点 |
SPA单页面 |
页面每次切换跳转时,并不需要做html文件的请求,这样就节约了很多http发送时延,所以在切换页面的时候速度就很快
页面片段间的切换快,在网络环境差或者一般的时候,因为组件已经预先加载好了,并不需要发送网络请求,所以用户体验好 |
因为要请求一次html同时还要发送一次js请求,两次请求回来了首屏才会显示
seo效果差 因为搜索引擎只识别html里面的内容,并不识别js里的内容,因为单页面就是js渲染出来的,影响网站的排名 |
MPA多页面 |
当我们访问页面的时候,服务器只返回了一个html,页面就展示出来了,只发了一次http请求
搜索引擎网站排名,是根据网页的内容排名的,搜索引擎只可以识别html中的内容,而多页面就是把内容放在html中。 |
每跳转一个页面就要发送一个http请求,如果网络情况不好的情况下,页面之间来回跳转就会发生明显的卡顿,有的时候半天还加载不出来,影响用户体验 |
5.谈谈函数防抖与节流?
防抖:在n秒内只执行一次该事件,如果在这过程中又触发了该事件,则重新计算时间
节流:在n秒内只执行一次该时间,如果在时间内又触发了该事件,只有一次生效
6.声明式导航与编程式导航的区别?
声明式导航:声明式导航是直接渲染到页面的,比如a链接
编程式导航:是用js处理逻辑后需要页面跳转,比如点击button按钮跳转
7.你是怎么样解决跨域问题的?
跨域:浏览器为了安全作出的限制策略;浏览器必须遵循同源策略,即同域名、同端口、同协议。
解决方法: CORS跨域
JSONP:利用<script>标签不受同源策略的限制,可以用来作为请求,后端接受请求后返回一个回调函数callback,调用前端已经定义好的函数,从而实现跨域请求。
Nginx反向代理接口跨域:服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也不存在跨域问题
8.说一说块级作用域
任何一对花括号中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,这就是块级作用域
9.说一说箭头函数
- 箭头函数比普通函数更加简洁
没有参数,就直接写一个空括号
有一个参数,可以省略参数的括号
有多个参数,用逗号分割
函数体的返回值只有一句,可以省略大括号
- 箭头函数没有自己的this
- 箭头函数只会继承自己作用域的上一层继承的this。所以箭头函数中this的指向 在它定义的时候就已经确定了,之后不会改变
- 箭头函数继承来的this指向永远不会改变
- Call() apply() bind()等方法不能改变箭头函数中this的指向
- 箭头函数不能作为构造函数使用
- 箭头函数没有自己的arguments
- 箭头函数没有prototype
- 不能用作Gennerator函数,不能使用yield关键字
- 箭头函数没有super
10.说一说Vuex
Vuex是一个状态管理工具,所谓状态就是数据,采用集中式存储管理所有组件的状态,是为了大型项目一个数据共享的问题。Vuex可以将数据保存到本地,数据是响应式的,能够保持数据页面的共享,提高开发效率
好处:能够在vuex中集中管理共享的数据,易于开发和后期的维护可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 存储在vuex中的数据是响应式的,能够实时保持数据与页面的同步,能够高效的实现组件之间的数据共享,提高开发效率
Vuex核心:
State:vuex的基本数据,数据源存放地,用于定义共享的数据
Getter:从基本数据派生的数据,相当于state的计算属性
Mutation:提交更新数据的方法,唯一一个可以操作state中数据的方法,必须是同步的,第一个参数是state,第二个参数是commit传过来的数据
Action:action是用来做异步操作的,一般用来发送请求,在action中写入函数,然后页面中用dispatch调用,然后在action中通过commit去调用 mutation通过mutation去操作state
Modules:模块化vuex,可以让每一个模块拥有自己的state、getter、mutation、action、使得结构非常清晰,方便管理
Vuex的运行机制:
Vuex提供数据(state),来驱动视图,视图通过dispatch派发action,在action中可以进行做一些异步操作,然后通过commit提交给mutation,由mutation去最终更改state。为什么要经过mutation?这是因为我们要在vue调试工具中记录数据的变化,这样可以通过插件去进行进一步的调试。所以说mutation中只能是纯同步的操作,如果是有异步操作,那么就需要在action中进行处理。如果没有异步操作,那么可以直接由组件进行commit操作mutation
11.Vue组件间通信的方法有那些
12.什么是npm?Npm的使用场景
Npm是随同Nodejs一起安装的包管理工具,能解决Nodejs代码部署上的很多问题。
使用场景:
a:允许用户从npm服务器下载别人编写的第三方包到本地使用。
b:允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用
c:允许用户将自己编写的包或者命令行程序上传到npm服务器供别人使用
13.使用基于token的登录流程
- 客户端使用用户名跟密码请求登录
- 服务端收到请求,去验证用户名与密码
- 验证成功后,服务端会签发一个token,再把这个token发送给客户端
- 客户端收到token以后可以把他存储起来,比如存储再cookie和Local storage里
- 客户端每次向服务端请求资源的时候需要带着服务端签发的token
- 服务端收到请求,然后去验证客户端请求里面的token,如果验证成功,就向客户端返回请求的数据
14 computed和watch的区别
Computed:是计算属性,依赖于其他属性,computed能缓存,当其依赖的属性发生改变,下一次计算computed的值时会重新计算computed的值
Watch:更多的是观察作用,相当于数据的监听回调,当监听的数据发生改变时,会执行回调并进行后续的操作
15. v-if和v-show区别
v-show无论是true/false都会被渲染,由display:none来控制显示
v-if true时显示,fasle时隐藏
v-show适合使用在切换频繁显示/隐藏的元素上(因为他的初始化渲染高)
v-if适合使用在切换不频繁、内容多,渲染一次消耗高的元素上(它的切换频率高)
v-show通过判断条件来动态的显示何隐藏元素、
v-if通过判断条件来动态的增删DOM元素
v-show 的性能比v-if更高
16.css中的四种定位
静态定位、相对定位、绝对定位、固定定位
静态定位:static是position属性的默认值,表示没有定位,使用静态定位的元素会按照元素正常的位置显示,并不会受到top、bottom等属性的影响
相对定位:元素相对于自己默认的位置进行位置上的调整,可以通过top、bottom、left、right四个属性的组合来设置元素相对于默认位置不同方向的偏移量
绝对定位:元素相对于第一个非静态定位的父级元素进行定位,如果找不到符合条件的父级元素则会与浏览器窗口来进行定位
固定定位:将元素相对于浏览器窗口进行定位,使用固定定位的元素不会因为浏览器窗口的滚动而滚动,就像固定在了页面上一样
粘性定位:他像是相对定位和固定定位的结合体,当滚动页面的时它的效果与相对定位相同,当元素滚动到一定程度时它又会呈现出固定定位的效果
17.js中的变量提升
变量提升是指JS的变量和函数声明会在代码编译器,提升至代码的最前面
变量提升成立的前提是使用var关键字进行声明的变量,并且变量提升的时候只有声明被提升,赋值并没有被提升,同时函数的提升比变量的提升优先
变量提升的结果,可以在变量初始化之前访问该变量,返回的值是undefined,在函数声明前可以调用该函数
18.什么是BFC:
块级格式上下文 是一个独立的渲染区域,只有(Block-level box)块级盒子参与,BFC规定了内部盒子如何布局,以及盒子之间的关系和作用
BFC触发条件:
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置(不设置浮动,设置浮动那肯定是 左右一行排列了)。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(正常的不设置浮动,两个块元素margin重叠,仅仅是垂直方向,左右不是这个样子的)
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。(不设置浮动,不设置左边距,块级子元素,一律靠左竖直向下排列,内联子元素一律从左向右排列,想想,正常写代码,都是这样,设置左浮动的靠近父元素的左边,设置右浮动,靠近父元素的右边。)
4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(这个挺重要的,设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面(靠左)。设置成BFC,自己独成一块,不会跑到它下面,而是保持洁身自好,自己依然占一块。)
6.计算BFC的高度时,浮动元素也参与计算(就是子元素设置浮动,脱离文档流,父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素,又拉回来了,但保持了浮动的特点。)
19.说一说变量提升
变量提升是指JS的变量和函数声明会在代码编译期,提升到代码的最前面
变量提升的前提是使用var关键字进行声明的变量并且变量提升的时候只有声明被提升,赋值并不会被提升,同时函数的声明提升比变量提升优先
变量提升的结果,可以在变量初始化之前访问,该变量的值为undefined,在函数声明前可以条用该函数。
20.原型链与作用域链的区别
原型链
当访问一个对象的属性时,会在这个对象的属性上去找,如果没有找到就会在这个对象的__proto__上去找,即构造函数的prototype上找,如果没有会一直在__proto__上找,知道最顶层,找不到即为undefined。这样一层一层地向上,就仿佛一条链串起来,所以就叫原型链
作用域链
变量取值会到创建这个变量的函数的作用域中取值,如果找不到,就会向上级作用域去查,直到查到全局作用域,这么一直查找的过程形成的链条叫作用域链
区别:
作用域链是相对于变量而言,原型时相对于属性而言
作用域最顶层时window,原型链最顶层时Object
21.New操作符做了那些事情
·首先创建一个新的空对象
·设置原型,将对象的原型设置为函数的prototype对象
·将新创建的对象作为this的上下文
·判断函数的返回值类型,如果是值类型,返回创建的对象,如果是引用类型,就返回这个引用类型的对象(如果该函数没有返回的对象,则返回this)
22.重绘和重排的区别
重排:当DOM的变化影响了元素的几何信息,浏览器需要重新计算元素的几何属性,将其安放在队列中的正确位置,这个过程叫做重排。表现为重新生成布局,重新排列元素
重绘:当一个元素的外观发生改变,但没有发生布局改变,重新把元素的外观绘制出来的过程叫做重绘。表现为某些元素的外观没有发生改变
重绘和重排的代价是高昂的,他们会破坏用户的体验,使UI展示非常的缓慢,二者相比之下,重排的性能影响更大,在两种无法避免的情况下,我们可以选择代价更小的重绘
重绘不一定出现重排,但重排一定会出现重绘
23.简单说一下三次握手、和四次挥手
- 三次握手
- 客户端向服务器端发送一个SYN同步标志数据包,表示请求建立连接
- 服务器端收到客户端的请求,并发送一个SYN/ACK同步确认标志数据包,表示同意建立连接
- 客户端收到服务端的回复,并发送一哥ACK确认标志数据包,表示确认建立连接
- 四次挥手
- 客户端向服务器发送一个FIN结束标志数据包,表示请求断开连接
- 服务端收到客户端的请求,发送一个ACK标志数据包,表示收到断开连接请求
- 服务端向客户端发送一个FIN标志数据包,表示同意断开连接
- 客户端向服务端发送一个ACK确认数据包,表示收到服务端断开连接确认