2018年8月所遇知識點整理

silenceboy 發(fā)布于2019-08-30 11:05 / 2708人閱讀

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。

*注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導

一，頁面的錨鏈接

1,定義：錨點,錨點鏈接。常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網(wǎng)頁內(nèi)容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法

錨點多用于點擊到達本頁面的某個位置
超鏈接用于點擊到達某個頁面或打開/下載某個文件

2，用法：
給錨點文本標簽添加id

練習

給a標簽的文本添加錨點，單擊鏈接可跳到name為test的a標簽處[使用name屬性只能針對a標簽來定位，而對div等其他標簽就不能起到定位作用。]

練習

二， WebSocket 三，熱更新

熱更新就是當你在開發(fā)環(huán)境修改代碼后，不用刷新整個頁面即可看到修改后的效果。
vue的項目，不管html，css，js都可以無刷更新。因為vue使用的是虛擬dom，可以在node端渲染出虛擬dom，再通過websocket發(fā)送到瀏覽器端進行比對渲染
具體原理和實現(xiàn)看其他文章，寫的很詳細
前端開發(fā)熱更新原理解讀
如何在前端項目中實現(xiàn)熱更新

四， requestAnimationFrame

官方文檔
requestAnimationFrame 方法你真的用對了嗎？

五，數(shù)據(jù)埋點 六， Vue訪問地址帶#相關(guān)

vue項目會帶#是因為使用的vue的hash模式。vue默認為hash模式
1，去掉：

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
  mode: "history"  //把Router的mode修改為history模式就可以
})

2，hash模式和history模式
VUE通常開發(fā)為單頁面應用（SPA）
那么既然是單頁面應用，當用戶要點擊其他組件訪問頁面內(nèi)的其他模塊時，系統(tǒng)怎么樣也要獲取一個參數(shù)，然后根據(jù)這個參數(shù)返回不同的模塊給用戶使用，這時候就會有一個問題，這個傳遞的參數(shù)只放在后臺處理的話是可以正常運作的，但如果用戶使用了瀏覽器的前進、后退、跳轉(zhuǎn) 這三個功能呢，因為是單頁面應用，訪問地址是不變的，所以瀏覽器的前進、后退、跳轉(zhuǎn) 無法使用，那么要怎么辦呢，只能是從訪問地址動手腳了。

HASH模式：
HASH模式就是從訪問地址動手腳，在訪問地址的后面增加#并且?guī)闲枰膮?shù)，這樣后臺就能對不同的參數(shù)顯示不同的模塊，而且 #以及后面的參數(shù)是不會被包含在HTTP請求中，因此對服務器的請求是沒有影響的，更改參數(shù)也不會刷新頁面。

history模式：
history模式也是從訪問地址動手腳，但是不再使用#，而是想普通的訪問地址那樣使用/，但如果這樣請求的話，服務器是需要另外配置才行，要不然容易出現(xiàn)404錯誤，具體怎么配置請自行百度。
參考文章hash和history的區(qū)別