zoukankan      html  css  js  c++  java
  • SPA

    为什么用SPA

        1. 减少服务器压力  如果不用spa  那么每次切换页面的时候,就会向服务器发送一个请求  

             服务器返回一个html文件   如果使用了SPA  在切换时,不需要请求服务器,只要通过本地的js来切换即可 并且服务器端不需要配置路由 完全做到前后端分离

       2. 增强用户体验  增加app流畅性 

    SPA路由的实现方式有哪些?

    1. hash方式  使用location.hash和hashchange事件实现路由

    2. history api  使用html5的history api实现  主要就是popState事件等

    SPA实现hash

    1. Router构造函数  当前路由 和 路由对象

    2. 初始化init监听页面加载完成与   hash变化事件  

    3. 页面更新方法

    4.  路由注册方法

    SPA   history API实现方法

    两个方法: history.pushState()  history.replaceState() 

    一个事件: history.onpopstate

    方法的参数:

    参数1: obj 这个对象可以被popstate事件读取到  也可以在history对象中获取

    参数2: title标题, 但是浏览器目前还没能实现 由于本身是个字符串 所以我们用“” 来代替

    参数3:URL路径,一般设定为相对的url 绝对路径需要保证同源

           pushState 向浏览器的历史记录栈中压入一个历史记录 

    事件的触发: 

    在浏览器前进、后退时触发,一般是历史记录栈中的指针改变的时候就会触发这个事件了

    history.state: 存储以上方法的data,不同浏览器的读写权限不一样

    兼容: >IE10, >firefox4 ,>chrome8, safari5,opera11以上

    为什么要使用History API

    ajax的不足:

      无法使用浏览器的前进、后退来切换前后

    数据

      单纯的使用ajax不利于搜索引擎优化

     

  • 相关阅读:
    BZOJ2741:[FOTILE模拟赛]L
    BZOJ3996:[TJOI2015]线性代数
    BZOJ3876:[AHOI2014]支线剧情
    BZOJ1861:[ZJOI2006]Book书架
    BZOJ3190:[JLOI2013]赛车
    HDU-1540 Tunnel Warfare 【线段树+单点修改+区间更新】
    HDU-1846 Brave Game 【巴什博弈】
    HDU-1421 搬寝室 【DP】
    HDU-4734 F(x) 【数位DP】
    AHU-412 Bessie Come Home 【Dijkstra】
  • 原文地址:https://www.cnblogs.com/moneyss/p/10689403.html
Copyright © 2011-2022 走看看