返回

用户指南：手写前端框架，21 天挑战 Day 3

前端

在进入 Day 3 的学习之前，请确保您已经完成 Day 1 和 Day 2 的内容。如果还没有，请参阅 Day 1 和 Day 2 的指南以了解前端框架的基本概念和构建方法。

Day 3：让页面运行起来

1. 创建 HTML 文件

  • 打开您喜欢的文本编辑器或 IDE。
  • 创建一个新文件，并将其命名为 index.html。
  • 在 index.html 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="framework.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
  • 保存 index.html 文件。

2. 将框架集成到 HTML 中

  • 打开 framework.js 文件。
  • 在 framework.js 文件的末尾添加以下代码：
// 在页面加载后运行框架
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有带有 `data-component` 属性的元素
  const components = document.querySelectorAll('[data-component]');

  // 遍历这些元素并初始化框架组件
  components.forEach((component) => {
    const componentName = component.getAttribute('data-component');
    const componentInstance = new Framework[componentName](component);
    componentInstance.init();
  });
});
  • 保存 framework.js 文件。

3. 添加基本的样式

  • 打开 framework.css 文件。
  • 在 framework.css 文件中添加以下代码：
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: blue;
  font-size: 2rem;
  text-align: center;
}
  • 保存 framework.css 文件。

4. 运行页面

  • 在浏览器中打开 index.html 文件。
  • 您应该会看到一个网页，上面写着“Hello, World!”，并且文本是蓝色的，居中显示。

恭喜您，您已经成功地让您的手写前端框架运行起来了！

拓展内容

  • 您可以继续挑战，在接下来的日子里添加更多的功能和组件到您的框架中。
  • 您可以尝试使用您的框架来构建一个简单的Web应用程序。
  • 您还可以尝试将您的框架开源，并让其他人使用和贡献。

希望这个指南对您有所帮助！如果您有任何问题或建议，请随时与我联系。