В данной статье я опишу свой компонет с названием “jQuery plugin для Hash-навигации в AJAX-сайтах”.
Компонент позволяет:
Я не претендую на уникальность, и знаю что в интернете есть множество подобных плагинов, но не один из них меня не устроил, в итоге я написал так, как хотел бы видеть использование данной технологии у себя в проекте.
Далее под катом.
Для начала подключаем jQuery:
И наш компонент, файл jquery.urlCommands.js
с небольшим содержимым:
Пример использования:
Данный пример вызовет alert(‘hello’) в случае если url будет иметь такой вид
/any/url/#!alert/hello
Итак мы имеет в строке браузера url — “/any/url/#!alert/hello”
теперь вызовем:
url примет вид: “/any/url/#!alert/hello/foo/bar”
т.е происходит дописывание данных к уже существующим либо если данные с таким именем существуют, происходит их замена.
Компонент позволяет:
- — динамически изменять URL без перезагрузки страницы вида /url#!keyN/valueN
- — назначать события на значения в url переданных после префикса #!
Я не претендую на уникальность, и знаю что в интернете есть множество подобных плагинов, но не один из них меня не устроил, в итоге я написал так, как хотел бы видеть использование данной технологии у себя в проекте.
Далее под катом.
Для начала подключаем jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
И наш компонент, файл jquery.urlCommands.js
<script type="text/javascript" src="jquery.urlCommands.js"></script>
с небольшим содержимым:
var urlCommands = (function () {
var self = this;
this.hash = false;
this.commands = {};
this.events = {};
$(window).bind('hashchange', function() {
self.init();
});
this.init = function() {
this.hash = window.location.hash;
this.commands = {};
if( ~self.hash.indexOf('#!') ) {
var data = self.hash.replace('#!','').split('/');
for (var i in data) {
if (!data.hasOwnProperty(i)) continue;
i = parseInt(i, 10);
var key, value;
key = (!!data[i]) ? data[i] : false;
if (!key) continue;
value = (!!data[i+1]) ? data[i+1] : '';
this.commands[key] = value;
delete data[i+1];
}
}
return this;
}
this.bind = function(name, event) {
if (typeof event != 'function') return false;
$(window).unbind('hashchange').bind('hashchange', function() {
self.init();
if (!!self.commands[name]) event(self.commands[name]);
});
if (!!self.commands[name]) {
event(self.commands[name]);
this.events[name] = event;
}
}
this.urlPush = function(data) {
if (typeof window.history.pushState == 'function' && typeof data == 'object') {
var url = '#!';
$.each(data, function(key, value) {
url += key+'/'+value+'/';
});
$.each(self.commands, function(key, value) {
if (typeof data[key] == 'undefined' && !data[key]) {
url += key+'/'+value+'/';
}
});
window.history.pushState(null, null, url);
this.init();
}
}
this.init();
return this;
})();
Пример использования:
urlCommands.bind('alert', function(message) {
alert(message)
});
Данный пример вызовет alert(‘hello’) в случае если url будет иметь такой вид
/any/url/#!alert/hello
Итак мы имеет в строке браузера url — “/any/url/#!alert/hello”
теперь вызовем:
urlCommands.urlPush({foo: ‘bar’’});
url примет вид: “/any/url/#!alert/hello/foo/bar”
т.е происходит дописывание данных к уже существующим либо если данные с таким именем существуют, происходит их замена.