browserHistory原理的一些了解

时间：2024-11-18 08:17:10

browserHistory原理的一些了解

    • 对URL的一些基本认识
    • 实现browserhistory用到的关键Api
      • 一个监听事件popstate
    • 为什么需要服务端配合
    • 值得一提的Trident渲染引擎
    • 参考链接

对URL的一些基本认识

URL：统一资源定位符 (Uniform Resource Locator, URL)。
在这里插入图片描述

完整的URL由这几个部分构成：scheme://host:port/path?query#hash

  • scheme：通信协议，常用的有http、https、ftp、mailto等。
  • host：主机域名或IP地址。
  • port：端口号，可选。省略时使用协议的默认端口，如http默认端口为80。
  • path：路径由零或多个"/"符号隔开的字符串组成，一般用来表示主机上的一个目录或文件地址。
  • query：查询，可选。用于传递参数，可有多个参数，用"&“符号隔开，每个参数的名和值用”="符号隔开。
  • hash：信息片断字符串，也称为锚点。用于指定网络资源中的片断。

我们知道browserhistory是改变path来实现路由的，so...

实现browserhistory用到的关键Api

  • pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：
  • 状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
    状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.
  • 标题 — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的state传递一个短标题。
  • URL 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。

在某种意义上，调用 pushState() 与 设置 = “#foo” 类似，二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点：

新的 URL 可以是与当前URL同源的任意URL 。而设置 仅当你只修改了哈希值时才保持同一个 document。
如果需要，你可以不必改变URL。而设置 = “#foo”;在当前哈希不是 #foo 的情况下， 仅仅是新建了一个新的历史记录项。
你可以为新的历史记录项关联任意数据。而基于哈希值的方式，则必须将所有相关数据编码到一个短字符串里。
假如 标题 在之后会被浏览器用到，那么这个数据是可以被使用的（哈希则不然）。

() 的使用与 () 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

一个监听事件popstate

每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的，或者是由 replaceState 改变的，那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

为什么需要服务端配合

～ 最后由于path更改，刷新的情况下面。浏览器会根据path去请求，这个时候如果没有index.html页面就会呈现不出来

值得一提的Trident渲染引擎

Trident引擎会在popstate时候触发onhashchange事件

var supportsPopStateOnHashChange = exports.supportsPopStateOnHashChange = function supportsPopStateOnHashChange() {
  return window.navigator.userAgent.indexOf('Trident') === -1;
};
  • 1
  • 2
  • 3
'
运行

参考链接

  1. History 对象介绍
  2. 浏览器User-Agent、Cookie

相关文章