簡歷表面的一些知識點(一)

檸檬IT發表於2020-07-05

1、百度統計是什麼?

百度統計是百度推出的一款免費的專業網站流量分析工具,能夠告訴使用者訪客是如何找到並瀏覽使用者的網站,在網站上做了些什麼,有了這些資訊,可以幫助使用者改善訪客在使用者的網站上的使用體驗,不斷提升網站的投資回報率。“世界很複雜,百度更懂你”,百度統計提供了幾十種圖形化報告,全程跟蹤訪客的行為路徑。同時,百度統計整合百度推廣資料,幫助使用者及時瞭解百度推廣效果並優化推廣方案。

 

2、H5和CSS3新增特性?

CSS3:

選擇器:屬性選擇器、偽類選擇器、偽元素選擇器。

特性:

1.顏色:新增RGBA,HSLA模式
2. 文字陰影(text-shadow)
3.邊框: 圓角(border-radius)邊框陰影: box-shadow
4. 盒子模型:box-sizing
5.背景:background-size 設定背景圖片的尺寸background-origin 設定背景圖片的原點
background-clip 設定背景圖片的裁切區域,以”,”分隔可以設定多背景,用於自適應佈局
6.漸變:linear-gradient、radial-gradient
7. 過渡:transition,可實現動畫
8. 自定義動畫
9. 在CSS3中唯一引入的偽元素是 ::selection.
10. 媒體查詢,多欄佈局
11. border-image
12.2D轉換:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

 

13. 3D轉換

偽類:

 

 p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
    p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
    p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素。
    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。
    :enabled、:disabled 控制表單控制元件的禁用狀態。

    :checked,單選框或核取方塊被選中。

------------------------------------------------------------------------------------------------------------------------

H5:

1. 拖拽釋放(Drag and drop) API 
2. 語義化更好的內容標籤(header,nav,footer,aside,article,section)
3. 音訊、視訊API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失;
7. sessionStorage 的資料在瀏覽器關閉後自動刪除
8. 表單控制元件,calendar、date、time、email、url、search  
9. 新的技術webworker, websocket, Geolocation支援HTML5標籤;
* IE8/IE7/IE6支援通過document.createElement方法產生的標籤,
  可以利用這一特性讓這些瀏覽器支援HTML5新標籤,
  瀏覽器支援新標籤後,還需要新增標籤預設的樣式:
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

10.本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失;sessionStorage 的資料在瀏覽器關閉後自動刪除。

3、JavaScript基礎(內建物件、BOM、DOM、JSON、AJAX)

1、資料型別

         基本資料型別:字串、數字、布林值、空、未定義;

      引用資料型別:物件、陣列、函式;

2、轉義字元

          \n  換行

     \r  回車

     \t  tab

       \b    退格

          \f     換頁符

3、瀏覽器物件BOM

(1)window物件的屬性(視窗高度)

(2)瀏覽器儲存

 

  sessionStorage :在瀏覽器中儲存 key/value 對。 在關閉視窗或標籤頁之後將會刪除這些資料。
  localStorage: 在瀏覽器中儲存 key/value 對。沒有過期時間。
  cookie: 儲存於訪問者的計算機中的變數,當同一臺計算機通過瀏覽器請求某個頁面時,就會傳送這個cookie,識別使用者。
(3)計時器

  setInterval();每隔指定的時間執行
  setTimeout();在指定時間後執行

(4)開啟/關閉視窗

  window.resizeTo(width,height);把視窗的大小調整到指定的寬度和高度。

  window.scrollTo(x,y) ;把內容滾動到指定的座標。

  window.open([URL], [視窗名稱], [引數字串])開啟視窗

 

(5)History 物件

  包含使用者(在瀏覽器視窗中)訪問過的 URL。可通過window.history進行訪問。

 

  **window.history.back() 載入歷史列表中的前一個 URL。
  window.history.forward() 載入歷史列表中的下一個 URL。
  window.history.go();載入歷史列表中的某個具體頁面

(6)location物件,用於獲取或設定窗體的URL。

 

(7)Navigator 物件

  包含有關瀏覽器的資訊,通常用於檢測瀏覽器與作業系統的版本。

 

4、HTML  DOM操作

1、DOM方法

  節點訪問:    getElementById() 返回帶有指定 ID 的元素。
        getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表(集合/節點陣列)。
        getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。

  建立節點: createAttribute() 建立屬性節點。
        createElement() 建立元素節點。
        createTextNode() 建立文字節點。

  新增/刪除/替換元素

         appendChild(新元素) 追加元素,新元素作為父元素的最後一個子元素進行新增

 

        insertBefore(新節點,指定節點) 在指定的子節點前面插入新的子節點。

        removeChild() 刪除子節點,必須清楚該元素的父元素。

        replaceChild(新節點,指定節點) ;:替換子節點。

2、DOM屬性

    innerHTML 用於獲取或替換 HTML 元素的內容。

    element.style.樣式屬性名=新樣式內容,改變html樣式。

3、元素物件
    
nodeName 屬性返回節點的名稱。
    nodeValue 屬性返回節點的值。
    nodeType 屬性返回節點的型別。nodeType 是隻讀的。

    parentNode - 元素的父節點

    childNodes - 元素的子節點

    firstChild: 元素的第一個子元素

    lastChild: 元素的最後一個子元素

4、DOM事件

  onclick 點選

  onblur:失去焦點
  onfocus 得到焦點
  onkeydown 按下鍵盤
  onkeyup 鬆開鍵盤
  onkepress 按住鍵盤
  onmousedown 按下滑鼠
  onmouseup 鬆開滑鼠
  onmouseover 滑鼠懸浮
  ommousemove 移動滑鼠
  onmouseout 移開滑鼠
  select 選中
  onload :頁面載入
  onchange:改變
  onsubmit :表單提交

5、JSON資料

  用於儲存和傳輸資料的格式,通常用於服務端向頁面傳遞資料;

  JSON.stringify(): JavaScript -> JSON     js值轉換成JSON字串

  JSON.parse() : JSON-> JavaScript  字串轉換成js物件

6、Ajax更新部分頁面

(1)建立 XMLHttpRequest 物件

    XMLHttpRequest 用於在後臺與伺服器交換資料。

(2)向服務端傳送請求(非同步/同步)

  xmlhttp.open(“GET/POST”,url,非同步true/同步false);規定請求型別、伺服器上檔案的地址以及是否非同步處理請求。
  xmlhttp.send(string);將請求傳送到伺服器。string:僅用於 POST 請求。

(3)伺服器響應

7、Vue、Vuex、Vue-router分別是什麼?有什麼作用?

vue:

1、核心:實現資料雙向繫結和元件化模式。

2、單向資料流:簡單來說就是資料是單向的,資料流動方向可以追蹤,流向單一,追蹤問題可以更快捷,缺點是寫起來不方便。

     雙向資料流:資料之間是相通的,將資料變更的操作隱藏在框架內部。優點是表單互動較多的場景下,會簡化大量與業務無關的程式碼。 缺點是無法追蹤區域性狀態的改變,增加了出錯時debug的難度。

3、對MVC、MVVM的理解

MVC:

 特點 :(1)view傳送命令到controller(控制器)

          (2)controller完成業務邏輯後,要求model(模型)改變狀態

          (3)model將新的資料傳送到view,使用者得到反饋。

MVC所有的通訊都是單向的。

MVVM:

 特點:(1)各部分之間的通訊都是雙向的

       (2)採用雙向繫結:view的變化。自動反應在viewModel(檢視模型)。

4、vue的生命週期

  • beforeCreated() 在例項建立之間執行,資料未載入狀態
  • created() 在例項建立、資料載入後,能初始化資料,dom渲染之前執行
  • beforeMount() 虛擬dom已建立完成,在資料渲染前最後一次更改資料
  • mounted() 頁面、資料渲染完成,真實dom掛載完成
  • beforeUpadate() 重新渲染之前觸發
  • updated() 資料已經更改完成,dom 也重新 render 完成,更改資料會陷入死迴圈
  • beforeDestory() 和 destoryed() 前者是銷燬前執行(例項仍然完全可用),後者則是銷燬後執行

5、元件通訊

 

父傳子:將父元件的資料繫結到使用子元件的自定義標籤上,子元件在選項中新增一個props屬性來接 受資料;
子傳父:在響應該點選事件的函式中使用$emit來觸發一個自定義事件,並傳遞一個引數。

6、v-if 和 v-show 區別

 

 使用了 v-if 的時候,如果值為 false ,那麼頁面將不會有這個 html 標籤生成。

 v-show 則是不管值為 true 還是 false ,html 元素都會存在,只是 CSS 中的 display 顯示或隱藏

7、$route和$router的區別

  $router 為 VueRouter 例項,想要導航到不同 URL,則使用 $router.push 方法

  $route 為當前 router 跳轉物件裡面可以獲取 name 、 path 、 query 、 params 等

8、NextTick 是做什麼的

   $nextTick 是在下次 DOM 更新迴圈結束之後執行延遲迴調,在修改資料之後使用 $nextTick,則可以在回撥中獲取更新後的 DOM

9、Vue 元件 data 為什麼必須是函式

   因為js本身的特性帶來的,如果 data 是一個物件,那麼由於物件本身屬於引用型別,當我們修改其中的一個屬性時,會影響到所有Vue例項的資料。如果將 data 作為一個函式返回一個物件,那麼每一個例項的 data 屬性都是獨立的,不會相互影響了

10、計算屬性computed 和事件 methods 有什麼區別

  computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值

   method :只要發生重新渲染,method 呼叫總會執行該函式

11、 對比 jQuery ,Vue 有什麼不同

  jQuery 專注檢視層,通過操作 DOM 去實現頁面的一些邏輯渲染; Vue 專注於資料層,通過資料的雙向繫結,最終表現在 DOM 層面,減少了 DOM 操作

  Vue 使用了元件化思想,使得專案子集職責清晰,提高了開發效率,方便重複利用,便於協同開發

12、Vue 中怎麼自定義過濾器

  可以用全域性方法 Vue.filter() 註冊一個自定義過濾器,它接收兩個引數:過濾器 ID 和過濾器函式。過濾器函式以值為引數,返回轉換後的值

13、Vue 中怎麼自定義指令

全域性註冊
// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被繫結的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
區域性註冊
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

14、對 keep-alive 的瞭解

  keep-alive 是 Vue 內建的一個元件,可以使被包含的元件保留狀態,或避免重新渲染

15、Vue 中 key 的作用

 

  key 的特殊屬性主要用在 Vue 的虛擬 DOM 演算法,在新舊 nodes 對比時辨識 VNodes。如果不使用 keyVue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同型別元素的演算法。使用 key,它會基於 key 的變化重新排列元素順序,並且會移除 key 不存在的元素。

  有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤

16、vue 等單頁面應用的優缺點

優點:
  • 良好的互動體驗
  • 良好的前後端工作分離模式
  • 減輕伺服器壓力
缺點:
  • SEO難度較高
  • 前進、後退管理
  • 初次載入耗時多

Vuex

1、vuex是什麼

 

  vuex是狀態管理器。統一管理和維護各個vue元件的可變狀態。
  vuex相當於一個全域性變數,用來儲存狀態和管理資料。

 

2、五個模型

(1)state:定義初始化變數,
(2)mutations:更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation,命名規則:動詞_名詞,全部大寫,例如:SET_USER
(3)actions: Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意非同步操作。命名規則:動詞名詞,駝峰規則 例如:setUser;
(4)getters:簡單來說就是對state裡面的屬性進行計算,所有需要訪問vuex中的屬性,都需使用getter來獲取, getter需要單獨成一個檔案

 

vue-router

1vue-router是什麼?有哪些元件?

 

  動態路由是單頁面的路徑管理器,vue頁面應用是基於路由和元件的,路由用於設定訪問路徑 ,並將路徑和元件對映起來。也就是說元件之間的切換。

  就是從列表頁跳轉到詳情頁,列表頁是一些接近或者重複的內容,所以詳情頁的頁面結構是比較接近的,但是資料不一樣。因此需要一個元件來渲染不同的頁面,資料不一樣是受到url的影響。所以url的值不一樣,url不一樣拿到的資料也不一樣,因此渲染出來的頁面也不一樣。同一個結構渲染出來的頁面不一樣。因此是路由不一樣,所以叫動態路由。這次的路由結構是和上次類似但不完全一樣,是一個變化的值,可以調整和改變的值,經常用於列表頁調整到詳情頁。

 

  • <router-link><router-view><keep-alive>

 

2、active-class 是哪個元件的屬性?

  active-class是router-link終端屬性,用來做選中樣式的切換,當router-link標籤被點選時將會應用這個樣式

3、怎麼定義vue-router的動態路由?

  動態路由的建立,主要是使用path屬性過程中,使用動態路徑引數,以冒號開頭

4、vue-router響應路由引數的變化

  • 用watch 檢測
// 監聽當前路由發生變化的時候執行
watch: {
  $route(to, from){
    console.log(to.path)
    // 對路由變化做出響應
  }
}

  

  • 元件內導航鉤子函式
beforeRouteUpdate(to, from, next){
  // to do somethings
}

5、vue-router 傳參

Params
  • 只能使用name,不能使用path
  • 引數不會顯示在路徑上
  • 瀏覽器強制重新整理引數會被清空
  // 傳遞引數
  this.$router.push({
    name: Home,
    params: {
        number: 1 ,
        code: '999'
    }
  })
  // 接收引數
  const p = this.$route.params

Query:

  • 引數會顯示在路徑上,重新整理不會被清空
  • name 可以使用path路徑
  // 傳遞引數
  this.$router.push({
    name: Home,
    params: {
        number: 1 ,
        code: '999'
    }
  })
  // 接收引數
  const p = this.$route.params

6、vue-router實現路由懶載入(動態載入路由)

  • 把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問時才載入對應的元件即為路由的懶載入,可以加快專案的載入速度,提高效率
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component:() = import('../views/home')
        }
  ]
})

 

 

相關文章