В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.

Наш плагин начинаем следующим образом:

(function($){
    $.fn.backgroundHover = function(options) {
       return this.each(function () {
          // Код плагина
       });
    };
})(jQuery);

Первая и последняя строка этого блока представляют собой вызов анонимной функции, единственным аргументом которого будет объект jQuery. В результате, мы получим еще одну область определения переменных (scope), то есть, все переменные и функции, объявленные внутри этой анонимной функции будут недоступны извне (не распространяются на глобальную область видимости window). Поскольку плагин выполняет действия над некоторым множеством элементов DOM в одном вызове, то мы должны обрабатывать все эти элементы в одном цикле. Это делается при помощи функции each в строке 3.

Все плагины способны принимать некоторое количество параметров, выполним эту функциональность следующим образом:

$.fn.backgroundHover = function(options) {
      options = $.extend({
         background: 'red',
      }, options);

Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае, имеем всего лишь один параметр – цвет фона (background), по умолчанию он имеет значение red.

Ну и последний шаг – добавляем функциональность плагина внутрь функции each:

var self = $(this);
   self.mouseover(function() {
      self.oldBG = self.css('backgroundColor');
      self.css('backgroundColor',options.background);
   });

   self.mouseout(function() {
      self.css('backgroundColor',self.oldBG);
   });

В первой строке мы создаем переменную self, которая будет ссылаться на текущий элемент DOM. Для всех выбранных элементов будут добавлены два обработчика событий – mouseover и mouseout, которые будут менять цвет фона в соответсвии с параметром options.background.

На этом создание плагина закончено, используется он следующим образом:

$('.someNodes').backgroundHover({background: "#fce"});

Исходный код плагина можно посмотреть здесь: background.jquery.js.

Демо примерИсточник

http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2-vsdoc.js
http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js

Помимо основной библиотеки, на CDN можно также найти и плагин для валидации форм jQuery Validate, статью о котором я писал ранее:

http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js
http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

Ну и уж совершенно очевидно, что на своем CDN-е Microsoft также разместил свою библиотеку Microsoft Ajax, полный список файлов которой, вы можете просмотреть здесь: http://www.asp.net/ajax/cdn/.

Чтобы вам было более понятно, с чем мы имеем дело, покажу некоторые примеры запросов.

Получение последних записей из твиттера

Этот запрос просто выбирает последние записи пользователя, id которого указывается в условии where (в данном случае аккаунт твиттера мой – http://twitter.com/ischenko ):

select * from twitter.user.timeline where id='ischenko'

Пост в твиттер

В начале запроса мы подключаем таблицу twitter.status.xml, которая позволяет добавлять записи в твиттер – это так называемая Открытая таблица данных (Open Data Table). Кроме того для выполнения запросов CRUD нужно использовать защищенное соединение (https):

use 'http://www.yqlblog.net/samples/twitter.status.xml';
insert into twitter.status (status,username,password) values ("Playing with INSERT UPDATE and DELETE in YQL", "ischenko","****************")

Поиск в Flickr изображений, содержащих в названии "Cat"

select * from flickr.photos.search where text="Cat" limit 10

Выборка пяти последних новостей BBC

Здесь нужные данные выбираются при помощи xpath из веб страницы с указанным url (в данном случае это news.bbc.co.uk). Количество возвращаемых данных ограничиваем при помощи команды LIMIT:

SELECT * FROM html WHERE url='http://news.bbc.co.uk' AND xpath="//*[@id='livestats200']//ul[contains(@class,'popstoryList')]/li/a" LIMIT 5

Теперь о том, где и как эти запросы выполнить и как получать результат. Выполнить запрос можно по следующему адресу: http://query.yahooapis.com/v1/public/yql. В качестве параметров нужно указать следующее: q – запрос, format – тип возвращаемых данных – XML, JSON, JSONP, callback – функция, в которую будут “обернуты” возвращаемые данные (для работы с JavaScript), причем это касается не только JSON, но и XML. Также для некоторых таблиц необходимо указывать параметр env (в том случае, если вы явно не используете директиву USE) – в этом параметре указвыется среда выполнения, например: env=http://datatables.org/alltables.env.

Пример запроса, который выполняет выборку из Delicious последних записей с тегом JavaScript:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20delicious.feeds.popular%20where%20tag%3D%27javascript%27&format=xml&env=http%3A%2F%2Fdatatables.org%2Falltables.env.

Также запросы можно выполнять в специальной консоли. В ней очень удобно проверять выполнение запросов, также там содержится множество примеров и большой список доступных таблиц данных.

Теперь остановимся на вопросе использования YQL из JavaScript. Мне кажется, что самый простой вариант это использование JSONP, ибо, как я уже писал выше, YQL запрос поддерживает параметр callback, в который вставляется результат. Реализацию такого подхода я нашел на сайте Джеймса Пэдолси:

// YQL serves JSONP (with a callback) so all we have to do
// is create a script element with the right 'src':
function YQLQuery(query, callback) {
    this.query = query;
    this.callback = callback || function(){};
    this.fetch = function() {

        if (!this.query || !this.callback) {
            throw new Error('YQLQuery.fetch(): Parameters may be undefined');
        }

        var scriptEl = document.createElement('script'),
            uid = 'yql' + +new Date(),
            encodedQuery = encodeURIComponent(this.query.toLowerCase()),
            instance = this;

        YQLQuery[uid] = function(json) {
            instance.callback(json);
            delete YQLQuery[uid];
            document.body.removeChild(scriptEl);
        };

        scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
                     + encodedQuery + '&format=json&callback=YQLQuery.' + uid;
        document.body.appendChild(scriptEl);

    };
}

Используйте его так:

// Составлям запрос
var query = "select * from rss where url='feeds2.feedburner.com/ajaxian' limit 1";

// Создаем обработчик
var callback = function(data) {
    var post = data.query.results.item;
    alert(post.title);
};

// Создаем экземпляр класса
var ajaxianPosts = new YQLQuery(query, callback);

// Выполняем запрос
ajaxianPosts.fetch();

Если вы любите работать с jQuery, то можете воспользоваться следующим простым плагином:

$.YQL = function(query, callback) {

    if (!query || !callback) {
        throw new Error('$.YQL(): Parameters may be undefined');
    }

    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';

    $.getJSON(url, callback);
};

// Использование
$.YQL("select * from rss where url='feeds2.feedburner.com/ajaxian' limit 1", function(data) {
    var post = data.query.results.item;
    alert(post.title);
});

Ну и как обычно, напоследок демо пример, в котором я использую показанный выше плагин для получения и обработки RSS потока сайта Ajaxian. Надеюсь вам понравится такой способ работы с данными

Начнем с создания простой HTML страницы, в теле которой имеется всего лишь один div – в него будут подгружаться записи. В этот div добавим элемент <div id=”loader”>, для того, чтобы использовать его как индикатора ожидания.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>

	<style type="text/css">
	#blog {border:1px solid #aaf;background:#f9f9f9;padding:4px}
	.post {border:1px solid #aaa;background:#fff;padding:4px;margin: 2px 0}
	#loading {height: 40px}
	</style>
</head>

<body id="hello_body">

	<div id="blog">
		<div id="loading" style="display:none">Loading....</div>
	</div>
</body>
</html>

Здесь также подключаем скрипт jquery.js, а также стили для блога и записей.

Далее переходим к созданию скрипта, вся функциональность которого будет заключена в объект engine:

var engine = {
	posts : [],
	target : null,
	busy : false,
	count : 5
}

В переменных объекта engine хранятся различные параметры работы скрипта – количество подгружаемых за один раз записей (count), элемент, в который эти записи должны добавляться (target), состояние скрипта (busy), и массив записей (post).

Инициализация скрипта будет производиться функцией init:

init : function(posts, target){
	if (!target)
		return;

	this.target = $(target);

	this.append(posts);

	var that = this;
	$(window).scroll(function(){
		if ($(document).height() - $(window).height() <= $(window).scrollTop() + 50) {
			that.scrollPosition = $(window).scrollTop();
			that.get();
		}
	});
}

Функция принимает два параметра - массив записей и элемент, в который записи должны быть добавлены. В конце функции добавляется обработчик события onscroll для объекта window. Его задача - определять положение полосы прокрутки, и если она находится в крайнем нижнем положении, то вызывать функцию подгрузки записей get(). Фунция get() отправляет AJAX запрос на сервер и, получая в ответ записи блога, добавляет их в элемент target:

get : function() {
	if (!this.target || this.busy) return;

	if (this.posts && this.posts.length) {
		var lastId = this.posts[this.posts.length-1].id;
	} else {
		var lastId = 0;
	}

	this.setBusy(true);

	var that = this;
	$.getJSON('getposts.php', {count:this.count, last:lastId},
		function(data){
			if (data.length > 0) {
				that.append(data);
			}
			that.setBusy(false);
		}
	);
}

Данные о всех записях, которые загружаются с сервера, хранятся в переменной engine.posts. Перед отправкой очередного запроса на сервер, функция get() получает id последнего элемента в этом списке (lastId), для того чтобы передать его в параметрах запроса. Это нужно для того, чтобы серверный скрипт знал, какие записи уже получены, и какие элементы нужно отправить.

Как в функции init(), так и в функции get(), для отображения записей используется функция append(), которая в связке с render() создает HTML код записи и добавляет его в целевой элемент (target):

append : function(posts){
	posts = (posts instanceof Array) ? posts : [];
	this.posts = this.posts.concat(posts);

	for (var i=0, len = posts.length; i < len; i++) {
		this.target.append(this.render(posts[i]));
	}

	if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
		$(window).scrollTop(this.scrollPosition);
	}
},

render : function(obj){
	var xhtml = '<div class="post" id=post_'+obj.id+'>';
	if (obj.title) {
		xhtml += '<h2>'+obj.title+'</h2>';
	}
	if (obj.posted_at) {
		xhtml += '<div class="posted_at">Posted on: '+obj.posted_at+'</div>';
	}
	if (obj.comments_count) {
		xhtml += '<div class="comments_count">Comments: ' + obj.comments_count + '</div>';
	}
	xhtml += '<div class="content">' + obj.content + '</div>';
	xhtml += '</div>';

	return xhtml;
}

Еще стоит упомянуть одну небольшую деталь: в обработчике события onscroll я сохраняя позицию полосы прокрутки, чтобы потом, после добавления новых записей, восстановить её. Это нужно для того, чтобы положение полосы прокрутки не изменялось, при добавлении новых записей в конец списка:

// сохраняем значение в обработчике onscroll
that.scrollPosition = $(window).scrollTop();

.......

// восстанавливаем значение в функции append
if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
	$(window).scrollTop(this.scrollPosition);
}

Теперь, после того, как скрипт создан, можно использовать его. Так же как и для большинства скриптов jQuery, добавляем код инициализации в фукнцию ready():

$(document).ready(function(){
	engine.init(null, $("#blog"));
	engine.get();
});

Вот пожалуй и все описание скрипта, как видите он совсем не сложный. Демо приложения можно посмотреть здесь: смотреть демо. Полностью скрипт доступен на github.