前端知识点记录

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>