Frameworkless Front-End Development 项目教程

瞿勋利Godly

于 2024-09-25 08:04:19 发布

阅读量684

点赞数 21

本文链接：https://blog.csdn.net/gitblog_00154/article/details/142508429

版权

Frameworkless Front-End Development 项目教程

frameworkless-front-end-development Source code for 'Frameworkless Front-End Development' by Francesco Strazzullo 项目地址: https://gitcode.com/gh_mirrors/fr/frameworkless-front-end-development

1. 项目的目录结构及介绍

frameworkless-front-end-development/
├── chapter-1/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-2/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-3/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-4/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-5/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-6/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── chapter-7/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── README.md
└── LICENSE

目录结构介绍

chapter-1/ 至 chapter-7/：每个章节对应一个目录，包含该章节的示例代码和资源文件。
- index.html：章节的HTML文件。
- script.js：章节的JavaScript文件。
- style.css：章节的CSS文件。
README.md：项目的说明文件，包含项目的基本信息和使用指南。
LICENSE：项目的许可证文件，说明项目的开源许可类型。

2. 项目的启动文件介绍

每个章节的启动文件是 index.html，例如在 chapter-1/ 目录下的 index.html。

启动文件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 1 - Let's Talk About Frameworks</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Chapter 1 - Let's Talk About Frameworks</h1>
    <script src="script.js"></script>
</body>
</html>

启动文件介绍

index.html：每个章节的HTML文件，包含了章节的基本结构和内容。
script.js：每个章节的JavaScript文件，包含了章节的逻辑代码。
style.css：每个章节的CSS文件，包含了章节的样式定义。

3. 项目的配置文件介绍

项目中没有专门的配置文件，所有的配置和逻辑代码都直接写在 index.html 和 script.js 中。

配置文件示例

由于项目没有独立的配置文件，所有的配置和初始化代码都直接写在 script.js 中。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Chapter 1 - Let's Talk About Frameworks');
    // 其他初始化代码
});