Многоразовые фрагменты html-кода

Question

У меня есть несколько компонентов html, которые я настроил с помощью javascript. Например, у меня есть список с кнопкой для добавления и удаления элементов из списка. Я хотел бы иметь возможность повторно использовать эти компоненты, но я не уверен, что лучший способ это сделать (этот конкретный проект - Spring MVC).

Параметры, которые я рассмотрел, представляют собой фрагменты jsp, которые могут быть включены в другие страницы или пользовательские теги. Существуют ли альтернативы, которые не требуют использования сервера (например, обработка тегов). Если у меня просто есть некоторые html/javascript-элементы, которые используются вместе, кажется, что должен быть простой способ сделать их модульными.

Answer 1

Большинство интерфейсов пользовательского интерфейса JS предоставляют свои компоненты пользовательского интерфейса, создавая их полностью в JS. Это может быть вашим лучшим выбором, поскольку он не зависит от вашего серверного фреймворка (вы можете использовать его с ruby, php, .net), и он держит ваш HTML в чистоте.

Для примера с примером/кнопкой вы должны отображать как список, так и кнопку из функции JS, вызываемой на стандартном объекте HTML. В вашем случае, если вы используете свою структуру MVC для записи данных в список, вы можете продолжать это делать и писать логику создания JS, чтобы принять список в качестве ввода, а затем визуализировать свой расширенный стиль и пользовательский интерфейс (например, кнопку) вокруг него. Это позволяет вам по-прежнему принимать данные со стороны сервера, как обычно, и дает вашему HTML-коду аналогичный внешний вид для конечного продукта (ему просто не хватают кнопки добавления/удаления), но позволяет вам повторно использовать вашу логику HTML/JS насколько это возможно.

Если ваш текущий код выглядит следующим образом:

<div class="addremovelist"> 
    <select> 
     <option>blah</option> 
     <option>blah</option> 
     <option>blah</option> 
    </select> 
    <div class="addremovebuttons"> 
     <input type="button" value="Add" /> 
     <input type="button" value="Add All" /> 
     <input type="button" value="Remove" /> 
     <input type="button" value="Remove All" /> 
    </div> 
<div> 

Вы бы сейчас написать это:

<select id="myselect"> 
    <option>blah</option> 
    <option>blah</option> 
    <option>blah</option> 
</select> 

Со следующим JavaScript в вашем случае окно загрузки:

$('#myselect').addRemoveList({myoptions: 'ifnecessary'}); 

Или что-то подобное