前端知識學習01

2022 年 5 月 5 日
筆記
大前端

前端知識學習01

1.跨域

什麼是跨域？

協議，域名，埠，只要有一個不一樣的就認為是跨域。

怎麼解決，設置請求頭

response.setHeader(“Access-Control-Allow-Origin”,”*”); 中文意思：訪問控制允許來源

2.基本數據類型

7種基本類型：string，number，bigint，boolean，null，undefined，symbol (ECMAScript 2016新增)。

3.vue2和vue3有哪些不同？

響應式上：

vue2的響應式是通過object.defineproperty實現的，JavaScript對象傳入vue實例的時候，vue，會遍歷所有的peoperty,並通過object.defineporperty把這些property轉化為getter和setter,當數據發生變化的時候觸發視圖的更新，有缺陷，不能監聽對象屬性的添加和刪除

vue3通過Proxy（代理）實現數據讀取和攔截，在攔截trap中實現數據依賴和觸發視圖更新的操作。

寫法上：

vue3的Template標籤支援多個根標籤，vue2不支援。
用v-model代替v-model和.sync
新增context.emit與this.$emit作用相同
父組件使用v-slot:插槽名

生命周期：

vue3:

setup開始創建組件
onbeforeMount組件掛載到頁面之前執行
onMounted 組件掛載到頁面之後執行
onBeforeUpdate組件更新之前
onUpdated組件更新之後

ps:生命周期在調用前需要先引入

vue3新加入了對TS和PWA的支援

聲明基礎類型變數與對象變數時一樣區別使用 ref 和 reactive

組合函數返迴響應式對象時使用 toRefs

4.怎麼實現一個垂直居中布局

父絕子相，子元素top:50%;left:50%;transform: translate(-50%,-50%);
採用flex布局，對align-items和justify-content設置center屬性
採用grid布局，父元素display:flex；子元素設置margin:auto;

5.怎麼實現一個左側固定300px,右側自適應布局

.left{
    flex-basis: 300px;
    flex-shrink:0 ;
}
.main{
    flex-grow: 1;
}

.left{
   width:300px
}
.main{
    flex:1;
}

左側300px,右側100%
grid布局 grid-template-columns:300px 1fr;

6.怎麼實現圖片懶載入

可以利用getBroundingCliendRect() API來實現，如果elem.getBoundingClientRect().top < document.documentElement.clientHeight

就讓elem.src = elem.dataset.src，還可以加上一個節流函數，具體實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      body {
        margin: 0px;
        padding: 0px;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="demo">
      <img
        data-src="//cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
        alt="5"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="//cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
        alt="5"
      />
    </div>
  </body>
  <script>
    
    const demo = document.querySelectorAll("img");
    // 懶載入函數
    function lazy() {
      //循環
      for (let elem of demo) {
        //如果getBoundingClientRect().top小於視窗高度
        if (elem.getBoundingClientRect().top < document.documentElement.clientHeight) {
          if (elem.dataset.src && elem.src == "") {
            elem.src = elem.dataset.src;
          }
        }
      }
    }
    // 節流
    function throttle(t, fn) {
      let time;
      return function () {
        if (!time) {
          time = setTimeout(() => {
            time = null;
            fn();
          }, t);
        }
      };
    }
    lazy();
    window.addEventListener("scroll", throttle(500, lazy));
  </script>
</html>

Tags: 大前端