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__属性，该属性指向其所属类的原型。css

做用域

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

MVVM的原理

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

简历项目

自我介绍

面试官你好，我叫符奥聪，第一家公司是北京咸瀛文化科技有限公司，参与开发了云劳务市场、云签约、百慧云诊所三个项目，云劳务市场主要是作经过帮助b端用户的c端劳工注册个体工商户实现减税免税的服务，云签约是主要致力于B端用户实现线上电子签约功能，百慧云诊所主要是给医生进行排版以及查阅病历、检验报告等。vue

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

上一家公司是中电15所，开发了418军事管理后台，主要的模块有原始数据、业务数据、成果数据、权限管理、数据评价等等，掌握的技术H五、C三、JS、ES六、Eacharts、技术栈主要是用vue，了解vue3.0。面试

418军事管理后台系统

使用element-ui

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

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
})
复制代码

根据简历的知识点