Статьи

JQuery Goodness и ASP.NET AJAX – взять II

Так ясно я увлеченно о получении JQuery функции в моих WebForm приложений. Я очень хотел бы видеть следующее добавленное …

  • Более мощный селектор . Поиск элементов по идентификатору (ala $ get ) на странице ASP.NET обычно довольно неудобен, поскольку значения идентификатора неизвестны до времени выполнения. Одно это вызывает у многих людей проблемы. Если я не ошибаюсь, следующая версия ASP.NET AJAX будет включать в себя селектор для поиска элементов по имени класса, но я не слышал ничего о поддержке более продвинутых вещей, таких как …
//  good ...
var alternatingRows = $select('TABLE TR.alt');

// better ...
var alternatingRows = $select('TABLE TR:odd');

// best!
var alternatingRows = $select('TABLE TR:nth-child(odd)');
  • Более свободная модель программирования. jQuery серьезно охватывает мантру «найди некоторые элементы и сделай с ними что-нибудь». И они делают это действительно простым — если вам нужна таблица с полосками зебры, которая также поддерживает эффекты наведения строк, все, что вам нужно сделать, это следующее …
//  add the row hover highlighting
$("TABLE TR")

.mouseover(function() {$(this).addClass("highlight");})
.mouseout(function() {$(this).removeClass("highlight");});

// add the zebra striping
$("TABLE TR:odd").addClass("odd");
$("TABLE TR:even").addClass("even");
  • JavaScript только плагины. Есть что-то вроде плагинов 6.5 Bazillion jQuery. С тех пор, как вы в последний раз проверяли свою электронную почту, было создано семь новых. Я должен верить, что одна из причин того, что их так много, заключается в том, что их так легко создавать и распространять. Плюс, если вы взломаете некоторые из них, это будет просто отвратительно, насколько они просты. В действительности вы можете создать плагин zebraStripedPlusRowHighlighting из приведенного выше фрагмента кода, а затем просто сделать следующее, чтобы применить его ко всем вашим элементам TABLE.
//  add zebra striping and highlighing to all my TABLE's
$('TABLE').zebraStripedPlusRowHighlighting({'hoverClass':'highlight', 'oddClass':'odd', 'evenClass','even'});

Таким образом, к этому моменту вы можете подумать, что я получаю откат назад или что-то еще от jQuery за то, что я так сильно продвигаю это, но на самом деле это не так. Просто я немного завидую, просматривая страницу плагина jQuery и видя все интересные вещи, которые я не могу использовать .

И поэтому я изложил свой подход для преодоления этого разрыва между ASP.NET AJAX и jQuery. Моей первой мыслью было просто перенести некоторые из самых полезных функций jQuery в какую-то оболочку JavaScript. Но подумав об этом, я не уверен, что это так здорово. Играйте вперед: скажите, что я смог получить большое количество функций jQuery в шимме — что это на самом деле меня заводит? Я до сих пор не могу использовать ни один из плагинов jQuery, не перенеся их тоже. И я думаю, что было бы практически невозможно когда-либо достичь точки, где есть паритет между моим модулем shim и jQuery. И предположим, что я могу достичь этой точки — эта новая библиотека расширений, скорее всего, будет такой же большой, как и jQuery. Что было одной из причин, о которых я говорил ранее за то, что я не использовал jQuery — я не хотел раздувать 3 библиотеки JavaScript {ASP.NET AJAX, AjaxControlToolkit, jQuery}.

Поэтому я думаю, что мне нужно проделать еще некоторую работу, чтобы обдумать это. 

  • Мне стыдно говорить об этом, но я никогда не задумывался над тем, какое совпадение существует между тремя библиотеками. Я предполагаю, что между XmlHttpRequest, анимацией, манипулированием DOM, обнаружением браузера, селекторами, типами данных, вспомогательными функциями и т. Д. Существует довольно много, но на самом деле я не изучал, что именно представляет собой это перекрытие и существует ли способ чтобы свести к минимуму некоторые из них. Скажите, могу ли я получить селектор jQuery без каких-либо других вещей … jQuery lite?

После всего сказанного я взглянул на некоторые основы модели программирования jQuery только потому, что мне было любопытно. И я узнал больше, чем несколько вещей, поэтому я думал, что передам их *.

* Отказ от ответственности: я довольно новичок в jQuery, поэтому ни один из этих материалов не является Евангелием и поправьте меня, если вы видите что-то, что я пропустил.

Завернутый набор

Основной частью модели программирования jQuery является то, что называется упакованным множеством. Этот упакованный набор является набором элементов DOM, над которыми вы хотите выполнить некоторую операцию (я считаю, что jQuery называет их командами). Мощный селектор jQuery возвращает упакованный набор, который содержит все элементы DOM, которые соответствуют предоставленному селектору. Получив ссылку на упакованный набор, вы можете выполнить некоторую операцию со всеми элементами в наборе. Таким образом, вы можете легко делать такие вещи, как это …

//  add the grid css class to all TABLE elements
$('TABLE').addClass('grid');

// show the id of the INPUT element when it is clicked
$('INPUT').click(function(){ alert($(this).id); });

Цепной

Завернутый набор содержит массу полезных методов. И большинство из них возвращают одно и то же значение — ссылку на упакованный набор. Это позволяет вам объединять команды, сохраняя код очень лаконичным, но в то же время читаемым. В следующем примере добавления выделения в TABLE используется эта цепочка.

//  example that shows how calls are chained together
$('TABLE TR')

.mouseover(function(){ $(this).addClass('highlight');})
.mouseout(function(){ $(this).removeClass('highlight'); })

Обновление моего Шим

Итак, чтобы продолжить мой эксперимент по внедрению некоторых из этих вещей в мои приложения WebForms, я внес следующие изменения в плагины, которые я обсуждал в моем предыдущем посте:

  • Я создал класс JavaScript, который является урезанной версией jQuery. Он содержит коллекцию элементов DOM и содержит такие методы, как ..

    • добавить, получить, удалить, очистить каждый -> базовые операции сбора
    • addClass, removeClass -> основные операции DOM
    • Blur, Focus, Mousedown, Mouseup и т.д … -> ярлыки для добавления обработчиков событий
  • После создания класса упакованного набора я обновил функцию $ select, чтобы она возвращала экземпляр этого упакованного набора, который содержит все элементы, соответствующие селектору. Я также переименовал $ select в $ majax. Так что теперь вы можете делать такие вещи …
//  attach all of the textbox elements and 
// and apply the focus class when the textbox
// obtains the focus

$majax('textbox')
.focus(function(){ $majax(this).addClass('focus'); })
.blur(function(){ $majax(this).removeClass('focus'); });

Что сделало бы фон всех элементов DOM, имеющих класс css текстового поля, желтым (через класс css focus), когда они имеют фокус. Это будет выглядеть примерно так …

[Img_assist | NID = 3972 | название = | убывание = | ссылка = нет | Align = нет | ширина = 358 | высота = 64]

  • And finally, I changed the plug-ins to use my wrapped set prototype to add their commands to instead of the Sys.UI.Control class.  This made a nice difference in how I was able to apply my plug-ins to a collection of DOM elements.  Checkout the OLD and NEW syntax examples below.
// OLD:
$select('#roundedPanel1, #roundedPanel2').each(function(e){

// add the rounded corners (6 pixel radius) to the panels
e.round(6);

});

// NEW:
$majax('#roundedPanel1, #roundedPanel2').round(6);

And here is how the new RoundedCorners plugin is defined. The main changes are round function is attached to the elementSet prototype (this is the wrapped set class), the _round function operates on all elements in the current set and the _round function returns a reference to the wrapped set — allowing chaining.

Type.registerNamespace("majax");

majax.RoundedCorners = function() {
majax.RoundedCorners.initializeBase(this);
}

majax.RoundedCorners.prototype = {

initialize : function() {
majax.RoundedCorners.callBaseMethod(this, 'initialize');

// attach the plugin to the elementSet class
majax.elementSet.prototype.round = this._round;
},

dispose : function() {
majax.RoundedCorners.callBaseMethod(this, 'dispose');
},

_round : function(radius) {

// create rounded corners for each of the elements
// in the collection
this.each(function(){
$create(AjaxControlToolkit.RoundedCornersBehavior, {"Radius":radius}, null, null, this);
});

// for chaining

return this;
}

}

// register the class
majax.RoundedCorners.registerClass('majax.RoundedCorners', Sys.Component);

// create the singleton
$create(majax.RoundedCorners, null, null, null);

// Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler
// invoke Sys.Application.notifyScriptLoaded to notify ScriptManager
// that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Where to Next?

Good question.  So far the small jQuery-ish shim I created seems useful.  Its 200 LOC right now its pretty small, but if I continue down this path it will no doubt grow quickly.  So I am not really sure where I am going next — but I don’t feel like giving up either.

How About You?

What about you?  Are you a WebForms developer that is crushing over jQuery too?  Do you have a problem using 3 JavaScript libraries — ASP.NET AJAX, the Toolkit and jQuery?  How do you think this problem (if there is one) should be solved?

Original Author

Original article written by Matt Berseth