单页应用 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)的主要内容,如果未能解决你的问题,请参考以下文章

为啥选择 SPA(单页应用程序)?

关于单页应用(SPA)的经验之谈

如何在单页应用程序 (SPA) 中实现 ReCaptcha

浅析:单页应用(SPA)和多页应用(MPA)的区别

浅析:单页应用(SPA)和多页应用(MPA)的区别

可扩展的web单页应用程序架构