前端知識點記錄

1.堆棧

堆(heap)=>先進先出(FIFO)=>程序員分配釋放 =========(引用類型)
棧(stack)=>後進先出(LIFO)=>操作系統自動分配釋放 =======(基本類型) —– 棧的優勢是，存取速度比堆要快

2.map文件介紹

map文件 => Source map就是一個信息文件，裏面儲存着位置信息。使用map文件可以快速在chrome上定位壓縮腳本的原始錯誤位置。

3.vue路由模式

vue 路由兩種模式：hash、history兩種模式

添加 mode: ‘history’ 之後將使用 HTML5 history 模式，該模式下沒有 # 前綴，而且可以使用 pushState 和 replaceState 來管理記錄。

router.push(location) => history中會有記錄
router.replace(location) => history中不會有記錄
router.go(n) => 在history記錄中向前跳轉幾頁或者向後幾頁

4.vscode調試

vscode 調試js => 點擊調試選項，添加配置項=>nodejs 啓動項。

{
    "type": "node",
    "request": "launch",
    "name": "nodejs調試",//給要調試的文件起個調試名字
    "program": "${workspaceFolder}/當前文件夾下的js文件.js"//${workspaceFolder}=> 當前文件夾的位置
}

{
    "type": "chrome",
    "request": "launch",// launch和attach 兩種。
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"//${workspaceRoot} VS Code當前打開的文件夾
}

launch模式：由 vscode 來啓動一個獨立的具有 debug 模式的程序
attach模式：附加於（也可以說“監聽”）一個已經啓動的程序（必須已經開啓 Debug 模式）

5.shim和polyfill

polyfill 是 shim 的一種。
shim 是將不同 api 封裝成一種，比如 jQuery 的 $.ajax 封裝了 XMLHttpRequest 和 IE 用 ActiveXObject 方式創建 xhr 對象；
polyfill 特指 shim 成的 api 是遵循標準的，其典型做法是在IE瀏覽器中增加 window.XMLHttpRequest ，內部實現使用 ActiveXObject。
在實際中爲了方便做對比，會特指 shim 的 api 不是遵循標準的，而是自己設計的。
知乎答案鏈接

shim屬性：專門用來配置不兼容的模塊
require.js shim 配置

總結一下。shim用來配置兼容；polyfill用來解決兼容。segmentfault社區的答案也不錯，https://segmentfault.com/q/1010000006796739

6.vue數據加載完成渲染DOM

1.頁面加載的時候閃現{{}}
解決辦法：v-cloak

<div class="family-home" v-cloak></div>
<style>
[v-cloak]{
    display: none;
}
</style>

2.頁面先加載固定的DOM結構，然後立即顯示經過處理的數據

<div class="family-home" v-cloak v-if="hasload">
[v-cloak]{
    display: none;
}
</style>
<script>
    mount(){
        this.$http.get('/rc_Test/homePageInfo', {
            params: {
                ChildId: 參數
            }
        }).then((res) => {
            this.hasload=true;
        }
    }
</script>

7.在vue中，什麼時候用computed

computed=>是計算 屬性，是實時響應的。

methods是個方法，比如你點擊事件要執行一個方法，這時候就用methods,
computed是計算屬性，實時響應的，比如你要根據data裏一個值隨時變化做出一些處理，就用computed。

如果請求回來的數據只是單純的顯示的頁面中，根本用不到computed這個計算屬性。但是，請求回來的數據需要處理一下才進行渲染的話。就可以用到computed屬性了。也可以在請求數據的方法中進行處理。
1.在掛載mounted方法中處理數據並進行渲染。
2.computed，在computed中處理完，返回數據進行渲染。

html部分
 <p>{{ageNum | jsGetAge }}歲</p>
 <span>{{dateTime}}測試</span>    

js部分
computed: {
    dateTime() {
      return (this.TestInformation.CreateTime || "").split("T")[0];
    },
    ageNum() {
      return (this.ChildInfo.Birthday || "").split("T")[0];
    }
  },

8.colgroup標籤的使用

只能在

元素之內

<table border="1">
  <colgroup>
    <col span="1" style="background-color:red">
    <col span="1" style="background-color:yellow">
    <col span="1" style="background-color:blue">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>