单页应用 SPA(Sigle Page Aolication)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单页应用 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();
}
})以上是关于单页应用 SPA(Sigle Page Aolication)的主要内容，如果未能解决你的问题，请参考以下文章