在网站开发中,使用公共的头部和底部可以为每个页面提供一致的外观和导航结构。这样做可以减少重复的代码,并简化维护过程。在JavaScript中,我们可以通过使用模块化的方式来实现这一目标。
模块化是一种将代码拆分成独立模块的开发方法。在这种情况下,我们可以创建一个头部模块和一个底部模块,然后在每个页面中引用它们。下面是一个示例的实现过程:
首先,创建一个名为header.js
的JavaScript文件,用于定义头部模块的内容。在这个文件中,你可以编写头部的HTML结构和样式,以及任何与头部相关的JavaScript逻辑。例如:
// header.js
const header = document.createElement('header');
header.innerHTML = '<h1>网站标题</h1><nav>&l