jQuery plugin для Hash-навигации в AJAX-сайтах

В данной статье я опишу свой компонет с названием “jQuery plugin для Hash-навигации в AJAX-сайтах”.

Компонент позволяет:

• — динамически изменять 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”
т.е происходит дописывание данных к уже существующим либо если данные с таким именем существуют, происходит их замена.