Используйте новое поколение механизма шаблонов js NornJ, чтобы улучшить процесс разработки React.js.

В современном интерфейсном мире есть много известных программ с открытым исходным кодом.движок шаблонов javascriptТакие какHandlebars,Nunjucks,EJSПодождите, я считаю, что многие люди не незнакомы с ними.

Текущее состояние шаблонизатора js

Вообще говоря, у этих проектов js шаблонизатора есть общая черта:Сосредоточьтесь только на рендеринге строк (html)

Бэкбоун и др.mv*Когда фреймворки стали популярными, механизмы шаблонов js встретили свою весну, потому что Backbone может поддерживать соответствие шаблонов собственным предпочтениям пользователей и предоставлять решения для доступа. Но в интерфейсе нового поколенияmv*С преобладанием фреймворков сегодня люди обращают больше внимания на React.JSXНасколько мощной является поддерживаемая логика Vue?v-showНасколько удобно использовать инструкцию ожидания, но как насчет механизма шаблонов js? Кажется, что они находят свое место только на стороне сервера Node.js, а также используются React и Vue.SSR (рендеринг на стороне сервера)Продолжайте откусывать единственный рынок.

Почему различные механизмы шаблонов js фокусируются только на рендеринге html-строк? Это может быть связано с историческими причинами, ведь не было такого, как 5 или 6 лет назад.虚拟dom, используя такие фреймворки, как jQuery$('div').html(str)Метод рендеринга dom — это само собой разумеющееся.

Новый шаблонизатор js

Давайте просто представим, на самом деле, пока движок шаблонов js может отображать в нынешнюю эпоху虚拟domобъекты и, возможно, снова найдут их повторное использование:

         +---------------------+
         ¦ <Template string /> ¦
         +---------------------+
                    |
                    |
         +---------------------+
         |      render to      |
         |                     |
  +-------------+    +-------------------+
  ¦ html string ¦    ¦ React virtual dom ¦
  +-------------+    +-------------------+

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

гитхаб:GitHub.com/Джо-скай/нор…

Официальная документация (страницы github):joe-sky.github.io/nornj-guide

Официальная документация (gitbook):joe-sky.gitbooks.io/nornj-guide

Установить

npm install nornj
npm install nornj-react   # React开发请一起安装此包
npm install nornj-loader  # webpack环境请一起安装此包

Адрес онлайн-демонстрации

визуализировать html-строку

• Онлайн-игровая площадка (jsfiddle)
• Онлайн-игровая площадка (codepen)

Визуализировать компоненты React

• Онлайн-игровая площадка (jsfiddle)
• Онлайн-игровая площадка (codepen)

Основное использование в разработке React

Реагировать часто говорит, что JSX «необязательно» при введении себя, но в действительности реагировать без JSX практически невозможно нормально развиваться. Если есть еще один DSL (JS-двигатель JS), подходящий для разработки реагирования, то JSX действительно может стать дополнительной технологией.

NornJСинтаксис шаблона взят изHandlebars,Nunjucks,VueНа основе многих известных проектов также существует множество собственных уникальных грамматик, таких какtagged template string,自定义语句与运算符Подождите, очень похоже на html+js, чтобы быстро приступить к работе. нужно упомянуть еще одинReactшаблонный проект дляreact-templates,этоReactЕдинственный относительно законченный шаблонный проект в экосистеме, но, к сожалению, сейчас он почти не поддерживается и имеет очень ограниченные функции.

Каждый компонент React должен возвращать код метки компонента при рендеринге, например, вHelloWorldВизуализируйте раскрывающийся список в компоненте, используйтеJSXа такжеNornJСинтаксис реализован отдельно:

• JSX

export default class HelloWorld extends Component {
  render() {
    return (
      <div className="hello" style={{ width: 300, height: 200 }}>
        <input type="text" />
        <select>
          {[1, 2, 3].map((item, i) => i > 1
            ? <option>{item + 1}</option>
            : <option>{item}</option>
          )}
        </select>
      </div>
    );
  }
}

• NornJ

import { template as t } from 'nornj';
import 'nornj-react';
import { Input } from 'antd';

export default class HelloWorld extends Component {
  render() {
    return t`
      <div class="hello" style="width:300px;height:200px;">
        <input type="text">
        <select>
          <#each {1 .. 3}>
            <#if {@index > 1}>
              <option>{@item + 1}</option>
              <#else><option>{@item}</option></#else>
            </#if>
          </#each>
        </select>
      </div>
      <${Input} placeholder="Basic usage" />
    `;
  }
}

В приведенном выше примере этоNornJСамый простой способ использовать его из коробки. его можно использоватьES6+изtagged template literalsГрамматика описывает шаблон в файле js, и структура грамматики шаблона при обработке логики относительноJSXЧитабельнее, да и синтаксис ближе к html:

• Вы можете написать class вместо className.
• style может использовать способ написания атрибута стиля в html, и, конечно, запись объекта также поддерживается.
• Синтаксис шаблона обеспечивает#if,#eachРавные теги расширения используются для логики обработки и могут быть заменены三目运算符а также数组map方法.
• Такие теги, как input и img, поддерживают запись только открытых тегов, таких как<input type="text">, должен быть написан в JSX как<input type="text" />.
• Несколько меток на одном уровне можно вернуть непосредственно в рендере компонента, не помещая снаружи массив.
• двойные фигурные скобки{{}}и одиночные фигурные скобки{}Синтаксис чисел поддерживается в разработке React, за исключением особых сценариев, это зависит от личных предпочтений.
• Шаблоны поддерживают встраивание произвольных переменных js, таких как JSX, которые, конечно, также включают сторонние компоненты React и переменные JSX,NornJШаблоны и JSX могут сосуществовать!

NornJизtagged template literalsДополнительные сведения о синтаксисе см.официальная документация.

Приведенный выше пример также можно переписать следующим образом:

import nj from 'nornj';
import 'nornj-react';
import { Input } from 'antd';

const tmplFn = nj`
  <div class="hello" style="width:300px;height:200px;">
  ...
  </div>
  <${Input} placeholder="Basic usage" />
`;

export default class HelloWorld extends Component {
  render() {
    return tmplFn();
  }
}

Видно, что по существуtagged template literalsСинтаксис заключается в создании функции шаблона и последующем выполнении ее в рендере. В настоящее время нетрудно предположить, что при использовании первого метода для выполнения функции шаблона в рендеринге компиляция шаблона (включая различные регулярные внутренние дизъюнкции) будет вызывать снижение производительности каждый раз при выполнении рендеринга? нет потому чтоNornJШаблон будет кэшироваться во время компиляции, только шаблон будет скомпилирован для первого рендера, а каждый последующий рендер будет кэширован.

Кроме того,NornJа такжеJSXОн также может быть вложенным и использоваться только с небольшой степенью детализации.NornJС шаблоном проблем нет, смотритеофициальная документация.

Шаблон одного файла

NornJПомимо написания в файле js, шаблон также может быть записан в отдельном файле шаблона, чтобы отделить уровень представления компонентов (или страниц) от структурного уровня (Подробности смотрите в официальной документации).例如编写一个helloWorld.nj.htmlдокумент:

<template name="partial">
  <ant-Input placeholder="Basic usage" value={value} />
</template>

<template name="helloWorld">
  <div class={styles.hello}>
    <select>
      <#each {1 .. 3}>
        <#if {@index > 1}>
          <option>{@item + 1}</option>
          <#else><option>{@item}</option></#else>
        </#if>
      </#each>
    </select>
  </div>
  <#include name="partial" />
</template>

Затем вы можете использовать его после импорта в файл js:

import tmpls from './helloWorld.nj.html';

export default class HelloWorld extends Component {
  state = {
    value: 'test'
  };

  render() {
    return tmpls.helloWorld(this.state, this.props);
  }
}

Как и выше, каждый*.nj.htmlфайл может определять один или несколькоtemplateЭтикетка. ЭтиtemplateТег будет передан в файле js, который на него ссылается.nornj-loaderразбор для созданияtemplateпомеченnameСвойство представляет собой объект коллекции функций шаблона Key, и оно будет генерировать соответствующий объект при рендеринге каждого компонента.React vdomобъект.

противNornJизШаблон одного файла, мы также предоставляем некоторые IDEИнструменты подсветки синтаксиса и подсказок.

Расширенный шаблон

NornJа такжеHandlebarsПодобно очень мощной масштабируемости,#if,#eachи т. д. на самом деле расширенный синтаксис, вы можете расширить его самостоятельно#customIf,#customEachЖдите новых предложений. С точки зрения масштабируемости нетрудно предположить, что JSX также можно расширить с помощью babel или создать новый синтаксис, напримерjsx-control-statements. Тем не менее, порог для расширения Babel не так уж и низок: кажется, что разработать идеальный плагин для обучения использованию различных AST Babel непросто.

из-заNornJунаследовано отHandlebarsметод расширения, каждое расширение внутри него может быть просто разработано с помощью функции, такой какNornJрасширить один**оператор, который используется для возведения в степень:

import nj from 'nornj';

nj.registerFilter('**', (val1, val2) => Math.pow(val1, val2));

Затем вы можете использовать его напрямую:

<input value="{ 2 ** 10 / 100 }">

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

Создайте двустороннюю привязку данных с помощью Mobx

использоватьNornJРасширяемость синтаксиса шаблонов дает теоретически безграничные возможности.#mobx-modelдаNornJРеализованный встроенный тег расширения (аналогичный инструкциям vue и ng), конкретное использование выглядит следующим образом:

import { Component } from 'react';
import { observable } from 'mobx';
import nj from 'nornj';
import 'nornj-react';
import 'nornj-react/mobx';

class TestComponent extends Component {
  @observable inputValue = '';

  render() {
    return nj`<input :#mobx-model="inputValue">`(this);
  }
}

• Онлайн-пример mobx-модели (jsfiddle)
• Онлайн-пример mobx-модели (codepen)

#mobx-modelБазовая реализация Vue и Vuev-modelотносительно похожи. React также имеет другие реализации двусторонней привязки, такие какMota, но способ реализации проекта — через компоненты более высокого порядка. использоватьNornJсинтаксис расширения, мы также можем реализовать больше похожего на#mobx-modelфункция расширения.

Объединение различных экосистем React

NornJЕго можно прекрасно сочетать с различными экосистемами React, в том числеReact-Native,Redux,React-Router,Mobx,Ant DesignПодождите, он может сосуществовать с любой существующей экосистемой React.

Более подробную документацию см.официальная документация.

Адаптируйтесь к различным React-Like библиотекам

NornJТеоретически любая React-подобная библиотека может быть адаптирована, в том числеPreact,inferno,anu,NervЖдать.

Для конкретных методов адаптации см.официальная документация.

визуализировать html-строку

NornJОн также поддерживает рендеринг строк html, что точно такое же, как и в традиционном механизме шаблонов js. Метод использования почти такой же, как и в React, подробности смотрите в этом онлайн-примере:

• Онлайн-игровая площадка (jsfiddle)
• Онлайн-игровая площадка (codepen)

Конечно,NornJТакже может поддерживать сервер Node.jsExpressа такжеKoaЖдать. традиционный js-шаблонcompile,renderи так далее,NornJТакже поддерживается.

Подробнее см.официальная документация.

Планы NornJ на будущее

NornJВ будущем у нас еще есть много аспектов, которые можно улучшить, например:

• Разработка плагинов eslint

NornJВ настоящее время, несмотря на наличие внутреннего механизма предупреждения о синтаксической ошибке, он просто выводит ошибку на консоль. Для обнаружения статических синтаксических ошибокNornJВ будущем необходимо будет разработать плагин eslint.

• Непрерывная оптимизация производительности

несмотря на то чтоNornJТекущая эффективность отрисовки шаблона не низкая (см.Тест эффективности рендеринга шаблона), но возможностей для оптимизации еще много, и работа над оптимизацией будет продолжена.

• глобализация

• Адаптировать к Vue

NornJАдаптация к Vue — это идея на данный момент, и теоретически она достижима. Но есть несколько сложностей:

1. используется Вью虚拟domСтруктура объекта не такая простая, как в React, она использует что-то вродеsnabbdomструктура, в которой события и другие методы привязаны к специальным объектам. Эта параNornJНесколько сложно адаптироваться к React.
2. Хотя синтаксис шаблона Vue уже работает хорошоNornJВы можете предоставить какой-то свой уникальный синтаксис, но роль улучшения опыта разработки, вероятно, не так очевидна, как в React.

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