@abradley2/url-change-event 中文文档教程

Question

Url Change Event

const initialize = require('@abradley2/url-change-event')

用于拦截所有链接点击文档正文的便捷模块 具有 data-link="replaceState" 或 data-link="pushState" 属性，调用 相应的 history 方法，然后在窗口上触发 urlchange 事件 当文档的位置以这种方式更改时。

这使得在单页应用程序中支持路由变得非常简单。

Usage

const initialize = require('@abradley2/url-change-event')

// initialize the listeners and interceptors. Returns a function
// that will unsubscribe these listeners.
const stopListening = initialize()

// you can now listen to the "urlchange" event on the window
window.addEventListener('urlchange', (event) => {
  // you can handle this however. The location on the document is passed for convenience

  return document.location === event.detail // true
})

触发 replaceState 的链接应该类似于这样：

<a href="/path/in/application#someAnchor" data-link="replaceState"> Go somewhere! </a>

触发 pushState 的链接应该类似于这样：

<a href="/push/some/state?query=true" data-link="pushState"> Go somewhere! </a>

data-link 属性很重要。 如果值为 pushState 或 replaceState， 然后将调用 preventDefault 并触发事件。 如果没有，则什么也不会发生。

Popstate events

除了通过页面链接导航之外，urlchange 事件也会为 popstate 触发 事件，因此也无需手动订阅。

State

此辅助方法的初始化函数采用可选参数： 一个接收链接元素作为第一个参数的函数， 然后返回任何需要作为 state 参数传递的数据 随后的历史变化。

const initialize = require('@abradley2/url-change-event')

initialize(function getStateFromElement(el) {
  // this can be anything really. It is passed as the `stateObj` to the history method
  // (the first argument to either history.replaceState or history.pushState)
  return {
    data: el.getAttribute('data-link-state')
  }
})

Title

要响应单击链接而更改文档的标题，通过 调用历史方法的第二个参数，只需将 data-title 属性设置为 任何关联的 data-link 元素上所需的文档标题。

License

麻省理工学院