詳解JavaScript如何創(chuàng)建一個非自動播放的GIF網(wǎng)絡(luò)組件

更新時間：2022年02月19日 09:25:50 作者：海擁

這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個允許您的用戶決定是否要播放gif的Web組件，文中的實現(xiàn)步驟講解詳細，需要的可以參考一下

一些很可愛的測試數(shù)據(jù)

這里用的gif是小駱駝和貓的這種可愛互動：

哇，太可愛了！我可以看一天這個

構(gòu)建 Web 組件

對于這個 Web 組件，我們需要一些東西：

畫布（“縮略圖”所在的位置）
一張圖片（實際的 gif）
標(biāo)有“gif”的標(biāo)簽
一些造型

讓我們這樣做：

const noAutoplayGifTemplate = document.createElement('template')
noAutoplayGifTemplate.innerHTML = `
<style>
.no-autoplay-gif {
  --size: 30px;
  cursor: pointer;
  position: relative;
}

.no-autoplay-gif .gif-label {
  border: 2px solid #000;
  background-color: #fff;
  border-radius: 100%;
  width: var(--size);
  height: var(--size);
  text-align: center;
  font: bold calc(var(--size) * 0.4)/var(--size) sans-serif;
  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
}

.no-autoplay-gif .hidden {
  display: none;
}
</style>
<div class="no-autoplay-gif">
  <canvas />
  <span class="gif-label" aria-hidden="true">GIF</span>
  <img class="hidden">
</div>

接下來，我們將創(chuàng)建一個派生自 HTMLElement 的類。此類稍后將包含播放/停止切換行為。

class NoAutoplayGif extends HTMLElement {
  constructor() {
    super()

    // 在此處添加設(shè)置
  }

  loadImage() {
    // 在此處添加渲染
  }

  static get observedAttributes() {
    return ['src', 'alt'];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal !== newVal || oldVal === null) {
      this.loadImage()
    }
  }
}

這里還有一些樣板：一個空的渲染函數(shù)，它將加載圖像并顯示縮略圖，以及一個構(gòu)造函數(shù)和一些特定于 Web 組件的方法。

好的，這已經(jīng)是很多代碼了。讓我解釋。

該loadImage函數(shù)不會自動調(diào)用，我們需要自己調(diào)用。該函數(shù)attributeChangedCallback讓我們定義當(dāng)任何指定屬性發(fā)生observedAttributes變化時會發(fā)生什么。在這種情況下：加載圖像并顯示它。瀏覽器大致做的是這樣的：

遇到 web 組件
調(diào)用它的構(gòu)造函數(shù)（調(diào)用constructor()）
將其屬性一一設(shè)置為 DOM 中的設(shè)置（因此，src="llama.gif"調(diào)用.setAttribute('src', 'llama.gif')
attributeChangedCallback對每個更改的屬性執(zhí)行

簽入構(gòu)造函數(shù)時，這些屬性一開始是空的，稍后才會填充。如果我們需要一個或多個屬性來實際進行渲染，那么如果我們知道這些屬性不存在，那么調(diào)用該loadImage函數(shù)是沒有意義的。所以我們不在構(gòu)造函數(shù)中調(diào)用它，但只有在有可能存在屬性時才調(diào)用它。**

為了完成樣板化，讓我們將這個類定義為我們的自定義 Web 組件：

class NoAutoplayGif extends HTMLElement {
  // ...
}

window.customElements.define('no-autoplay-gif', NoAutoplayGif)

我們現(xiàn)在可以像這樣使用這個組件：

<no-autoplay-gif 
  src="..." 
  alt="Llama and cat" 
/>

邏輯

有趣的來了。我們需要添加noAutoplayGifTemplate作為組件的shadow DOM。src這已經(jīng)可以渲染 DOM，但是如果沒有andalt屬性，我們?nèi)匀徊荒茏龊芏嗍虑椤Ｒ虼宋覀冎粡?shadow DOM 中收集一些我們稍后需要的元素，并且已經(jīng)附加了一個單擊偵聽器來切換啟動/停止模式。

class NoAutoplayGif extends HTMLElement {
  constructor() {
    super()

    // 添加 shadow DOM
    this._shadowRoot = this.attachShadow({ mode: 'open' })

    // 從上面添加模板
    this._shadowRoot.appendChild(
      noAutoplayGifTemplate.content.cloneNode(true)
    )

    // 我們稍后會需要這些
    this.canvas = this._shadowRoot.querySelector('canvas')
    this.img = this._shadowRoot.querySelector('img')
    this.label = this._shadowRoot.querySelector('.gif-label')
    this.container = this._shadowRoot.querySelector('.no-autoplay-gif')

    // 使整個東西可點擊
    this._shadowRoot.querySelector('.no-autoplay-gif').addEventListener('click', () => {
      this.toggleImage()
    })
  }

  // ...
}

為了不遇到未定義的方法錯誤，我們還添加了這三個方法：

class NoAutoplayGif extends HTMLElement {
  // ...
  toggleImage(force = undefined) {
    this.img.classList.toggle('hidden', force)

    // We need to check for undefined values, as JS does a distinction here.
    // We cannot simply negate a given force value (i.e. hiding one thing and unhiding another)
    // as an undefined value would actually toggle the img, but
    // always hide the other two, because !undefined == true
    this.canvas.classList.toggle('hidden', force !== undefined ? !force : undefined)
    this.label.classList.toggle('hidden', force !== undefined ? !force : undefined)
  }

  start() {
    this.toggleImage(false)
  }

  stop() {
    this.toggleImage(true)
  }
  // ...
}

start/stop 方法允許我們強制啟動或強制停止 gif。理論上，我們現(xiàn)在可以這樣做：

const gif = document.querySelector('no-autoplay-gif')
gif.start()
gif.stop()
gif.toggleImage()

最后，我們可以添加圖片加載部分。讓我們先做一些驗證：

class NoAutoplayGif extends HTMLElement {
  // ...
  loadImage() {
    const src = this.getAttribute('src')
    const alt = this.getAttribute('alt')

    if (!src) {
      console.warn('A source gif must be given')
      return
    }

    if (!src.endsWith('.gif')) {
      console.warn('Provided src is not a .gif')
      return
    }

    // More stuff
  }
  // ...
}

最后一步，我們可以加載圖像，設(shè)置一些寬度和高度并使用畫布：

class NoAutoplayGif extends HTMLElement {
  // ...
  loadImage() {
    // Validation

    this.img.onload = event => {
      const width = event.currentTarget.width
      const height = event.currentTarget.height

      // Set width and height of the entire thing
      this.canvas.setAttribute('width', width)
      this.canvas.setAttribute('height', height)
      this.container.setAttribute('style', `
        width: ${width}px;
        height: ${height}px;
      `)

      // "Draws" the gif onto a canvas, i.e. the first
      // frame, making it look like a thumbnail.
      this.canvas.getContext('2d').drawImage(this.img, 0, 0)
    }

    // Trigger the loading
    this.img.src = src
    this.img.alt = alt
  }
  // ...
}

我們完成了！