Основной пример шаблона на стороне клиента с помощью пыли.JS


Это мой первый набег на клиентский шаблон, и я хочу убедиться, что понимаю его и правильно использую. После прочтения это инженерный блог LinkedIn, я решил пойти с ними. пыль.js скорее, чем усы или руль. Обратите внимание, что этот столб stackoverflow ответил на многие мои вопросы, но у меня все еще есть несколько вещей, которые я хочу прояснить.

В среде, в которой я работаю У меня нет доступа к чему-либо на стороне сервера, поэтому все, что я создаю, должно быть полностью запущено в браузере клиента. Для этого примера я попытаюсь воссоздать Этот пример кода от самого LinkedIn Dust учебник.

Я включаю полный пыли.js вместо пылевого ядра.js потому что я собираюсь скомпилировать шаблон на лету:

<script src="js/dust-full.js"></script>

Вот HTML:

<script id="entry-template">
{title}

<ul>
    {#names}
    <li>{name}</li>{~n}
    {/names}
</ul>
</script>

<div id="output"></div>

И JavaScript (с помощью jQuery):

$(document).ready(function () {
    var data = {
        "title": "Famous People", 
        "names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
    }

    var source   = $("#entry-template").html();
    var compiled = dust.compile(source, "intro");
    dust.loadSource(compiled);

    dust.render("intro", data, function(err, out) {
        $("#output").html(out);
    });
});

Это, кажется, работает нормально, как вы можете видеть в Этот jsfiddle.

Пара вопросов:

  1. Почему шаблон должен содержаться в тегах скрипта? Почему бы просто не включить его в div с id= "entry-template", а затем заменить html внутри него во время пыли.render (), как в эта модифицированная скрипка?

  2. Что делает " пыль.loadSource (compiled); " do? В тот самый документы он говорит "если вы включаете 'compiled' строку как часть блока скрипта JS, который вы загружаете, то шаблон' intro ' будет определен и зарегистрирован. Если вы хотите сделать это немедленно, то " позвоните ему, однако я не понимаю, что это значит. Я заметил,что если я удаляю эту линию, то она не работает, однако, поэтому я хотел бы понять ее.

  3. После того, как я удовлетворюсь своим шаблоном и завершу его, как я должен скомпилировать его, чтобы импортировать более легкая пылевая сердцевина.js вместо того, чтобы он компилировался браузером при каждой загрузке страницы? Есть ли существенное преимущество в том, чтобы сделать это, или я должен оставить, как есть, с пылью.js ?

  4. В более общем плане, выглядит ли это подходящим / полезным способом реализации dust (или любой шаблонной структуры, если на то пошло) или я просто где-то далеко?

Заранее благодарю.

2 18

2 ответа:

  1. Если вы поместите его в div, разметка будет отображаться, как только страница загрузится, и с синтаксисом contain the dust {placeholder}. Затем, как только происходит визуализация на стороне клиента, она внезапно заменяется полностью визуализированным содержимым. В простом примере это может произойти так быстро, что вы этого не заметите. Однако, в зависимости от того, сколько времени требуется для загрузки шаблонов, библиотеки dust JS, извлечения JSON (если он еще не встроен в страницу), производительности JS браузера и другие вещи, происходящие на странице, этот переключатель может быть очень заметным для пользователя, что не является хорошим опытом.

  2. При компиляции шаблона dust выводится строка, содержащая функцию JavaScript. Это будет выглядеть примерно так:

    (функция () {пыль.регистр ("intro", body0); функция body0(chk, ctx) {/*[...] */ } })();

    Когда вы передадите эту строку в пыль.loadSource, все, что он делает-это eval it, выполняя эту самозваную функцию. Результат заключается в том, что выполняется вызов dust.register, который связывает функцию body0 с именем intro в dust.cache. После этого каждый раз, когда вы вызываете dust.render("intro"...), dust ищет шаблон intro в dust.cache и выполняет связанную с ним функцию.

  3. Сохраните выходные данные dust.compile в файле .js, например intro.js для примера выше. Затем вы можете включить dust-core.js и intro.js на странице, как и любые другие файлы JavaScript (например, в script tags или через загрузчики).

  4. Обычно, вы храните каждый шаблон dust в отдельном файле, например intro.tl, и используйте какую-либо систему сборки (например, http://gruntjs.com/) для автоматической компиляции его в файл .js при каждом изменении. Затем вы объединяете все сгенерированные файлы .js в один файл (grunt может сделать это тоже) и загружаете его на страницу в теге script.

  1. Вы не должны содержать шаблон в тегах скрипта, ваш второй способ лучше.

  2. LoadSource запустит скомпилированный вывод вашего шаблона, который включает в себя регистрацию его так, чтобы другие шаблоны и пыль.render может ссылаться на скомпилированную выходную цепочку через ее имя (в данном случае" intro").

  3. Это включает в себя предварительную компиляцию шаблонов, прежде чем вы даже откроете браузер. Таким образом, у вас может быть папка, в которой есть все ваши шаблоны as. tl файлы. На каком-то этапе сборки вы бы скомпилировали все эти шаблоны (используя dust.компиляции) и сохранить результат как .файлы js. Тогда браузер действительно загрузит их .файлы js. Это также избавляет от необходимости в пыли.источник нагрузки. Преимуществом здесь является отсутствие необходимости включать компилятор и парсер, которые добавляют до ~3000 строк кода. Размер библиотеки dust составляет от 4000 строк кода до всего 800 строк кода. EDIT: кроме того, как вы упомянули, Вы не компилируете шаблоны на лету в браузер, так что это также будет большой прирост производительности.

  4. Я бы сказал, что кроме пропуска этапа сборки, о котором я упоминал выше, вы находитесь на правильном пути.