前端知識學習01

俠客小飛發表於2022-05-05
前端

前端知識學習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中實現資料依賴和觸發檢視更新的操作。

寫法上：

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

生命週期：

vue3:

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

ps:生命週期在呼叫前需要先引入

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

宣告基礎型別變數與物件變數時一樣區別使用 ref 和 reactive

組合函式返回響應式物件時使用 toRefs

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

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

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

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

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

  3. 左側300px,右側100%

  4. 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="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
        alt="5"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
        alt="1"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
        alt="2"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
        alt="3"
      />
      <img
        data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
        alt="4"
      />
      <img
        data-src="https://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>

相關文章