前端应届---面试总结(金九银十，努力找工作，星光不负赶路人）

在webpack中，有哪些常见的loader和plugin？

• Loader

1. babel-loader
   babel-loader基于babel，用于解析JavaScript文件。babel有丰富的预设和插件，babel的配置可以直接写到options里或者单独写道配置文件里。
2. ts-loader
   为webpack提供的 TypeScript loader，打包编译Typescript
3. markdown-loader
   markdown编译器和解析器
4. raw-loader
   可将文件作为字符串导入
5. file-loader
   用于处理文件类型资源，如jpg，png等图片。返回值为publicPath为准
6. url-loader:
   它与file-loader作用相似，也是处理图片的，只不过url-loader可以设置一个根据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为base64字符串合并到js文件里。
7. svg-sprite-loader
   会把引用的 svg文件 塞到一个个 symbol 中，合并成一个大的SVG sprite，使用时则通过 SVG 的 \<use> 传入图标 id 后渲染出图标。最后将这个大的 svg 放入 body 中。symbol的id如果不特别指定，就是你的文件名
8. style-loader
   通过注入\<style\>标签将CSS插入到DOM中
9. less-loader
   解析less，转换为css

• plugin
• copy-webpack-plugin
  将已经存在的单个文件或整个目录复制到构建目录。
• html-webpack-plugin
  基本作用是生成html文件
• clean-webpack-plugin
  默认情况下，这个插件会删除webpack的output.path中的所有文件，以及每次成功重新构建后所有未使用的资源。
• mini-css-extract-plugin
  本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件。
• webpack.HotModuleReplacementPlugin
  模块热替换插件，除此之外还被称为 HMR。
• webpack.DefinePlugin
  创建一个在编译时可以配置的全局常量。这会对开发模式和生产模式的构建允许不同的行为非常有用。
• webpack-bundle-analyzer
  可以看到项目各模块的大小，可以按需优化.一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。
• SplitChunksPlugin
  代码分割。

注：出自该博主博客----吐血整理的webpack入门知识及常用loader和plugin

堆栈？

在数据结构中，栈中数据的存取方式为先进后出。

而堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定，存取方式是先进先出

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

七、Linux常用命令

登录与注销

1)    sudo useradd lilei  //添加用户 (不能被立即使用，需设置密码 sudo passwd lilei)  
2)    sudo adduser lilei  //添加用户
3)    login  //登录或切换用户
4)    logout //注销用户（命令行）  exit(shell-退出控制台)
5)    shutdown -h 10  //10分钟后自动关机    shutdown -c  //取消
6)    halt(root用户)  //关闭所有进程后自动关机
7)    poweroff //同上
8)    shutdown -r 10 //十分钟后自动重启
9)    init 6  //重启 （0-停机，1-单用户，2-多用户，3-完全多用户，4-图形化，5-安全模式，6-重启）
10)    reboot  //重启

目录与文件

1)    pwd   //显示当前工作目录
2)    mkdir mydir  //创建工作目录
3)    cd mydir  //更改工作目录
4)    rmdir mydir //删除工作目录
5)    touch myfile  //创建文件
6)    mv myfile mydir  //移动目录或文件
7)    cp myfile myfir  //复制目录或文件
8)    rm -rf mydir  //删除目录或文件
9)    ls -l myfile  //查看文件最后被编辑时间
10)    ls -lu myfile //查看文件最后被访问时间
11)    touch -at 01011212 myfile  //修改文件最后被访问时间
12)    ls //列出所有文件和目录
13)    ls -a //查看所有文件
14)    ls -i //显示文件索引节点号
15)    ls -l //详细显示
16)    ls -m //以逗号分隔
17)    sudo apt-get install tree 
18)    tree -l//以树状图列出目录内容
19)    tree -a //所有
20)    tree -i //不以阶梯状
21)    tree -s  //列出文件或目录大小
22)    tree -t  //按更改时间
23)    file -b myfile  //显示目录或文件的详细信息
24)    stat myfile  //同上

文件内容显示

1)    cat > myfile  //创建文件并编辑内容（ctrl+D结束编辑）
2)    cat -n myfile  //查看文件
3)    chmod [u/g/o/a][+/-/=][r/w/x] myfile  //更改文件权限
u-user,g-group,o-others,a-all  .   +-添加,--删除,=-重置   .
r-read读（4），w-write写（2），x-execute执行（1）
4)    more myfile  //分页往后显示文件（Space空格）
5)    less myfile  //分页自由显示文件（Page Down / Page Up）
6)    head (-10) myfile  //指定显示文件前若干行（默认前10）
7)    tail (-10) myfile  //指定显示文件后若干行（默认后10）

文件内容处理

1)    sort myfile  //对文件内容进行排序
2)    sort -r myfile  //逆序
3)    uniq myfile  //检查文件中的重复内容
4)    grep （-c）‘a’ myfile  //在文件中查找指定内容 (显示行号)
5)    diff myfile01 myfile02  //对不同文件进行比较
6)    diff3 myfile01 myfile02 myfile03  //三个文件
7)    sdiff myfile01 myfile02  //合并
8)    cmp myfile01 myfile02  //通过字节对不同文件进行比较
9)    comm myfile01 myfile02  //对有序文件进行比较
10)    cut -b(-c)(-d) 2(3) myfile  //对文件内容进行剪切
11)    paste myfile02 myfile01 //对文件内容进行粘贴 02-）01
12)    wc （-参数） myfile  //对文件内容进行统计 （c-字符数,w-单词数,l-行数）

压缩

1)    zip myfile.zip myfile  //压缩
2)    zip -d myfile.zip myfile  //添加
3)    zip -m myfile.zip myfile  //删除
4)    unzip -o myfile.zip  //解压（覆盖）
5)    unzip -n myfile.zip  //解压（不覆盖）
6)    zipinfo myfile.zip  //列出压缩文件信息

获取帮助

1)    man ls  //获取帮助
2)    man -k ls  //不清楚完整名字
3)    whatis ls  //获取帮助
4)    help cd  / cd –help  //获取帮助 -d(简短描述) -s(用法简介)
5)    info who  //获取帮助

其他命令

1)    clear  //清楚屏幕信息
2)    echo xx  //显示文本  x=0  echo $x . echo -e \$x . echo $(pwd)
3)    date  //显示日期和时间（+%y 年  +%m 月  +%d日）
4)    cal  //显示当前日期  cal -y
5)    ps  //查看当前进程  -A(所有)  U  lilei (用户lilei)
6)    kill -9 2315  //终止某一进程  
7)    ps -ef | grep Jincheng
8)    pkill Jincheng
9)    killall Jincheng
10)    last  //显示最近登录系统的用户信息-6列
11)    history （10） //显示历史指令-默认1000行
12)    sudo adduser lilei sudo  //给普通用户赋予root权限
13)    sudo usermod -G sudo lilei  //同上
14)    alias l=’ls’  //定义命令别名
15)    unalias l  //删除别名
16)    alias  //列出别名

注：出自该博客----Linux常用命令大全——赶紧收藏

更新中。。。。。