Пишем свой jQuery plugin для Hash-навигации в AJAX-сайтах

В данной статье я опишу как написать свой простой но полноценный JQuery компонент для Hash-навигации в AJAX-сайтах, размером всего в 60 строчек.

Компонент позволяет:
— динамически изменять URL без перезагрузки страницы вида /url#!keyN/valueN
— назначать события на значения в url переданных после префикса #!

Если интересно добро пожаловать под кат.

Для начала полный код компонента:

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];
			}
			$.each(self.commands, function(key, value) {
				if (!!self.events[key]) self.events[key](self.commands[key]);
			});
		}
		return this;
	},
	this.bind = function(name, event) {
		if (typeof event != 'function') return false;
		this.events[name] = event;
		if (!!self.commands[name]) event(self.commands[name]);
	},

	this.urlPush = function(data, reset) {
		reset = reset || false;
		if (typeof window.history.pushState == 'function' && typeof data == 'object') {
			var url = '#!';
			$.each(data, function(key, value) {
				self.commands[key] = value;
			});
			if  (reset) self.commands = {};

			$.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, url, url);
		}
	}
	this.init();
	return this;
})();

Теперь разберем код компонента по порядку.

var urlCommands = (function () { код компонента })();
Таким кодом мы инициируем объект urlCommands через классическое замыкание.
Основные переменные объекта
this.hash — тут всегда храниться актуальная копия window.location.hash
this.commands — обьект который хранит нормализованные данные из hash в формате key:value
this.events — события которые мы назначаем на появление в url нужных нам ключей в hash

Основные методы объекта
$(window).bind('hashchange', function() {}); подписываемся на событие изменения hash, нужно чтобы поддерживать актуальное состояния объекта this.commands

this.init — метод занимается разбором сырого hash и нормализовывает его в к нужному нам формату
this.bind — метод назначения событий
this.urlPush — метод изменения hash данных в url и объекте this.commands

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