前端知识学习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: 大前端