单页应用 SPA(Sigle Page Aolication)
单页应用 SPA(Sigle Page Aolication)
优点：
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、基于上面一点，SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
缺点：
1、不利于SEO。
2、初次加载耗时相对增多。
3、导航不可用，如果一定要导航需要自行实现前进、后退。
第一步：在主页面完成配置
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主页面</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css">//每个模块都有的css都写在主页面
</head>
<body>
<script type="text/javascript" src="js/sea.js"></script>//引入模块加载器
<div id="content"></div>
<script>
seajs.config({
base:".",
alias:{
jquery:"js/jquery-1.12.4.minSeajs",
bootstrap:"js/bootstrap.minSeajs",
handlebars:"js/handlebars.minSeajs",
register:"modules/register/register",
login:"modules/login/login",
students:"modules/students/students"
}
});
seajs.use("./js/main")//入口模块
</script>
第二步：在public下新建modules分好每个模块的文件夹，每个模块的js写法如下：
define(function(require,exports){//模块化标准写法
var $ = require("jquery");
var load=function(){
window.location.replace("index.html#login");//用于入口模块应用，使刷新不会转换页面
$("#content").load("/modules/login/login.html",function(){//使用了ajax的load方法
$(':button[value=注册]').click(function(){
var register= require("register");
register.load();//页面转换
})
})
}
exports.load=load;//暴露方法
})
第三步：写入口模块
define(function(require){
var register=require("register");
var login=require("login");
var students=require("students")
var hash=window.location.hash;//获取#后面的内容，例如#login
var idx=hash.indexOf("?");
if(idx>=0){
hash=hash.substring(0,idx);//截取字符串，不含？以后的内容
}
if(hash=="#register"){//判断是否转换模块
register.load();
}else if(hash=="#login"){
login.load();
}else if(hash=="#students"){
students.load();
}else{
register.load();
}
})
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法
· Vite CVE-2025-30208 安全漏洞