关于前端:前端应届面试总结努力找工作星光不负赶路人

29次阅读

共计 2501 个字符,预计需要花费 7 分钟才能阅读完成。

一、什么是 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="'<p> 内容 </p>'"`
`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()}
})
//<input v-focus>

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

更新中。。。。

正文完
 0