前端应届---面试总结(努力找工作,星光不负赶路人)

一、什么是 EventLoop?

Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。

所有的任务可以分为同步任务和异步任务,
同步任务,顾名思义,就是立即执行的任务,同步任务一般会直接进入到主线程中执行;
异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列( Event Queue )的机制来进行协调。
同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入 Event Queue。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的任务,推入主线程执行。上述过程的不断重复就是我们说的事件循环。

二、render函数

render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement,我们重点来说 createElement 参数。

render 函数的返回值(VNode)
VNode(即:虚拟节点),也就是我们要渲染的节点。

render 函数的参数(createElement)
createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。

createElement 函数的返回值(VNode)
createElement 函数的返回值是 VNode(即:虚拟节点)。

createElement 函数的参数(三个)
一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数。类型:{String | Object | Function}。必需。
一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型:{Object}。可选。
子虚拟节点 (VNodes),由 createElement() 构建而成,也可以使用字符串来生成“文本虚拟节点”。类型:{String | Array}。可选。

注:出自该博主博客----终于搞懂了vue 的 render 函数(一) -_-|||

三、hash模式和history模式有什么区别?使用history需要注意什么问题?

1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。hash 只可添加短字符串。

2、history模式下,前端的url必须和实际后端发起请求的url一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。(这个算是要注意的问题之一)
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录栈,在当前已有的 back()、forward()、go() 方法的基础之上,这两个方法提供了对历史记录进行修改的功能。当这两个方法执行修改时,只能改变当前地址栏的 URL,但浏览器不会向后端发送请求,也不会触发popstate事件的执行

注:不记得出自哪里了,很久之前的笔记了。。。

四、axios为什么要二次封装?如何实现?

为了减少代码量,便于我们更好的管理我们的接口,不至于请求接口很多的情况下,出现混乱。

  • 二次封装axios使用示例
    1.新建api文件夹对请求进行集中管理
    2.在api文件夹下建立对应功能模块文件
    3.在文件中导入封装好的request函数

4.代码示例如下

import { request } from '../service/request'

export function fetchData(data) {
    return request({
         // 此处配置具体详见axios官方文档 http://axios-js.com/zh-cn/docs/
        method: 'get',
        url: '/get',
        params:data
    })
}

注:出自该博主博客---面试官:为啥要axios 的二次封装呢 及其使用是干啥的

五、常见的状态码

200: "服务器成功返回请求的数据。",
201: "新建或修改数据成功。",
202: "一个请求已经进入后台排队(异步任务)。",
204: "删除数据成功。",
400: "发出的请求有错误,服务器没有进行新建或修改数据的操作。",
401: "用户没有权限(令牌、用户名、密码错误)。",
403: "没有访问权限",
404: "发出的请求针对的是不存在的记录,服务器没有进行操作。",
405: "请求行中指定的请求方法不能被用于请求相应的资源。",
406: "请求的格式不可得。",
410: "请求的资源被永久删除,且不会再得到的。",
422: "当创建一个对象时,发生一个验证错误。",
500: "服务器发生错误,请检查服务器。",
502: "网关错误。",
503: "服务不可用,服务器暂时过载或维护。",
504: "网关超时。",

六、vue如何自定义指令?

指令使用的几种方式:

//会实例化一个指令,但这个指令没有参数 
`v-xxx`
 
// -- 将值传到指令中
`v-xxx="value"`  
 
// -- 将字符串传入到指令中,如`v-html="'

内容

'"` `v-xxx="'string'"` // -- 传参数(`arg`),如`v-bind:class="className"` `v-xxx:arg="value"` // -- 使用修饰符(`modifier`) `v-xxx:arg.modifier="value"`

举例
输入框自动聚焦:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//

注:出自该博主博客---vue中如何自定义指令

更新中。。。。

你可能感兴趣的:(前端应届---面试总结(努力找工作,星光不负赶路人))