Какой правильный или лучший способ создать новый элемент с помощью jQuery?

Ответ 1

Если вы идете исключительно по метрикам, которые можно легко измерить: первое лучше, потому что оно на 2 байта короче.

Как только вы начнете учитывать удобочитаемость и другие менее ощутимые соображения, это в значительной степени зависит от мнения.

Итак, в конце неправильно использовать один из первых двух вариантов для div?

Нет, этот раздел применяется только "Если HTML более сложный, чем один тег без атрибутов"

Ответ 2

заглянув в библиотеку jQuery, следующий раздел из v2.2.0 строка 2827.

init = jQuery.fn.init = function(selector, context, root) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if (!selector) {
      return this;
    }

    // Method init() accepts an alternate rootjQuery
    // so migrate can support jQuery.sub (gh-2101)
    root = root || rootjQuery;

    // Handle HTML strings
    if (typeof selector === "string") {
      if (selector[0] === "<" &&
        selector[selector.length - 1] === ">" &&
        selector.length >= 3) {

        // Assume that strings that start and end with <> are HTML and skip the regex check
        match = [null, selector, null];

      } else {
        match = rquickExpr.exec(selector);
      }

      // Match html or make sure no context is specified for #id
      if (match && (match[1] || !context)) {

        // HANDLE: $(html) -> $(array)
        if (match[1]) {
          context = context instanceof jQuery ? context[0] : context;

          // Option to run scripts is true for back-compat
          // Intentionally let the error be thrown if parseHTML is not present
          jQuery.merge(this, jQuery.parseHTML(
            match[1],
            context && context.nodeType ? context.ownerDocument || context : document,
            true
          ));

          // HANDLE: $(html, props)
          if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {
            for (match in context) {

              // Properties of context are called as methods if possible
              if (jQuery.isFunction(this[match])) {
                this[match](context[match]);

                // ...and otherwise set as attributes
              } else {
                this.attr(match, context[match]);
              }
            }
          }

          return this;

Вы увидите, что он проверяет, является ли селектор string, и если он показывает, начинается ли он с < и заканчивается на >.

if (typeof selector === "string") {
  if (selector[0] === "<" &&
    selector[selector.length - 1] === ">" &&
    selector.length >= 3) {

Тогда, имея в виду регулярное выражение rsingleTag, являющееся: -

var rsingleTag = ( /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/ );

Что соответствует как "<div>", так и "<div />", возвращая div как group[1].

parseHTML использует это для возврата элемента div в merge: -

jQuery.parseHTML = function( data, context, keepScripts ) {

    ...

    var parsed = rsingleTag.exec( data );

    // Single tag
    if ( parsed ) {
        return [ context.createElement( parsed[ 1 ] ) ];
    }

затем снова с помощью regex и context в качестве объекта для установки свойств: -

// HANDLE: $(html, props)
if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {

it for над каждой настройкой свойства с помощью this.attr(match, context[match]);

Итак, в конце неправильно использовать один из первых двух вариантов для ДИВ?

Как показано выше, его личное предпочтение. Оба работают одинаково.

Ответ 3

На веб-сайте jQuerys:

Он делает вещи, такие как обход HTML-документа и манипуляции, обработку событий, анимацию и Ajax намного проще.

Обратите внимание, что это не говорит о генерации HTML.

JavaScript предоставляет метод document.createElement. jQuery использует этот метод, если в качестве селектора передается HTML-подобная строка.

Тип точки ввода jQuery ($(whatEverIFeelLikeDoingToday)) проверяет селектор для строки, node или функцию, затем обрабатывает запрос соответствующим образом. Если аргумент является строкой, он затем проходит через +/- 60 строк кода (Am я HTML? Я - селектор, я ID, я класс?). После того, как HTML-подобная строка идентифицирована, она затем передается другой функции (дополнительные вызовы функций), которая должна быть сгенерирована, поэтому медленно (см. Сравнительный тест ниже). Фактически, это не придает большого значения процессу, кроме однородности, просто замедляет его.

Я считаю, что лучше всего: не использовать jQuery для довольно простых задач (т.е. создание node) - везде, где вы практикуете, устраните препятствия на этом пути.

var div = document.createElement('div');
div.setAttribute("id", "foo");
div.setAttribute("class", "a");
div = $(div);

Обратите внимание на значительное увеличение производительности в этом эталоне. (Примерно в 4 раза быстрее в Chrome). Это решение быстрее, чем два описанных выше и по своей сути Cross platform.

Я не думаю, что аргумент для меньшего количества байтов -vs более быстрого времени выполнения находится в области этого потока. Однако, предполагая, что вы уменьшаете свой код, я выкину вам практический пример цикла через массив для генерации html-строк для таблицы. Байты не проблема, вам нужно только загрузить script один раз - выполнение - это то, что вас болото.

Ответ 4

С лучшим или правильным использованием в вашем случае это зависит от того, как часто этот код будет отображаться на вашей странице. @Quentin правильно в том, что между первым и вторым параметрами существует только двухбайтная разница. Теперь, если код появляется всего несколько раз на всей странице, а затем реалистично, если вы не регистрируете большой объем трафика на своем сервере, вы не увидите существенной разницы между ними, с другой стороны, если вы используете средний уровень сайт трафика или будет иметь большое количество экземпляров этого javascript, появляющихся на вашей странице, тогда лучшим вариантом было бы перейти на вариант один, поскольку он на два байта меньше и на более крупной странице со многими экземплярами этого кода вы найдете измеримые экономия в размере байта страницы.

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

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