单页应用 SPA(Sigle Page Aolication)

时间 2019-11-30

标签单页应用 spa sigle page aolication 繁體版

原文原文链接

单页应用 SPA(Sigle Page Aolication)

优势：javascript

一、具备桌面应用的即时性、网站的可移植性和可访问性。css

二、用户体验好、快，内容的改变不须要从新加载整个页面，web应用更具响应性和更使人着迷。html

三、基于上面一点，SPA相对对服务器压力小。前端

四、良好的先后端分离。SPA和RESTful架构一块儿使用，后端再也不负责模板渲染、输出页面工做，web前端和各类移动终端地位对等，后端API通用化。java

缺点：jquery

一、不利于SEO。web

二、初次加载耗时相对增多。ajax

三、导航不可用，若是必定要导航须要自行实现前进、后退。bootstrap

第一步：在主页面完成配置后端

<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();
    }
})