一、代码分离
网页主要由结构、表现和行为三部分组成。结构用于描述网页的框架,对应语言有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!');
});