html、css和js代码分离

最新推荐文章于 2025-02-09 11:25:41 发布

goodbye road

最新推荐文章于 2025-02-09 11:25:41 发布

阅读量462

点赞数 2

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/bll1355/article/details/140531643

版权

一、代码分离

网页主要由结构、表现和行为三部分组成。结构用于描述网页的框架，对应语言有HTML，HTML使用标签的形式来标识网页中的不同组成部分；表现用于控制页面元素的样式，对应语言有CSS；行为用于相应用户的操作，对应语言有JavaScript。

当我们开发项目，功能设计常常遵循以下几个原则：

1、避免重复原则，编程的最基本原则是避免重复，换句话说叫提高代码复用率。

2、简单原则，简单是用户最佳体验之一，而且简单的代码占用时间少，漏洞少，且易于修改。

3、低耦合原则，即这部分代码的使用和修改影响到其他部分的代码尽可能少，否则牵一发而动全身。

4、单一责任原则，某个代码的功能，应该保证只有单一的明确的执行任务，否则一旦修改会增加关联测试的繁琐程度。

因此代码分离是现代Web开发中的一个常见实践，可以提高代码的可维护性和重用性。html、css和js实现代码分离可以将其分别保存在不同的文件中，然后在 HTML 文件中通过<link>和<script>标签引入。

以下是一个简单例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码分离</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello,World！</h1>
    <script src="script.js"></script>
</body>
</html>

styles.css

body{
    font-family:Arial,sans-serif;
    background-color: #f8f8f8;
}
h1{
    color: #000;
}

script.js

document.addEventListener("DOMContentLoaded",(Event)=>{
    console.log('Page is loaded and DOM is ready!');
});