RIOT.JS - Краткое руководство

RIOT.js - это очень маленькая / легкая библиотека пользовательского интерфейса на основе веб-компонентов для разработки веб-приложений. Он сочетает в себе преимущества React.JS и Polymer с очень лаконичной реализацией и простыми конструкциями для изучения и использования. Его уменьшенная версия имеет размер почти 10 КБ.

Ниже приведены ключевые особенности RIOT.js.

Привязки выражений

  • Очень маленькая полезная нагрузка во время обновления и перекомпоновки DOM.

  • Изменения распространяются вниз от родительских тегов на дочерние теги / элементы управления.

  • Использует предварительно скомпилированные выражения и кэширует их для повышения производительности.

  • Обеспечивает хороший контроль над событиями жизненного цикла.

Соблюдает стандарты

  • Нет собственной системы событий

  • Нет зависимости от каких-либо полифилловых библиотек.

  • К существующему HTML не добавляются дополнительные атрибуты.

  • Хорошо интегрируется с jQuery.

Главные ценности

RIOT.js разработан с учетом следующих значений.

  • Просто и минималистично.

  • Легко изучить и внедрить.

  • Обеспечьте реактивные представления для создания пользовательских интерфейсов.

  • Предоставьте библиотеку событий для создания API с независимыми модулями.

  • Чтобы позаботиться о поведении приложения, нажмите кнопку возврата в браузере.

RIOT js можно использовать двумя способами.

  • Local Installation - Вы можете загрузить библиотеку RIOT на свой локальный компьютер и включить ее в свой HTML-код.

  • CDN Based Version - Вы можете включить библиотеку RIOT в свой HTML-код прямо из сети доставки контента (CDN).

Локальная установка

  • Перейти к https://riot.js.org чтобы загрузить последнюю доступную версию.

  • Теперь ставим скачанный riot.min.js файл в каталоге вашего веб-сайта, например / riotjs.

пример

Теперь вы можете включить библиотеку riotjs в свой HTML-файл следующим образом:

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат -

Версия на основе CDN

Вы можете включить библиотеку RIOT js в свой HTML-код прямо из сети доставки контента (CDN). Google и Microsoft обеспечивают доставку контента для последней версии.

Note - В этом руководстве мы используем версию библиотеки CDNJS.

пример

Теперь перепишем приведенный выше пример, используя библиотеку jQuery от CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат -

RIOT работает путем создания настраиваемых многоразовых тегов html. Эти теги похожи на веб-компоненты и могут повторно использоваться на страницах и в веб-приложениях.

Шаги по использованию RIOT

  • Импортируйте riot.js на html-страницу.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

  • Запустите раздел сценария и определите содержимое тега как html. Также может быть включен скрипт, который мы увидим позже в руководстве.

var tagHtml = "<h1>Hello World!</h1>";

  • Определите тег с помощью метода riot.tag (). Передайте ему имя тега, messageTag и переменную, содержащую содержимое тега.

riot.tag("messageTag", tagHtml);

  • Установите тег с помощью метода riot.mount (). Передайте ему имя тега messageTag. Процесс монтирования монтирует messageTag во всех его экземплярах на странице html. Тег MessageTag должен быть определен с помощью riot.js до монтирования.

riot.mount("messageTag");
</script>

Ниже приводится полный пример.

пример

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат -

RIOT работает путем создания настраиваемых многоразовых тегов html. Эти теги похожи на веб-компоненты и могут повторно использоваться на страницах и в веб-приложениях. Когда вы включаете структуру RIOT в свою HTML-страницу, импортированный js создает переменную riot, указывающую на объект riot. Этот объект содержит функции, необходимые для взаимодействия с RIOT.js, такие как создание и установка тегов.

Мы можем создавать и использовать теги двумя способами.

  • Inline HTML- Вызов функции riot.tag (). Эта функция принимает имя тега и определение тега для создания тега. Определение тега может содержать HTML, JavaScript, CSS и т. Д.

  • Seperate Tag file- Сохраняя определение тега в файле тегов. Этот файл тегов содержит определение тега для создания тега. Этот файл необходимо импортировать вместо вызова riot.tag ().

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

Ниже приведен пример встроенного тега.

пример

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат -

Ниже приведен пример тега внешнего файла.

пример

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат -

RIOT js использует {} для определения выражений. RIOT js позволяет использовать следующие типы выражений.

  • Simple Expression - Определите переменную и используйте ее в теге.

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
   </script>
</customTag>

  • Evaluate Expression - Оценить переменную при использовании в операции.

<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>

  • Get value from Options object - Чтобы получить значение, переданное в тег через атрибуты.

пример

Ниже приведен полный пример вышеупомянутых концепций.

customTag.tag

<customTag>
   <h1>{title}</h1>
   <h2>{val * 5}</h2>
   <h2>{opts.color}</h2>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.val = 4;
   </script>
</customTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <customTag color="red"></customTag>
      <script src = "customTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("customTag");
      </script>
   </body>
</html>

Это даст следующий результат -

Теги RIOT js могут иметь свой собственный стиль, и мы можем определять стили внутри тегов, которые будут влиять только на содержимое внутри тега. Мы также можем установить класс стиля, используя скрипты, также внутри тега. Ниже приведен синтаксис, как добиться стилизации тегов RIOT.

custom1Tag.tag

<custom1Tag>
   <h1>{title}</h1>
   <h2 class = "subTitleClass">{subTitle}</h2>
   <style>
   h1 {
      color: red;
   }
   .subHeader {
      color: green;
   }
   </style>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <h1>Non RIOT Heading</h1>
      <custom1Tag></custom1Tag>
      <script src = "custom1Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom1Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

Условные выражения - это конструкции, которые используются для отображения / скрытия элементов тегов RIOT. Ниже приведены три условия, которые поддерживает RIOT:

  • if - добавить / удалить элемент в зависимости от переданного значения.

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • show - показывает элемент с использованием style = "display:' ' "если прошло верно.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • hide - скрывает элемент с помощью style = "display:'none' "если прошло верно.

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

пример

Ниже приводится полный пример.

custom2Tag.tag

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <h2 if = {show}>Welcome!</h1>
   <h2 show = {showMessage}>Using show!</h2>
   <h2 hide = {show}>Using hide!</h2>
   <script>
      this.showMessage = true;
      this.show = false; 
   </script>
</custom2Tag>

custom2.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom2Tag></custom2Tag>
      <script src = "custom2Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom2Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

Yield - это механизм для помещения внешнего HTML-содержимого в тег RIOT. Есть несколько способов сделать доходность.

  • Simple Yield- Если мы хотим заменить один заполнитель в tag. Тогда воспользуйтесь этим механизмом.

<custom3Tag>
   Hello <yield/>
</custom3Tag>
<custom3Tag><b>User</b></custom3Tag>

  • Multiple Yield- Если мы хотим заменить несколько заполнителей в tag. Тогда воспользуйтесь этим механизмом.

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>
<custom4Tag>
   <yield to = "first">User 1</yield>
   <yield to = "second">User 2</yield>
</custom4Tag>

пример

Ниже приводится полный пример.

custom3Tag.tag

<custom3Tag>
   Hello <yield/>
</custom3Tag>

custom4Tag.tag

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

custom3.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom3Tag><b>User</b></custom3Tag>
      <custom4Tag>
         <yield to = "first">User 1</yield>
         <yield to = "second">User 2</yield>
      </custom4Tag>   
      <script src = "custom3Tag.tag" type = "riot/tag"></script>
      <script src = "custom4Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom3Tag");
         riot.mount("custom4Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

Мы можем прикрепить событие к HTML-элементам точно так же, как мы получаем доступ к HTML-элементам с помощью объекта refs. В качестве первого шага мы добавляем атрибут ref к элементу DOM и получаем к нему доступ, используя this.ref в блоке скрипта тега.

  • Attach ref - Добавить атрибут ref к элементу DOM.

<button ref = "clickButton">Click Me!</button>

  • Use the refs object- Теперь используйте объект refs в событии монтирования. Это событие запускается, когда RIOT монтирует настраиваемый тег и заполняет объект refs.

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

пример

Ниже приводится полный пример.

custom5Tag.tag

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click Me!" />
   </form>
   <script>
      this.on("mount", function() {
         console.log("Mounting");
         console.log(this.refs.username.value); 
      })
   </script>
</custom5Tag>

custom5.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom5Tag></custom5Tag>
      <script src = "custom5Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom5Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

Мы можем получить доступ к HTML-элементам с помощью объекта refs. В качестве первого шага мы добавляем атрибут ref к элементу DOM и получаем к нему доступ, используя this.ref в блоке скрипта тега.

  • Attach ref - Добавить атрибут ref к элементу DOM.

<button ref = "clickButton">Click Me!</button>

  • Use the refs object- Теперь используйте объект refs в событии монтирования. Это событие запускается, когда RIOT монтирует настраиваемый тег и заполняет объект refs.

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

пример

Ниже приводится полный пример.

custom6Tag.tag

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            return false;
         };
         this.refs.customForm.onsubmit = function(e) {
            console.log("Form submitted");
            return false;
         };
      }) 
   </script>
</custom6Tag>

custom6.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom6Tag></custom6Tag>
      <script src = "custom6Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom6Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

Мы можем перебирать массив примитивов или объектов RIOT и создавать / обновлять элементы html на ходу. Используя конструкцию «каждый», мы можем этого добиться.

  • Create array - Создать массив объекта.

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

  • Add each attribute - Теперь используйте атрибут «каждый».

<ul>
   <li each = { cities } ></li>
</ul>

  • Iterate array of objects - Итерировать массив, используя свойства объекта.

<input type = "checkbox" checked = { done }> { city } - { country }

пример

Ниже приводится полный пример.

custom7Tag.tag

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom7Tag></custom6Tag>
      <script src = "custom7Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom7Tag");
      </script>
   </body>
</html>

Это даст следующий результат -

С помощью Mixin мы можем использовать общие функции тегов. Mixin может быть функцией, классом или объектом. Рассмотрим случай службы аутентификации, которую должен использовать каждый тег.

  • Define Mixin - Определите миксин с помощью метода riot.mixin () перед вызовом mount ().

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

  • Initialize mixin - Инициализировать миксин в каждом теге.

this.mixin('authService')

  • Use mixin - После инициализации миксин можно использовать внутри тега.

this.message = this.login("admin","admin");

пример

Ниже приводится полный пример.

custom8Tag.tag

<custom8Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin","admin")
   </script>
</custom8Tag>

custom9Tag.tag

<custom9Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin1","admin")
   </script>
</custom9Tag>

custom8.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom8Tag></custom8Tag>
      <custom9Tag></custom9Tag>
      <script src = "custom8Tag.tag" type = "riot/tag"></script>
      <script src = "custom9Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mixin('authService', {
            init: function() {
               console.log('AuthService Created!')
            },
            login: function(user, password) {
               if(user == "admin" && password == "admin"){
                  return 'User is authentic!'
               }else{
                  return 'Authentication failed!'
               }   
            }
         });
         riot.mount("*");
      </script>
   </body>
</html>

Это даст следующий результат -

Механизм Observables позволяет RIOT отправлять события от одного тега к другому. Следующие API важны для понимания наблюдаемых RIOT.

  • riot.observable(element)- Добавляет поддержку Observer для данного элемента объекта или, если аргумент пуст, создается и возвращается новый наблюдаемый экземпляр. После этого объект может запускаться и прослушивать события.

var EventBus = function(){
   riot.observable(this);
}

  • element.trigger(events) - Выполнить все функции обратного вызова, которые прослушивают данное событие.

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

  • element.on(events, callback) - Прослушивание данного события и выполнение обратного вызова каждый раз, когда событие запускается.

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

пример

Ниже приводится полный пример.

custom10Tag.tag

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
      }
   </script>    
</custom10Tag>

custom11Tag.tag

<custom11Tag>
   <script>
      riot.eventBus.on('message', function(input) {      
         console.log(input);
      });
   </script>    
</custom11Tag>

custom9.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom10Tag></custom10Tag>
      <custom11Tag></custom11Tag>
      <script src = "custom10Tag.tag" type = "riot/tag"></script>
      <script src = "custom11Tag.tag" type = "riot/tag"></script>
      <script>
         var EventBus = function(){
            riot.observable(this);
         }
         riot.eventBus = new EventBus();
         riot.mount("*");
      </script>
   </body>
</html>

Это даст следующий результат -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved