簡歷表面的一些知識點（一）

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。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同類型元素的演算法。使用 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

1、vue-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')
        }
  ]
})

　

 

VirMach 便宜 VPS

QNews

QNews