Bagaimana anda boleh membina penjaga hari moden

Ketika datang ke cincin rangkaian, gambar -gambar yang muncul dalam minda orang yang berbeza mestilah berbeza, jadi izinkan saya menerangkan idea saya terlebih dahulu. Saya fikir mesti ada elemen di laman web:

1. Menunjukkan bahawa laman web adalah sebahagian daripada cincin rangkaian;
2. Membolehkan pengguna melompat ke laman web seterusnya atau sebelumnya dalam cincin rangkaian;
3. Mungkin terdapat ciri -ciri lain, seperti melompat ke laman web "rawak" atau melihat senarai penuh.

Tetapi yang lebih penting:

4. Pemilik laman web tidak perlu berbuat banyak. Mereka hanya menambah (ia) ke laman web dan mendapatkan antara muka pengguna cincin web yang berfungsi sepenuhnya.

Seperti ini:

Bagaimana ia berfungsi sebelum ini? Sejujurnya, saya tidak tahu. Saya rasa ia adalah cara kuno, tetapi ia adalah di luar ingatan saya. Bagaimana kita harus mencapainya hari ini? Saya rasa kita boleh menggunakan<iframe></iframe> . Laman web seperti YouTube melakukan ini apabila menyediakan "Kod Kembung" sebagai coretan kod HTML. Laman web seperti Twitter dan Codepen akan menyediakan<div> (atau html semantik lain) dan a <script>，以便可以有备用内容，并且脚本可以将其增强为<code><iframe>。<code><iframe>可能不错，因为它对网站所有者的要求非常低，但众所周知，它的性能相当差。毕竟，它是在另一个文档内嵌套的整个文档。此外，它在自定义方面也没有提供太多选择。你只能得到现有的功能。 <p><code><iframe>的另一个问题是……它如何知道当前嵌入在哪个网站上？也许是 URL 参数？也许是来自父页面的postMessage？如果问我的话，这并不十分简洁。 <p>我认为，如果我们考虑现代化，Web 组件可能是实现此目标的方法。我们可以创建一个自定义元素，例如<code><webring-*>。让我们这样做，并专门为 CSS 网站创建它。这将使我们有机会使用属性发送当前网站，例如： <pre class="brush:php;toolbar:false"><webring-css site="http://css-tricks.com"> 这个元素一会儿就会启动到网络环中。 <p>这解决了技术选择问题。现在我们需要确定存储<strong>数据的全局位置。因为，网络环需要能够被<strong>更新。网站需要能够添加和删除到网络环中，而无需网络环中的其他网站进行任何操作。 <p>对于像这样的相当简单的数据，GitHub 上的 JSON 文件似乎是一个非常现代的选择。让我们这样做。 <p>现在每个人都可以以相当易读的方式查看网络环中的所有网站。此外，他们可以针对它提交拉取请求以添加/删除网站（随意）。 <p>从我们的 Web 组件获取该数据只需一个fetch请求： <pre class="brush:php;toolbar:false">fetch(`https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`) .then((response) => response.json()) .then((sites) => { // 获取了数据。 }); <p>当我们的 Web 组件挂载时，我们将启动它。让我们搭建一下…… <pre class="brush:php;toolbar:false">const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/CSS-Tricks/css-webring/main/webring.json`; const template = document.createElement("template"); template.innerHTML = ` /* styles */ <div > <!-- content --> </script> </div>`; class WebRing extends HTMLElement { connectedCallback() { this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); fetch(DATA_FOR_WEBRING) .then((response) => response.json()) .then((sites) => { // 使用数据更新模板 }); } } window.customElements.define("webring-css", WebRing); <p>其余部分并没有那么有趣，我觉得我们不需要一步一步地讲解。我将为您简单地概述一下：</p> <ol> <li>获取 Web 组件的属性，以便我们可以查看当前网站是什么；</li> <li>在数据中匹配当前网站；</li> <li>从模板中的数据构建“下一个”、“上一个”和“随机”链接；</li> <li>更新模板中的 HTML。</li> </ol> <p>瞧！</p> <p><details><summary> 你可以做更多的事情，例如错误处理、更好的设计和更好的所有方面吗？</summary>是的。</details></p>

Atas ialah kandungan terperinci Bagaimana anda boleh membina penjaga hari moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!