Pull to refresh

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”
т.е происходит дописывание данных к уже существующим либо если данные с таким именем существуют, происходит их замена.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.