Есть ли в jQuery эквивалент конструктора Element () в MooTools?

Я собираюсь запустить механизм отчетов javascript для своего веб-сайта и начал создавать прототипы с помощью MooTools. Мне очень нравится делать такие вещи:

function showLeagues(leagues) {
    var leagueList = $("leagues");
    leagueList.empty();
    for(var i = 0; i<leagues.length; ++i) {
        var listItem = getLeagueListElement(leagues[i]);
        leagueList.adopt(listItem);
    }
}

function getLeagueListElement(league) {
    var listItem = new Element('li');
    var newElement = new Element('a', {
        'html': league.name,
        'href': '?league='+league.key,
        'events': {
                'click': function() { showLeague(league); return false; }
        }
    });
    listItem.adopt(newElement);
    return listItem;
}

Из того, что я видел, методы типа jQuery "принимают" принимают только строки html или элементы DOM. Есть ли в jQuery эквивалент Element в MooTools?

РЕДАКТИРОВАТЬ: главное, что я ищу здесь, - это программное присоединение моего события клика к ссылке.


javascript jquery mootools
person Chris Marasti-Georg    schedule 06.10.2008    source источник

Ответы (2)


arrow_upward
5
arrow_downward

синтаксически может быть лучше использовать jQuery для этого, но, вероятно, более эффективно использовать

  document.createElement('li')

И устраняет необходимость как минимум в тесте сравнения строк и небольшом разборе токенов.

flydom также может вызвать у вас интерес, если вы настаиваете на создании большого количества узлов dom. (Теоретически должно быть быстрее, но не тестировал)

Примечание: внутренне jQuery ("‹html> ‹/html>") выглядит так, как будто эффективно выполняет это (упрощенно):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
      return  this.setArray(
        jQuery.makeArray(
           jQuery.clean(matcher) --> function(matcher)
           { 
               div = document.createElement('div');
               div.innerHTML = matcher;
               return div.childNodes;
           }
        )
      );
   }
}

Таким образом, можно было бы предположить, что "document.createElement" является "требованием", и если вы знаете, что хотите (то есть: не анализировать некоторые сторонние данные с $( datahere )), тогда document.createElement будет таким же логичным и с повышением скорости, чтобы избежать многочисленных регулярных выражений и медленных манипуляций со строками.

Для сравнения: jQuery(document.createElement('div')) похоже, что он действительно делает это (упрощенно):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
       this[0] = matcher; 
       this.length = 1; 
       return this; 
   }
}
person Kent Fredric    schedule 06.10.2008
comment
Есть ли какой-нибудь браузер, достаточно современный для поддержки основных js-библиотек, который не включает эти методы DOM? Мое желание использовать специфичный для фреймворка код было двояким: во-первых, чтобы сохранить согласованный синтаксис в моем коде, и во-вторых, чтобы убедиться, что мне не нужно заботиться о различиях в браузерах. - person Chris Marasti-Georg; 07.10.2008
comment
Ответ расширенный. Насколько я могу судить, если браузер не поддерживает document.createElement, то даже jQuery не будет работать с ним. - person Kent Fredric; 08.10.2008
comment
Чтобы быть уверенным в своих намерениях, вы говорите, что вместо $ ('‹a› ‹/a›') .attr ('href', '? League =' + league.key) ... вы бы порекомендовали : $ (document.createElement (a)). attr ('href', '? league =' + league.key) ...? - person Chris Marasti-Georg; 09.10.2008
comment
Я хотел бы добавить - я видел несколько статей (и провел несколько собственных тестов), и выполнение $ (document.createElement ('a')) последовательно быстрее создает новые элементы для jQuery, а затем полагается на jQuery для сделай это за тебя. Обычный JS, вероятно, всегда будет быстрее, чем полагаться на библиотеку, которая сделает это за вас (включая установку атрибутов элементов, но иногда мы говорим о миллисекундных различиях, поэтому это почти спорный вопрос, если только вы не стремитесь максимально сжать). - person keif; 16.03.2011
comment
@keif да, это скорее проблема, если она будет в цикле, и это немного похоже на преждевременную оптимизацию. Но использование явного JS кажется мне менее подверженным ошибкам. И это Javascript, до недавнего времени он все равно был очень медленным по умолчанию;) каждая микрооптимизация помогает. - person Kent Fredric; 01.04.2011

arrow_upward
3
arrow_downward

Вот то же самое в jQuery. В основном, чтобы создать новый элемент, вы просто вставляете нужный HTML-код.

function showLeagues(leagues) {
    var $leagueList = $("#leagues");
    $leagueList.empty();
    $.each(leagues, function (index, league) {
        $leagueList.append(getLeagueListElement(league));
    });
}

function getLeagueListElement(league) {
    return $('<li></li>')
        .append($('<a></a>')
            .html(league.name)
            .attr('href', '?league=' + league.key)
            .click(function() {
                showLeague(league);
                return false;
            })
        )
    ;
}
person nickf    schedule 06.10.2008
comment
Вместо $ ('‹li› ‹/li›') вы можете просто использовать $ ('‹li /›') кстати - person James; 07.10.2008
comment
обратите внимание, код ‹li /› не оптимален, и, глядя на код, видно, что jquery выполняет регулярное выражение, чтобы расширить его обратно до ‹li› ‹/li›;) - person Kent Fredric; 08.10.2008