@abradley2/url-change-event 中文文档教程
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
麻省理工学院
Url Change Event
const initialize = require('@abradley2/url-change-event')
Convenience module for intercepting all link clicks on the body of the document that have either data-link="replaceState" or data-link="pushState" attributes, calling the corresponding history method, and then firing a urlchange event on the window when the location of the document has changed in this way.
This makes it very simple to support routing in single page applications.
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
})
A link that triggers replaceState should look similar to this:
<a href="/path/in/application#someAnchor" data-link="replaceState"> Go somewhere! </a>
A link that triggers pushState should look similar to this:
<a href="/push/some/state?query=true" data-link="pushState"> Go somewhere! </a>
The data-link attribute is important. If the value is either pushState or replaceState, then preventDefault will be called and the event triggered. If not, then nothing happens.
Popstate events
In addition to navigation via page links, the urlchange event is also fired for the popstate event, so there's no need to manually subscribe to that as well.
State
The initialization function for this helper method takes on optional argument: a function which recieves the element of the link clicked as it's first argument, and then returns whatever data is desired to be passed as the state argument in the subsequent history change.
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
To have the title of the document change in response to a link being clicked, via the second argument to the invoked history method, just set the data-title attribute to the desired document title on any associated data-link element.
License
MIT
