單頁面應用程序(SPA)

時間 2019-11-17

標籤頁面應用程序 spa 简体版

原文原文鏈接

1、概念

①在一個頁面上實現網站的大部分功能，就是單頁面應用程序，是一種常見的網頁開發模式。javascript

②整個網站就只有一個Html文件，每次在切換頁面時，不須要請求服務器，只要經過本地的js來切換便可。這樣能夠減少服務器壓力、加強用戶體驗，增長app的使用流暢性。html

2、特色

①優勢：前端

具備桌面應用的即時性、網站的可移植性和可訪問性。
用戶體驗好、快，內容的改變不須要從新加載整個頁面，web應用更具響應性和更使人着迷。
基於上面一點，SPA相對對服務器壓力小。
良好的先後端分離。SPA和RESTful架構一塊兒使用，後端再也不負責模板渲染、輸出頁面工做，web前端和各類移動終端地位對等，後端API通用化。
對前端人員javascript技能要求更高，促使團隊技能提高。

②缺點：java

分功能模塊的鑑權很差實現。
不利於SEO搜索引擎優化
初次加載耗時相對增多
導航不可用，若是必定要導航須要自行實現前進、後退。
對開發人員技能水平、開發成本高。

3、具體應用

①單頁應用確定是要使用一些框架的，好比Vue、Angular、React等，可是使用 Vue、Angular、React 也不必定是作單頁，作單頁必定是先後端分離的方式，若是有 SEO 需求，則不要作成單頁jquery

②具體使用的網站：網易雲音樂、coding、Gmail等web

4、模擬單頁應用

①historyAPI方案，參考以前的章：歷史相關API
後端

②哈希（路由）方案：使用location.hash和hashchange事件實現路由服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模擬單頁面應用</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #f7f7f7;
            font-family: Arial, Helvetica, sans-serif;
        }
        header{
            background: #242424;
            border-bottom: #000;
        }
        .wrapper{
            width: 1100px;
            height: 70px;
            margin: 0 auto;
        }
        .wrapper h1{
            float: left;
            width: 176px;
            height: 69px;
            background: url("topbar.png") no-repeat 0 0;
            font-size: 0;
        }
        .wrapper ul{
            list-style: none;
        }
        .wrapper ul li{
            float: left;
            height: 70px;
        }
        .wrapper ul li.now,
        .wrapper ul li:hover{
            background: red;
        }
        .wrapper ul li a{
            padding: 0 20px;
            display: block;
            color: #fff;
            line-height: 70px;
            text-decoration: none;
        }
        .content{
            width: 1100px;
            margin: 0 auto;
            font-size: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div class="wrapper">
            <h1>網易雲音樂</h1>
            <ul>
                <!-- 爲了和普通的錨點做區分，因此這裏的路徑加了一個前綴# -->
                <li><a href="#/">發現音樂</a></li>
                <li><a href="#/my">個人音樂</a></li>
                <li><a href="#/friend">朋友</a></li>
            </ul>
        </div>
    </header>
    <!-- 其它頁面都須要顯示在這個容器中 -->
    <div class="container" id="container"></div>
    <script src="jquery.js"></script>
    <script>
    // 經過註冊 window.onhashchange 事件來監聽 hahs（錨點）的改變
    // url 地址發生改變以後,就解析 hash 中的路徑標識
    // 而後根據不一樣的路徑標識渲染不一樣的頁面到單頁面中的容器中
    window.onhashchange=function(){
        var hash=window.location.hash.substr(1);//去除#
        if(hash==='/'){
            $.get('./find.html',function(data){
                $('#container').html(data);
                console.log(data)
            });
        }else if(hash==='/my'){
            $.get('./my.html',function(data){
                $('#container').html(data);
            });
        }else if(hash==='/friend'){
            $.get('./friend.html',function(data){
                $('#container').html(data);
            });
        }
    }
    </script>   
</body>
</html>

相關標籤/搜索

每日一句

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