前端面试内容——框架篇

webpack

webpack的概念以及作用

webpack是静态模块打包器，其作用是解析import与export通过构建依赖图来实现打包

webpack的4个核心

1.入口文件entry

2.出口文件output

3.模块加载器loader

使用流程：a. cnpm安装相应模块
b. 在配置文件(vue.config.js)中配置

module:{
rules:{
		test:    //要使用该模块的文件   （通过正则表达式匹配）
		use:["",""]	//使用到的模块
	}
}

4.插件plugins

a.cnpm 安装插件
b.require 导入插件
c.Webpack的配置文件中进行配置

	pulgin:{
	}

多页应用如何配置

1.入口文件配置为
entry:{
index1:路径1，
index2:路径2，
}
2.出口文件配置：
output:{
filename:"[name].js"
}

别名的配置

在配置文件（webpack.config.js）中增加字段resolve。

resolve:{
alias:{
		别名："原路径"//此后可通过该别名代表该路径
}
}

Vue

Vue的双向绑定原理

通过es5的object.defineproperty重写了get与set方法

组件间通信方式

父到子：通过props

将props传的值为对象可增加类型验证

子到父

1.在父组件定义函数，可改变父组件的数据
2.将该函数作为自定义事件传递给子组件
3.通过$emit来实现

任意组件间的通信

通过中央事件总线
a.var bus = new Vue() new一个空的VUE实例
b.使用 $ emit与 $ on来实现
c.$ on要写在mounted()中在渲染完成后才能实现

Vue路由传参

动态参数:proams

在路由规则中写入:
通过this.$route.proams获取

静态参数:query

在path后面跟？参数
通过this.$route.query获取

路由组件传参：通过props

3种类型:

布尔值 （在路由规则中增加props:true）

对象

函数

接收时在组件内写props

钩子函数

共11个
常用的8个钩子函数:
创建实例前后->渲染实例前后->更新实例前后->销毁实例前后
不常用的3个钩子函数：

1. activited:keep-alive激活后
2. deactivited:keep-alive停用后
3. errorCaptured:捕获错误后 (错误对象，错误组件的实例，错误的信息描述)

keep-alive的作用：缓存不活动的组件实例,而不销毁（利于性能优化）

Vue的常用指令

v-bind( : ),v-model,v-on(@),v-if,v-for,v-html

v-cloak的作用

v-cloak编译完成后就销毁，可以解决页面闪动的问题；
具体实现：css中增加:[v-cloak]{display:none}

路由的两种模式

1. hash模式:在路径后面存在#
2. history模式:类似于真正的url，但不能刷新，刷新会去请求接口
   history模式的原理:es5的history.pushState
   hash模式的原理:local.hash

状态管理（Vuex）的5个选项:

state

mutations：同步修改状态

getters (Vuex中的计算属性，存在缓存功能)

actions :处理异步操作

先执行异步操作在通过commit触发mutations中的方法

models:模块

anxios的使用

1. 安装:cnpm i axios
2. 引入:在main.js中通过import axios from “axios”,vue.prototype.$axios = axios 使得axios在Vue项目的全局中使用
3. 使用this.$axios.post().then()

为axios添加拦截器 interceptors

1.//添加响应拦截器
axios.interceptors.response.use(function(response){},function(err))

2.//添加请求拦截器
axios.interceptors.request.use(function(response){})
//拦截器移除
axios.interceptors.request.eject()

axios取消请求 cancle token

1. 通过cancleToken.source

var CancelToken = axios.CancleToken
var source = CancelToken.source()
axios.get('/user',{cancelToken:source.token})
//取消请求
source.cancel

命名空间 namespaced:true

目的：使模块完全独立
全局到模块的访问：加上模块名称:$store.state.vueStore.storeMessage
模块到全局的访问：在commit或dispatch时加上root:true的字段
模块到模块：访问时即加上模块名称同时使用root:true

路由重定向，别名，命名路由

命名路由：为路由分配一个name可以通过名称找到该路由

路由重定向:当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

路由别名：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

嵌套路由的实现

在路由规则中添加children选项，在组件中写入router-view标签

路由中的钩子函数

beforeRouterUpdate:路由更新前

该函数可实现动态路径参数的监听，watch也可侦听

beforeEach：路由跳转前

可实现路由守卫
可修改标题:在路由规则中加入 meta:{title:更改名}
然后在beforeEach中window.document.title = to.meta.title

afterEach:路由跳转后

路由守卫的实现

在beforeEach函数中使用next方法

服务端渲染

其他

性能优化:

1. 使用懒加载
2. 精灵图
3. 组件中的按需加载
4. keep-alive(存在缓存)
5. 防抖与截流：
   防抖：取消尚未执行完毕的事件再执行当前事件（clearTimeout）
   节流：通过标志位再上一次结束之前将标志位设置位false，在事件的回调函数中再将标志位置为true

eventloop(事件循环机制)

js中任务分为两种：同步任务与异步任务
同步任务：在主线程（js引擎线程）上执行，形成一个执行栈
异步任务：在主线程外的其他线程上执行，在执行完毕后再对应的事件代码处将回调函数加入到任务队列中
执行栈中同步任务全部执行完毕后，js引擎会读取任务队列将可执行的函数加入执行栈中开始执行

前端web安全

xss:跨站脚本攻击 解决方案：1.将标签进行转译，2.只允许用户输入我们期望的数据

CSRF：跨站请求伪造攻击 解决方案：使用token鉴权

Sql注入：进行预编译

文件上传漏洞:解决方案：后端进行文件验证

模块化规范

AMD:依赖require.js

COMMONJS :export与import

ES6:export与import

git命令

git add:添加到本地暂存区
git commit:添加到本地仓库
git clone:从远程仓库克隆到本地
git pull:从远程仓库下拉更新到本地
git push :从本地仓库上传更新到远程仓库
git merge:分支合并
git branch 分支名：创建分支
git branch -D 分支名：删除分支
git checkout 分支名：切换分支
git branch -a ：查看所有分支
git checkout: 版本回溯（仅在commit之前有效）
git reset – hard HEAD ^ (^的数量代表回退多少个版本)
git reflog 查看你的所有版本记录（包括回溯的版本）

gulp4相较于gulp3的特点：

对于任务的异步和同步有了原生的支持