H5和C3的新特性

H5的新特性

语义化标签：header、footer、section、nav、aside、article、
- header头部
- footer脚步
- nav导航
- dialog 提示框
增强型表单：input中的type类型
- color 主要用于选取颜色
- data 从日期选择器中选择一个日期
- number 数值的输入域
- search 用于搜素
新增表单元素：datalist、keygen、output
新增表单属性：placeholder、required、min 和 max
- placeholder输入提示框
- required 要求输入的区域不能为空
- multiple input元素中可以多选
音频视频：audio、video
canvas
地理定位
拖拽
本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
H5新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
- onresize 当调整窗口大小时触发函数
- ondrag 当拖动元素时触发函数
- onerror 当错误发生时触发函数
- onplay 当媒介数据将要开始播放时触发函数
- onpause 当媒介数据暂停时触发函数
WebSocket：单个 TCP 连接上进行全双工通讯的协议

C3的新特性

选择器
- 伪类选择器：伪类的意义是通过选择器找到不能被常规css选择器获取的元素li:first-of-type: 以及不存在Dom树中的信息，比如a:link未被访问的a链接；a:visited被访问过的a链接
- 伪元素选择器;用于创建一些不存在Dom树中的元素，并为其添加样式；例如我们可以通过::before来在一个元素前创建文本
```
a::before{
    content:'',
}
```
背景和边框
- 背景background-size:100% 100% no-repeat
- 边框border-radius、box-shadow、border-image
2D转换 transform
- translate(x,y)元素从其当前位置移动
- scale(x,y)元素在其当前大小像x和y轴放大倍数
- rotate(30deg)顺时针旋转30°
- skew(30deg,20deg)元素翻转
动画和过渡
动画animation和@keyframes配合使用
过渡transiton:width 2s,height 2s,transform 2s。

ES6新特性

Promise
let const
解构赋值
箭头函数
模板字符串
函数参数的默认值

for...of;for..in

for...of用来遍历一个迭代器，例如数组

let ary = [1,2,3,4];
for(let i of ary){
    console.log(i)//1,2,3,4
}

for...in用来遍历对象中的属性

let obj = {k:5,l:6}
for(let i in obj){
    console.log(i)//k,l
}

class类

css盒模型

标准盒模型，width等于content-width
ie盒模型，width等于content-width+padding+border
通过box-size:border-box设置为ie盒模型

原型以及原型链

原型链：每个函数都有prototype属性，这个属性指像构造该函数类的原型对象，每个对象都有__proto__属性，该属性指向其所属类的原型。

作用域

作用域指的是变量的可访问范围，作用域是变量的一种查找机制，他会向上一级一级的查找变量，如果查找不到，代码就会报错。

MVVM的原理

vue中的observer数据监听器，把普通对象传给vue实例中的data，vue把这个对象的所有属性进行遍历，并通过object.defineProprety()方法把这些属性全部转为setter和getter方法，当数据发生改变会触发setter，setter会立即调用dep中的notify函数，dep开始遍历所有订阅者，并调用遍历者的update方法，订阅者收到通知后对视图进行响应改变。

简历项目

自我介绍

面试官你好，我叫符奥聪，毕业于北华航天工业学院，参与开发了418军事后台管理系统，云劳务市场、云签约、百慧云诊所等项目，418军事后台管理系统主要的模块有原始数据、业务数据、成果数据、权限管理、数据评价等模块，云劳务市场主要是做通过帮助b端用户的c端劳工注册个体工商户实现减税免税的服务，云签约是主要致力于B端用户实现线上电子签约功能，百慧云诊所主要是给医生进行排班以及查阅病历、检验报告等。掌握的技术H5、C3、JS、ES6、Eacharts、vue，了解vue3.0。我的自我介绍结束了，谢谢。

最后走之前来一句谢谢您的面试

使用element-ui

使用它的布局，一般后台管理系统的布局结构都是头部header、侧边栏asider、内容main、尾部footer组成，直接拿过来修改一下样式就可以用了，开发的时候速度会快点。

scss换肤

利用下拉框value和类名进行绑定，通过类名来改变主题色。
先利用$是先定义颜色变量，然后定义对应颜色的主题库，通过@each循环主题库将对应的主题和对应的父级元素类名进行绑定,然后再通过函数结合map-get方法获取定义的颜色变量并通过@centent将值赋给css属性实现一键换主题。
- 用到的知识点
  - $定义变量
  - @each in 循环主题，拿到主题对应的样式maps(相当于对象，里面定义这个主题的样式，比如字体大小fontSize:$black)
  - 接着循环对应的样式，利用map-merge将这个对应的样式提取成一个一维maps
  - 再利用函数返回map-get拿到对应样式的值。
  - 再用占位符@centent占位
  - 然后我们只需要利用@include调用混合器，然后在调用函数方法拿到对应的样式值，给样式属性进行赋值就可以实现一键换肤了。

svg连线

项目首页展示页的有三组数据，需要进行连线关联，利用了svg的line和polyline。
- line是直线，语法获取起点坐标和终点坐标，通过stroke属性设置线条颜色，stroke-width设置线条宽度。
- ployline是折线，通过stroke设置线条颜色，stroke-width设置线条宽度。

大文件切片上传和断点续传

利用element-ui的upload上传组件，使用auto-upload自定义上传，将上传的文件转为buffer数据类型，利用SparkMD5的ArrayBuffer实例将处理好的buffer文件相关联，并利用send生成相关联的hash值。
接下来就是根据文件大小按照固定的数量进行分割，以100份为例计算出每一份文件的大小。循环这100份文件，设置一个变量等于0接收循环的当前文件进度，利用file.slice进行分割，然后在进行文件名字拼接。然后将分割好且命名好的文件放进数组中。
接着是创建100个请求集合这个是为了实现断点续传做的准备。每一个切片上传成功后，就从这个集合中删除，如果发生断点下次上传的时候就是从当前位置进行上传，这也就实现了断电续传，待全部文件上传成功后，请求后台合并视频即可。

axios的封装

axios实例进行二次封装

let instance = axios.create({
    //设置baseURL，它会自动加在url前面
    baseURL:'url',
    //在向服务器发送之前，处理参数，这个设置只适用于post、put、patch这些请求
    transformRequest:(data)=>{
        //将传参处理成formData格式
        return qs.stringify(data)
    },
    //在响应数据传递到then之前处理响应数据
    transformRespon:(res)=>{
        //对数据进行任意的转换
        return res
    }
    //请求超时
    timeout:4000,
})
//请求拦截
let reqinterceptors =  instance.interceptors.request.use((data)=>{
    //在请求之前做什么
    return data
},
//请求错误做些什么
(err)=>{
    rerutn Promise.reject(err)
})
//响应拦截器
let resinsterceptors =  instance.interceptors.response.use((res)=>{
//对响应数据做点什么
    return res
},(err)=>{
// 对响应数据错误做点什么
    return Promise.reject(err)
})
// 如果想移出请求拦截器
instance.interceptors.request.eject(reqinterceptors)
//如果想移出响应拦截器
instance.interceptors.response.eject(resinterceptors)

eacharts

先初始化一个Eacharts实例
然后指定图标的配置和数据
使用配置的数据展示页面
比如说这个折线图、柱状图他们的配置项相似，只是一个series下的type不一样，就可以把他们两封装成一个组件，给他们传个type值就行。还做了这个背景颜色渐变，每条线的颜色不一致（options下有个color属性，设置一个颜数组）等等。

路由守卫+axios请求、响应拦截，进行页面登录拦截

全局前置路由守卫

router.beforeEach((to,from,next)=>{
    if(to.meta.requireAuth){
        if(window.sessionStorage.getItem('token')){
               next()
        }else{
            next('/login')
        }
    }else{
        next()
    }
})

请求拦截，请求之前加上token

instace.interceptors.request.use((config)=>{
    config.headers.token = 'token'
    return config
})

响应拦截，如果token过期或者不对，后台返回数据告知，跳转登录页

instance.interceptors.response.use((res)=>{
    if(res.data.errno===501){
        alert('您没有登录，请先登录')
        window.location.href = '/login'
    }
    return res
})

根据简历的知识点