我已经开始使用 HTML 和 jQuery 创建一个简单的单页应用程序。我的问题是所有代码都在索引文件中，并且很快就会变得难以管理：
<!DOCTYPE HTML>
<html>
<head>
<title>SPA</title>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<section id="page-1">
<h1>Page 1</h1>
<p>This is page 1</p>
<a href="#" class="page-2-btn">Go to page 2</a>
<a href="#" class="page-3-btn">Go to page 3</a>
</section>
<!-- Page 2 -->
<section id="page-2" style="display:none;">
<h1>Page 2</h1>
<p>This is page 2</p>
<a href="#" class="page-1-btn">Go to page 1</a>
<a href="#" class="page-3-btn">Go to page 3</a>
</section>
<!-- Page 3 -->
<section id="page-3" style="display:none;">
<h1>Page 3</h1>
<p>This is page 3</p>
<a href="#" class="page-1-btn">Go to page 1</a>
<a href="#" class="page-2-btn">Go to page 2</a>
</section>
<!-- jQuery navigation code -->
<script type="text/javascript">
var animationSpeed = 500;
var currentPage = "#page-1";
$(document).ready(function() {
$(".page-1-btn").click(function() {
$(currentPage).fadeOut(animationSpeed, function(){
$("#page-1").fadeIn(animationSpeed);
currentPage = "#page-1";
});
});
$(".page-2-btn").click(function() {
$(currentPage).fadeOut(animationSpeed, function(){
$("#page-2").fadeIn(animationSpeed);
currentPage = "#page-2";
});
});
$(".page-3-btn").click(function() {
$(currentPage).fadeOut(animationSpeed, function(){
$("#page-3").fadeIn(animationSpeed);
currentPage = "#page-3";
});
});
});
</script>
</body>
</html>
有没有办法将页面分开以使代码更加模块化？
我正在考虑将其转换为 javascript MVC 框架，这将允许我将 html 分离为视图，但由于页面基本上是静态的，而且我只使用水疗中心，因此导航很流畅我不确定是否值得额外的时间. 我也不希望该应用程序保留大多数 mvc 框架似乎具有标准的历史记录。