Добавляйте HTML-элементы в DOM с помощью JQuery

Question

В данный момент я добавляю элементы в DOM с добавлением html внутри двойных кавычек, это может стать невероятно запутанным и очень трудным для чтения, особенно если в нем есть переменные, в React вы будете использовать чистый JSX, есть ли способ использовать JSX в обычном скрипте JQuery или что-то вроде JSX?

Answer 1

Да, два варианта:

1. Литералы шаблона

2. JSX

Литералы шаблона

В современном JavaScript вы можете использовать литералы шаблонов, а не строковые литералы, и они могут включать заполнители с выражениями JavaScript в них:

let counter = 0;

$(`<table class="main">
    <tbody>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
        <tr>
            <td>Cell ${counter++}</td>
            <td>Cell ${counter++}</td>
        </tr>
    </tbody>
</table>`).appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Определенно, есть определенная неловкость, но она намного лучше строковых литералов.

Больше о шаблонных литералах в MDN .

JSX

JSX не ограничивается React.Он имеет собственную собственную спецификацию и несколько реализаций, таких как jsx-transform.

Например, вот простая оболочка Node.js, которая использует ее для переноса файла:

var jsx = require('jsx-transform');

console.log(jsx.fromFile("input.jsx", {
  factory: 'be'
}));

Если input.jsx были:

let counter = 0;
let table =
    <table class="main">
        <tbody>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
            <tr>
                <td>Cell {counter++}</td>
                <td>Cell {counter++}</td>
            </tr>
        </tbody>
    </table>;
table.appendTo(document.body);

(Обратите внимание, что это class="main", а не className="main". Использование className вместо этого - React, чтобы избежать проблемы, которая не была проблемой с момента выхода ES5 в 2009 году.)

Вывод будет следующим:

let counter = 0;
let table =
    be('table', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

Обратите внимание на то, как были выражены выражения JSX.преобразуется в вызовы к заводской функции (be в этом примере; заводская функция React - React.createElement).Все, что вам нужно сделать, это предоставить функцию be и интегрировать трансформатор в вашу цепочку сборки (jsx-transform поставляется предварительно подготовленным с возможностью подключения к Browserify).

Ваш be с использованием jQuery может выглядеть как-токак это:

function be(tagName, attributes, children) {
    const result = $("<" + tagName + "/>");
    if (attributes) {
        result.attr(attributes);
    }
    if (children) {
        if (Array.isArray(children)) {
            for (const child of children) {
                result.append(child);
            }
        } else {
            result.append(child);
        }
    }
    return result;
}

Live Пример функции be с использованием преобразованного результата:

let counter = 0;
let table =
    be('table', {class: "main"}, [
        be('tbody', null, [
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ]),
            be('tr', null, [
                be('td', null, ["Cell ", counter++]),
                be('td', null, ["Cell ", counter++])
            ])
        ])
    ]);
table.appendTo(document.body);

function be(tagName, attributes, children) {
    const result = $("<" + tagName + "/>");
    if (attributes) {
        result.attr(attributes);
    }
    if (children) {
        if (Array.isArray(children)) {
            for (const child of children) {
                result.append(child);
            }
        } else {
            result.append(child);
        }
    }
    return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Удивительно, но это действительно так просто.