https://github.com/bem/bem-history

BEM wrap for History API
https://github.com/bem/bem-history

Last synced: about 1 year ago
JSON representation

BEM wrap for History API

• Host: GitHub
• URL: https://github.com/bem/bem-history
• Owner: bem
• License: other
• Created: 2013-07-11T12:17:23.000Z (almost 13 years ago)
• Default Branch: v4
• Last Pushed: 2018-01-19T21:57:10.000Z (over 8 years ago)
• Last Synced: 2025-03-20T19:17:28.710Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://bem.info/libs/bem-history/
• Size: 204 KB
• Stars: 23
• Watchers: 16
• Forks: 21
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
bem-history

===========

## What is this?

BEM wrap for History API:

* supports browsers with a native History API and hashchange event;

* provides manipulations with url, browser location and history in the terms of [BEM](http://bem.info/).

## Components

* `uri__querystring` – module for an url parsing;

* `history` – module provides work with a browser History with two modificators:

 * `provider_history-api` – supports a native History API;

 * `provider_hashchange` – supports fallback on the hashchange event;

* `location` – high-level module for a `window.location` change.

## Scheme of library work

![bem-history workflow](https://cdn.rawgit.com/bem/bem-history/v4/bem-history_from-browser.svg)

## Usage

### uri__querystring

```js

modules.require(['uri__querystring'], function(Querystring) {

    // Parse url

    var u = Querystring.Uri.parse('http://example.org:8080/path?test=1&test=2&param2=22');

    // Change port

    u.setPort(80);

    // Change query params

    u.deleteParam('test', '2');

    u.replaceParam('param2', 2);

    // Serialize url

    u.toString(); // "http://example.org:80/path?test=1&param2=2"

});

```

### history

```js

modules.require(['history'], function(History) {

    // Create history instance

    var history = new History();

    // Push new or replace history state

    history.changeState('push', { title: 'Title', url: 'http://example.org:8080/path' });

    history.changeState('replace', { title: 'Title', url: 'http://example.org:8080/path?test=1' });

});

```

### location

```js

modules.require(['location'], function(location) {

    // Change `window.location` using a full url

    location.change({ url: 'http://example.org:8080/path' });

    // Change current location using only the new query params

    location.change({ params: { param1: [11,12], param2: 'ololo' } });

    window.location.href; // "http://example.org:8080/path?param1=11&param1=12&param2=ololo"

});

```