MDN Playground 介绍：让您的代码活起来！

Florian Dieminger2023 年 6 月 22 日阅读时间：6 分钟

在 Mozilla，我们一直在努力赋能 Web 开发人员，并为他们提供创建精彩 Web 体验的最佳资源。今天，我们很高兴地宣布 MDN 的一项突破性新增功能——MDN Playground！（是的，你没听错，也许这听起来有点太激动了）。

什么是 MDN Playground？

MDN Playground 基本上就是您所期望的那样——一种预览 HTML、CSS 和 JavaScript 的简单方法。目前，它涵盖了大多数基础知识；例如基本的自动完成功能、使用独一无二的 Prettier 进行格式化，以及分享您精彩作品的选项（前提是您已登录）。

为什么要使用 MDN Playground？

这是一个好问题。周围有很多 Playground，为什么还要再做一个呢？好吧，理论上，构建一个 Playground 并不复杂（这里对理论大写加粗），并且我们希望它与 MDN 集成。所以我们想，为什么不自己写一个呢，著名遗言。

说笑归说笑，在 MDN 上拥有 Playground 的想法已经存在很久了。在我们的文章中使用交互式示例是一个良好的开端，但有些事情需要更多空间和自由。分享您的想法和解决方案是关键，这应该不是第三方体验。但有一件事感觉像是一个小小的游戏规则改变者，那就是与我们现有的实时示例集成。

您现在可以将 MDN 上任何现有的实时示例分解到 Playground 中（在实时示例上方查找那个小Play按钮）。这使您能够对刚刚阅读的代码进行一些更改，这有助于更好地理解正在发生的事情或将自定义版本发送给您的朋友。暂时不要迷失在那里，但请查看此随机动画示例，您现在可以对其进行重新混搭。

html

<h1>Hello MDN Playground</h1>

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px green,
    3px 3px 3px blue;
}

我希望这在某种程度上解释了原因。这将使我们能够统一我们如何显示和交互代码，交互式示例将是列表中的下一个。

MDN Playground 的主要功能

一些产品特性，非常真实，但确实试图推销它（所以请谨慎对待）

即时原型设计

MDN Playground 提供了一种轻松快捷的方式来快速原型设计和测试您的想法。只需将您的 HTML、CSS 和 JavaScript 代码写入或粘贴到 Playground 中，即可在预览区域中立即查看渲染结果。无论您是在进行小的调整还是构建复杂的 Web 应用程序，Playground 都能提供一个适合您需求的空间。

实时交互

除了静态代码示例之外，MDN Playground 通过启用交互性使代码栩栩如生。您可以实时与代码交互，进行更改并立即观察其效果。这种动态反馈循环允许快速迭代并更深入地了解不同的代码片段的行为。

扩展代码示例

我们知道在文档中阅读代码示例而无法立即尝试它们是多么令人沮丧。有了 MDN Playground，这个问题将成为过去。无论何时在 MDN 上遇到代码示例，您现在都会发现一个方便的Play按钮。单击它将在 MDN Playground 中打开该示例，您可以随时探索和修改。

协作功能

MDN Playground 还支持协作，使与同事合作或寻求社区帮助比以往任何时候都更容易。您可以与他人共享您的代码 Playground，让他们查看和重新混搭您的代码。无论您是在协作完成项目还是接收有关代码的反馈，Playground 都为全球开发人员营造了协作环境。

如何访问 MDN Playground

要开始使用 MDN Playground，只需访问developer.mozilla.org/en-US/play，即可深入互动式 Web 开发的世界。Playground 可在所有现代 Web 浏览器上访问，并且完全免费使用。

加入社区

MDN Playground 不仅仅是一个工具，它还是一个社区驱动的项目。我们鼓励您加入我们充满活力的开发人员社区，在这里您可以分享您的经验，向他人学习，并为 Playground 的发展做出贡献。携手并进，我们可以塑造 Web 开发的未来，并使其更易于所有人使用。

结论

MDN Playground 标志着我们持续努力为开发人员提供最佳工具和资源的一个重要里程碑。凭借其与 MDN Web 文档的无缝集成、即时原型设计功能、实时交互和协作功能，Playground 势必彻底改变您尝试代码的方式。

我们邀请您今天探索 MDN Playground，并在您的 Web 开发之旅中释放新的创造力和生产力。让我们共同构建未来的 Web！

编码愉快！（如果您想了解它是如何工作的，请继续阅读）。

演示

旋转的 Firefox

html

<div class="scene">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg");
  background-size: cover;
  background-position: center;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes spin {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

一个键盘

html

<div id="synth">
  <div class="keyboard">
    <div class="key white" data-note="C"></div>
    <div class="key black" data-note="C#"></div>
    <div class="key white" data-note="D"></div>
    <div class="key black" data-note="D#"></div>
    <div class="key white" data-note="E"></div>
    <div class="key white" data-note="F"></div>
    <div class="key black" data-note="F#"></div>
    <div class="key white" data-note="G"></div>
    <div class="key black" data-note="G#"></div>
    <div class="key white" data-note="A"></div>
    <div class="key black" data-note="A#"></div>
    <div class="key white" data-note="B"></div>
  </div>
</div>

.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex;
  height: 150px;
  width: 310px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.key {
  height: 150px;
  width: 40px;
  margin: 0 2px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.white {
  background-color: #fff;
}

.black {
  position: relative;
  background-color: #333;
  height: 100px;
  width: 20px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-note="C#"],
[data-note="D#"],
[data-note="F#"],
[data-note="G#"],
[data-note="A#"] {
  z-index: 1;
}

const notes = {
  C: 261.63,
  "C#": 277.18,
  D: 293.66,
  "D#": 311.13,
  E: 329.63,
  F: 349.23,
  "F#": 369.99,
  G: 392.0,
  "G#": 415.3,
  A: 440.0,
  "A#": 466.16,
  B: 493.88,
};

const context = new AudioContext();
const masterGain = context.createGain();
masterGain.connect(context.destination);

const oscillators = {};

function playNote(note) {
  if (oscillators[note]) return;

  const frequency = getFrequency(note);
  const oscillator = context.createOscillator();
  oscillator.type = "sawtooth";
  oscillator.frequency.setValueAtTime(frequency, context.currentTime);
  oscillator.connect(masterGain);
  oscillator.start();

  oscillators[note] = oscillator;
}

function stopNote(note) {
  if (!oscillators[note]) return;

  const oscillator = oscillators[note];
  oscillator.stop();
  oscillator.disconnect();
  delete oscillators[note];
}

function getFrequency(note) {
  return notes[note];
}

const keys = document.querySelectorAll(".key");

keys.forEach((key) => {
  const note = key.dataset.note;

  key.addEventListener("mousedown", () => {
    playNote(note);
    key.classList.add("active");
  });

  key.addEventListener("mouseup", () => {
    stopNote(note);
    key.classList.remove("active");
  });

  key.addEventListener("mouseleave", () => {
    stopNote(note);
    key.classList.remove("active");
  });
});

document.addEventListener("keydown", (e) => {
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!key) return;

  const note = key.dataset.note;
  playNote(note);
  key.classList.add("active");
});

document.addEventListener("keyup", (e) => {
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if (!key) return;

  const note = key.dataset.note;
  stopNote(note);
  key.classList.remove("active");
});

幕后

编辑

我们决定使用CodeMirror 进行编辑。正如他们所说

CodeMirror 是一个用于 Web 的代码编辑器组件。它可以用于网站中实现一个文本输入字段，并支持许多编辑功能，并且具有丰富的编程接口以允许进一步扩展。

我们考虑过Monaco，但决定采用更轻量级的方法。到目前为止，它感觉像是正确的选择，让我们等待反馈。

一个简单的runner.html 在一个<iframe>中。这里面还有更多内容。该<iframe>指向<random-uuid>.mdnplay.dev，因此我们隔离了所有实例。该runner.html通过postMessage从 MDN 获取要执行的代码。它没有做太多事情。给定一个名为state的代码对象，例如{ html: "some HTML", css: "some CSS", js: "some JavaScript" }，这就是正在发生的事情

// Add CSS via a style tag to head
const style = document.createElement("style");
style.textContent = state.css;
document.head.appendChild(style);

// Setting HTML to the body.
// This could just be document.body.innerHTML = state.html
// But this won't execute script tags (which we want).
setHTML(document.body, state.html);

// Add JavaScript via script tag to the body
const script = document.createElement("script");
script.textContent = state.js;
document.body.appendChild(script);

dispatchEvent(new Event("load"));

如果您想深入了解细节，请阅读runner.html。

共享和格式化

您可以通过使用“复制 Markdown 到剪贴板”按钮来共享您的 Playground，这使得在 MDN 文章中包含 Playground 代码或将其添加到 GitHub 问题中变得很容易。如果您想共享的不仅仅是纯代码，并且希望人们能够预览和交互，您可以创建一个指向 Playground 的永久链接（您需要登录）。如果您收到一个共享的 Playground，并且内容具有恶意或不当性，您可以标记该 Playground，我们会处理它。

格式化很简单但很好。我们只是让Prettier 完成工作并拥有自己的观点。您可以选择是否按下按钮，因此，如果您更喜欢代码的简洁单行代码，请便。

分解实时示例

我们仍在寻找这里最好的措辞，“移动到 Playground”、“扩展到……”等等。我们会看看。我们称它为什么并不重要。在使用 Playground 的过程中，我发现它非常有用；它改变了我日常工作中使用 MDN 的方式。

早些时候，“实时示例”是在部署期间构建的。让我们不要详细介绍，但它很丑陋，不幸的是现在仍然如此。为了支持当前的实时示例，我们抓取页面以查找正确的代码片段并将它们粘合在一起。在一个美好的新世界里，这将看起来像

html

<pre class="html live-sample___breaking">
  <h1>Breaking the internet!</h1>
</pre>
<pre id="output"></pre>

function getLanguage(node) {
  for (const part of ["html", "css", "js"]) {
    if (node.classList.contains(part)) {
      return part;
    }
  }
  return null;
}

function getCode(cls) {
  const code = {};
  document.querySelectorAll(`pre.live-sample___${cls}`).forEach((pre) => {
    let lang = getLanguage(pre);
    if (lang === null) {
      return;
    }
    code[lang] = (code[lang] || "") + pre.textContent;
  });
  return code;
}

const output = document.getElementById("output");
output.textContent = getCode("breaking").html;

因此，一旦我们有了代码，我们就会像提到的那样将其发送到 iframe 或将其放入sessionStorage，并通过Play按钮将用户发送到 Playground。

下一步

好吧，在某种程度上这取决于您。告诉我们您希望看到什么这里。

MDN Playground 介绍：让您的代码活起来！

什么是 MDN Playground？

为什么要使用 MDN Playground？

MDN Playground 的主要功能

即时原型设计

实时交互

扩展代码示例

协作功能

如何访问 MDN Playground

加入社区

结论

演示

旋转的 Firefox

一个键盘

幕后

编辑

运行和通信

共享和格式化

分解实时示例

下一步

上一篇 MDN 文档更新：CSS 选择器和媒体查询、WebGPU 和 WebTransport API、渐进式 Web 应用

下一篇学习如何使用 HSL 在 CSS 颜色中使用色相

MDN Playground 介绍：让您的代码活起来！

上一篇 MDN 文档更新：CSS 选择器和媒体查询、WebGPU 和 WebTransport API、渐进式 Web 应用

下一篇 学习如何使用 HSL 在 CSS 颜色中使用色相

关注 MDN 的最新动态

下一篇学习如何使用 HSL 在 CSS 颜色中使用色相