标签间通信

两个标签之间的通信可以通过BroadcastChannel来实现

// 创建一个广播频道
const channel = new BroadcastChannel('channelName')

// 监听消息
channel.onmessage = (event) => {
  console.log(event.data)
}

在另一个浏览器标签中，我们可以通过以下代码向频道发送消息:

// 创建一个广播频道
const channel = new BroadcastChannel('channelName')

// 发送消息
channel.postMessage('Hello, World!')

以上两个信道之间的通信是双向的，也就是说，一个信道可以发送消息，另一个信道可以接收消息

但是两个信道的信道名称必须相同，否则无法通信

拖拽API

先看一下效果吧

课程表

• 语文
• 数学
• 英语
• 物理
• 化学
• 生物
• 历史
• 地理
• 政治
• 体育
• 音乐

上午

星期一	星期二	星期三	星期四	星期五	星期六	星期天

上午

API

在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。

涉及到拖拽的api如下

1. 拖拽元素的事件监听：（应用于拖拽元素）

事件名	说明
ondragstart	拖拽开始时触发
ondragleave	当鼠标离开拖拽元素时调用
ondragend	拖拽结束时触发
ondrag	整个拖拽过程都会调用

2. 拖拽目标元素的事件监听：（应用于目标元素）

事件名	说明
ondragenter	拖拽元素进入目标元素时触发
ondragover	拖拽元素在目标元素上移动时触发
ondrop	拖拽元素在目标元素上释放时触发

源码

<template>
  <div class="container">
    <p class="title">课程表</p>
    <div
      class="main"
      @dragstart="dragStart"
      @dragover="dragOver"
      @drop="dragDrop"
      @dragenter="dragEnter"
    >
      <div class="slide">
        <ul data-allow="true" data-warp="true">
          <li style="background-color: #3eaf7c" data-effect="copy" draggable="true">语文</li>
          <li style="background-color: #62a238" data-effect="copy" draggable="true">数学</li>
          <li style="background-color: #f80000" data-effect="copy" draggable="true">英语</li>
          <li style="background-color: #768e9d" data-effect="copy" draggable="true">物理</li>
          <li style="background-color: #e7c837" data-effect="copy" draggable="true">化学</li>
          <li style="background-color: #ad21b2" data-effect="copy" draggable="true">生物</li>
          <li style="background-color: #3eaf7c" data-effect="copy" draggable="true">历史</li>
          <li style="background-color: #9f13a4" data-effect="copy" draggable="true">地理</li>
          <li style="background-color: #12e122" data-effect="copy" draggable="true">政治</li>
          <li style="background-color: #19968c" data-effect="copy" draggable="true">体育</li>
          <li style="background-color: #af3e3e" data-effect="copy" draggable="true">音乐</li>
        </ul>
      </div>
      <div class="right">
        <div class="top">
          <div class="am">
            上午
          </div>
          <div class="table">
            <table>
              <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期天</th>
              </tr>
              <tr v-for="(_item, index) in 4" :key="index">
                <td data-allow="true" v-for="_ in 7"></td>
              </tr>
            </table>
          </div>
        </div>
        <div class="bottom">
          <div class="pm">
            上午
          </div>
          <div class="table">
            <table>
              <tr v-for="(_item, index) in 4" :key="index">
                <td data-allow="true" v-for="_ in 7"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Drag',
  data() {
    return {
      // 被拖拽的元素
      dragElement: null,
    }
  },
  methods: {
    // 拖拽开始
    dragStart(e) {
      // 判断是否允许拖拽
      if (!this.isAllowDrag(e.target)) {
        e.preventDefault()
        return
      }

      // 设置被拖拽的元素
      this.dragElement = e.target
      // 设置拖拽的状态为move
      e.dataTransfer.effectAllowed = e.target.dataset.effect
    },
    // 拖拽移动
    dragOver(e) {
      // 阻止默认事件 使tr和td可以接收拖拽
      e.preventDefault()
    },
    // 拖拽进入
    dragEnter(e) {
      // 移除所有元素的背景颜色
      this.removeDropHover()
      // 改变被进入元素的背景颜色
      if (e.target.dataset.allow === 'true' && this.isAllowDrop(e.target)) {
        e.target.classList.add('drop-hover')
      }
    },
    // 拖拽放置
    dragDrop(e) {
      // 移除所有元素的背景颜色
      this.removeDropHover()
      // 复制拖拽元素 如果是包裹元素则不复制
      if (this.isAllowDrop(e.target) && this.dragElement && !e.target.dataset.warp) {
        e.target.appendChild(this.dragElement.cloneNode(true))
        this.dragElement = null
      }
      // 如果是包裹元素, 则移除原来的元素
      if (this.isAllowDrop(e.target) && this.dragElement && e.target.dataset.warp) {
        // 将原来的元素移除
        this.dragElement.remove()
      }
    },
    // 移除拖拽元素的背景颜色
    removeDropHover() {
      document.querySelectorAll('.drop-hover').forEach((item) => {
        item.classList.remove('drop-hover')
      })
    },
    // 判断是否允许被放置
    isAllowDrop(target) {
      if (!target) return false
      // 是否设置了允许
      const isAllow = target.dataset.allow === 'true'
      // 是否允许包裹
      const isWarp = target.dataset.warp === 'true'
      // 是否有子元素 但是允许包裹的元素不算
      const hasChild = target.children.length === 0 || isWarp

      return isAllow && hasChild
    },
    // 元素是否可以被拖拽
    isAllowDrag(target) {
      // 判断有没有draggable属性
      return target && target?.getAttribute?.('draggable')
    },
  },
}
</script>

<style scoped>
  .title {
    text-align: center;
    font-size: 22px;
  }

  .drop-hover {
    background-color: #1dbb27;
  }

  .main {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    --main-height: 470px;

    .slide {
      width: 10%;
      height: var(--main-height);
      background-color: #f0f0f0;

      ul {
        margin: 0;
        height: var(--main-height);
        padding: 5px;

        li {
          text-align: center;
          list-style: none;
          background-color: #fff;
          margin-bottom: 10px;
          cursor: pointer;
          user-select: none;
        }
      }
    }

    .right {
      width: 90%;
      height: var(--main-height);
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      background-color: #f0f0f0;

      .table {
        width: 92%;

        table {
          width: 100%;

          li {
            list-style: none;
            text-align: center;
            height: 30px;
            line-height: 30px;
          }

          th {
            padding: 5px;
            width: 80px;
            height: 40px;
            font-size: 14px;
          }

          td {
            box-sizing: border-box;
            padding: 5px;
            height: 45px;
          }
        }
      }

      .top {
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: space-between;

        .am {
          width: 8%;
          height: 180px;
          background-color: #9ea9b4;
          display: flex;
          justify-content: center;
          align-items: center;
          writing-mode: vertical-rl;
          letter-spacing: 15px;
          align-self: flex-end;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .pm {
          width: 8%;
          height: 180px;
          background-color: #9ea9b4;
          display: flex;
          justify-content: center;
          align-items: center;
          writing-mode: vertical-rl;
          letter-spacing: 15px;
          align-self: flex-end;
        }

        .table {
          width: 92%;

          table {
            width: 100%;
            margin: 0;

            td {
              width: 80px;
            }
          }
        }
      }
    }
  }
</style>

IntersectionObserver API

这个api可以用来监听元素是否进入视口, 用来实现懒加载图片, 无限滚动等效果

使用方法

通过IntersectionObserver构造函数创建一个新的观察者实例, 并传入一个回调函数, 这个回调函数会在被观察的元素进入或者离开视口时被调用

const observer = new IntersectionObserver(callback, options)

其中

• callback: 当被观察的元素进入或者离开视口时被调用的回调函数
• options: 一个配置对象, 用来配置观察者实例的一些选项

options的属性如下:

属性名	说明	默认值
root	用来指定根元素, 如果不指定, 则默认为视口	null
rootMargin	用来指定根元素的边界, 可以是一个字符串或者一个数组	'0px'
threshold	一个观察目标的可见比例, 一个数组, 可以是0-1之间的任意值	0

threshold 设为0时, 被观察的元素冒头就会执行回调的代码, 设为1时, 当该元素完全可见时才执行

图片懒加载 + 触底加载

现在来看一个懒加载拖的例子:

threshold: rootMargin:

加载中...

当图片进入视口范围时, 将data-src的值赋给src, 实现图片懒加载

当然了, vue提供了v-lazy指令, 也可以实现图片懒加载😂🤣😅😅😅😅😅😅

代码:

<template>
  <div class="container">
    <div class="tool">
      <div class="top-line"></div>
      <label for="threshold">threshold: </label>
      <input id="threshold" v-model="threshold" />
      <label for="rootMargin">rootMargin: </label>
      <input id="rootMargin" v-model="rootMargin" />
      <button @click="refresh">刷新内容</button>
    </div>
    <div :key="mainKey" class="main">
      <img
        v-for="item in 100"
        src="./images/wall.jpg"
        :data-src="`https://picsum.photos/200/300?random=${Math.random()}`"
        alt=""
        :key="item"
      >
    </div>
    <div class="loading">
      <span>加载中...</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntersectionObserver',
  data() {
    return {
      mainKey: 100,
      imageCOunt: 100,
      threshold: 0.1,
      rootMargin: 0,
    }
  },
  mounted() {
    this.handleObserve()
    this.handleLoad().observe(document.querySelector('.loading'))
  },
  methods: {
    // 创建一个 IntersectionObserver 实例
    createObserver() {
      const observer = new IntersectionObserver((entries) => {
        // entries 是一个数组，包含所有被观察的元素
        entries.forEach((entry) => {
          // 当图片进入视口时，加载图片
          if (entry.isIntersecting) {
            const img = entry.target
            img.src = img.dataset.src
            // 加载完成后，取消观察
            observer.unobserve(img)
          }
        })
      }, {
        // 这个属性用来配置交叉观察器的根元素，如果不设置，默认为视口
        root: null,
        // 这个属性用来配置根元素的边界区域, 相当于扩大或缩小视口的大小
        rootMargin: this.rootMargin + 'px',
        // 这个属性用来配置目标元素与根元素相交时的交叉区域的比例
        threshold: this.threshold,
      })

      return observer
    },
    // 监听图片
    observeImages(observer) {
      const images = document.querySelectorAll('img')
      images.forEach((img) => {
        observer.observe(img)
      })
    },
    // 刷新列表
    refresh() {
      this.mainKey += 1
      // 等待页面渲染完成后再执行
      this.$nextTick(() => {
        this.handleObserve()
      })
    },
    // 监听加载
    handleLoad() {
      return new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          this.handleScroll()
          // 重新监听新增的图片
          this.handleObserve()
        })
      }, {
        root: null,
        rootMargin: '0px',
        threshold: 0,
      })
    },
    // 触底加载
    async handleScroll() {
      await new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
      this.imageCOunt += 10
    },
    // 监听
    handleObserve() {
      const observer = this.createObserver()
      this.observeImages(observer)
    },
  }
}
</script>

<style scoped>
@keyframes line {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.top-line {
  position: sticky;
  top: 0;
  height: 5px;
  background-color: #e1732e;
  border-radius: 5px;
  z-index: 999;
  animation: line 5s linear;
  animation-timeline: scroll(y);
}

.container {
  width: 100%;
  height: 400px;
  overflow: auto;
  position: relative;

  .tool {
    top: 0;
    background-color: wheat;
    padding: 5px 0;
    position: sticky;
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    img {
      width: 120px;
      height: 120px;
    }
  }
  
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

触底加载原理差不多, 观察loading元素, 当loading元素进入视口时, 触发加载事件, 加载完成后, 重新监听新增的图片