單頁應用 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();
    }
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。