根據簡歷的知識點

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__屬性，該屬性指向其所屬類的原型。

做用域

• 做用域指的是變量的可訪問範圍，做用域是變量的一種查找機制，他會向上一級一級的查找變量，若是查找不到，代碼就會報錯。ua

MVVM的原理

• vue中的observer數據監聽器，把普通對象傳給vue實例中的data，vue把這個對象的全部屬性進行遍歷，並經過object.defineProprety()方法把這些屬性所有轉爲setter和getter方法，當數據發生改變會觸發setter，setter會當即調用dep中的notify函數，dep開始遍歷全部訂閱者，並調用遍歷者的update方法，訂閱者收到通知後對視圖進行響應改變。

簡歷項目

自我介紹

面試官你好，我叫符奧聰，第一家公司是北京鹹瀛文化科技有限公司，參與開發了雲勞務市場、雲簽約、百慧雲診所三個項目，雲勞務市場主要是作經過幫助b端用戶的c端勞工註冊個體工商戶實現減稅免稅的服務，雲簽約是主要致力於B端用戶實現線上電子簽約功能，百慧雲診所主要是給醫生進行排版以及查閱病歷、檢驗報告等。

最後走以前來一句謝謝您的面試

上一家公司是中電15所，開發了418軍事管理後臺，主要的模塊有原始數據、業務數據、成果數據、權限管理、數據評價等等，掌握的技術H五、C三、JS、ES六、Eacharts、技術棧主要是用vue，瞭解vue3.0。

418軍事管理後臺系統

使用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
  })
  複製代碼