前端单页面富应用(SPA)的实现

一、 什么是单页面富应用?

单页面应用:Single Page Application

  • 概念:Web应用即使不刷新也在不同的页面间切换,解决浏览器前进、后退等机制被破坏等问题。并且页面访问会被浏览器保存。
  • 实现方法:
    1. Node+Html5实现
    2. React/Vue等MVVM框架

二、单页面应用的实现

1. Node+Html5

H5实现单页面应用为什么需要Node?
虽然使用的是H5的新特性:History API,但是单页面应用实际上是利用路由变化从而判断是否改变内容。这里仅用node开启服务,url地址的变化采用的是H5的History API。

步骤
  1. 使用express自动化构建项目
express myAppName
  1. 去掉多余路由文件(user.js),修改App.js渲染文件的类型(默认jade => html)
app.engine('html',require('ejs').renderFile);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
  1. 编写index.html
    项目效果:点击相应button,url路由和底部内容都会相应变化
    node+h5
//html
<div class="appWried">
    <div class="appBtn">
        <button>PAGE1</button>
        <button>PAGE2</button>
        <button>PAGE3</button>
    </div>
    <div class="appContent">
        暂无内容
    </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
    var button = $('.appBtn button');

    button.click(function(){
        let route = $(this).text(); //获取按钮的文本
        //把按钮内容当做url路由导航
        pageChange(route);

        //history.pushState 添加浏览器历史
        history.pushState('','',route)   //state回调函数传入对象 title新页面标题 url新页面路径,地址栏会显示新路径
    })

    //根据点击或者路由改变相应的页面内容
    function pageChange(route){
        console.log(route);
        button.removeClass('active');

        //filter() 方法将匹配元素集合缩减为匹配指定选择器的元素
        button.filter(function(){
            return $(this).text() == route;
        }).addClass('active');
        
        //改变内容
        $('.appContent').text(`我是${route}`);
    }
})
</script>

这里为了方便,我采用了JQuery的官方CDN。
pushState是html5的History新增的。

window.history.pushState(json,title,url)  
// 状态对象:记录历史记录点的额外对象,可以为空  
// 页面标题:目前所有浏览器都不支持, 可以为空  
// 可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域  

此外,pushState经常搭配监听历史记录点事件window.onpopstate来监听url的变化。并且可以获取存储在该历史记录点的状态对象,也就是pushState存储的json对象。例如:

window.addEbentListener('popState',function(){
    console.log('url改变')
})
2. React

现在很多前端框架都追求组件化开发、组件化复用。组件化和单页面应用非常配。所以React、Vue等也常常用于SPA的开发。
使用React开发SPA至少需要用到:React、React-router(-dom)

项目使用的是React-router-dom。
react-router 和 react-router-dom 的不同之处就是后者比前者多出了 这样的 DOM 类组件。并且react-router-dom是其升级版,可以更快更新,react-router即将废弃.

项目效果:
React+SPA

//views/index.js
import React from 'react';
import { Link,withRouter } from 'react-router-dom'
import './style.css'

class AppPage extends React.Component{
    constructor(arg){
        super(arg)

        this.state={}
    }

    render(){
        let appContent = ''
        if(this.props.history.location.pathname){
            appContent = this.props.history.location.pathname
        }else{
            appContent = '暂无内容'
        }

        return(
            <div className="appWried">
                <div className="appBtn">
                    <Link to="/PAGE1">
                        <button className={ this.props.history.location.pathname === '/PAGE1' ? 'active' : '' }>PAGE1</button>
                    </Link>
                    <Link to="/PAGE2">
                        <button className={ this.props.history.location.pathname === '/PAGE2' ? 'active' : '' }>PAGE2</button>
                    </Link>
                    <Link to="/PAGE3">
                        <button className={ this.props.history.location.pathname === '/PAGE3' ? 'active' : '' }>PAGE3</button>
                    </Link>
                </div>
                <div className="appContent">
                    {appContent}
                </div>
            </div>
        )
    }
}

AppPage = withRouter(AppPage); //通过withRouter给AppPage组件注入路由信息

export default AppPage;
//App.js
import AppPage from './views/index'
<Router>
    ...
    <AppPage />
    ...
</Router>

注意:使用了route、withRouter需要在app.js最外层嵌套Router组件

至此,利用React实现简单的SPA就完成了!

三、总结

   单页面应用开发在前端已经是不可或缺了。单页面应用既有它的优点,也有它的缺点。

优点:
  1. 良好的交互体验

用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。

  1. 良好的前后端工作分离模式

单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。

  1. 减轻服务器压力

服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;

  1. 共用一套后端程序代码

不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端;

缺点:
  1. SEO难度较高

由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。

  1. 前进、后退管理

由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现。

  1. 初次加载耗时多

为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理,如果使用第三方库,建议使用一些大公司的CDN,因此带宽的消耗是必然的。

转载于:https://www.cnblogs.com/wbxjiayou/p/6155340.html

解决SPA的SEO(搜索引擎优化):SSR(服务器渲染)
SSR:服务器将每个要展示的页面都运行完成后,将整个相应流传送给浏览器,所有的运算在服务器端都已经完成,浏览器只需要解析 HTML 就行。

具体SSR作用下次介绍~

附上上面代码的github:SPA的实现

转载于:https://www.cnblogs.com/soyxiaobi/p/9509917.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SPA(Single Page Application)页面应用是一种基于前端Web 应用程序,所有的页面都由一个 HTML 文件和相应的 JavaScript 脚本动态生成。它的优势和劣势如下: 优势: 1. 用户体验好:SPA 采用异步加载的方式,只需要加载一次页面,之后的页面内容都是通过 AJAX 动态获取,用户不需要每次都重新加载整个页面,能够更快地响应用户操作,提升用户的体验。 2. 路由管理方便:SPA 采用前端路由技术,可以通过 URL 来切换不同的页面状态,不需要进行页面的重新加载,实现页面的无刷新加载,提高了网站的速度和流畅度。 3. 开发效率高:SPA 的前后端分离模式,使得前端和后端可以独立开发和部署,提高了开发效率和灵活性。 4. 适用于大型应用:随着应用规模的增大,SPA 的优势尤为明显,因为它的性能和用户体验都能够得到保证。 劣势: 1. 首屏加载时间长:由于 SPA 的异步加载方式,需要在首次访问时加载所有的 JavaScript 和 CSS 文件,因此首屏加载时间会比较长。 2. SEO 不友好:由于 SPA 的所有页面都是由 JavaScript 动态生成的,搜索引擎的爬虫无法获取到所有的页面内容,因此对于 SEO 不太友好。 3. 浏览器兼容性问题:由于 SPA 使用了 HTML5、CSS3 和 ES6 等新技术,因此对浏览器的兼容性要求比较高,低版本的浏览器可能无法正常运行。 4. 对前端开发要求高:SPA 的开发需要掌握多种技术,包括前端框架、路由管理、API 接口设计等,对前端开发者的技术水平要求较高。 总之,SPA 页面应用具有很多优势,能够提高用户体验和开发效率,但也存在一些劣势,需要在实际开发中进行权衡和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值