乐趣区

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

jiezi

一、什么是 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 中如何自定义指令

更新中。。。。

退出移动版