RIOT.JS-퀵 가이드

RIOT.js는 웹 애플리케이션을 개발하기위한 초소형 / 경량 웹 컴포넌트 기반 UI 라이브러리입니다. React.JS 및 Polymer의 이점을 매우 간결한 구현 및 배우고 사용할 수있는 간단한 구조와 결합합니다. 축소 된 버전은 거의 10KB 크기입니다.

다음은 RIOT.js의 주요 기능입니다.

식 바인딩

  • DOM 업데이트 및 리플 로우 중 매우 작은 페이로드.

  • 변경 사항은 상위 태그에서 하위 태그 / 컨트롤로 아래쪽으로 전파됩니다.

  • 사전 컴파일 된 표현식을 사용하고 고성능을 위해 캐시합니다.

  • 수명주기 이벤트를 잘 제어합니다.

표준을 따릅니다

  • 독점 이벤트 시스템 없음

  • polyfill 라이브러리에 대한 종속성이 없습니다.

  • 기존 HTML에 추가 된 추가 속성이 없습니다.

  • jQuery와 잘 통합됩니다.

핵심 가치

RIOT.js는 다음과 같은 값을 고려하여 개발되었습니다.

  • 간단하고 최소한의.

  • 배우고 구현하기 쉽습니다.

  • 사용자 인터페이스를 구축하기위한 반응 뷰를 제공합니다.

  • 독립 모듈로 API를 구축하기 위해 이벤트 라이브러리를 제공합니다.

  • 브라우저 뒤로 버튼을 사용하여 애플리케이션 동작을 처리합니다.

RIOT js를 사용하는 방법에는 두 가지가 있습니다.

  • Local Installation − RIOT 라이브러리를 로컬 컴퓨터에 다운로드하여 HTML 코드에 포함 할 수 있습니다.

  • CDN Based Version − CDN (Content Delivery Network)에서 직접 RIOT 라이브러리를 HTML 코드에 포함시킬 수 있습니다.

로컬 설치

  • 다음으로 이동 https://riot.js.org 사용 가능한 최신 버전을 다운로드하십시오.

  • 이제 다운로드 riot.min.js 웹 사이트의 디렉토리에있는 파일 (예 : / riotjs).

예

이제 다음과 같이 HTML 파일에 riotjs 라이브러리를 포함 할 수 있습니다.

<!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 기반 버전

CDN (Content Delivery Network)에서 직접 RIOT js 라이브러리를 HTML 코드에 포함 할 수 있습니다. Google과 Microsoft는 최신 버전의 콘텐츠를 제공합니다.

Note −이 튜토리얼 전체에서 라이브러리의 CDNJS 버전을 사용하고 있습니다.

예

이제 CDNJS의 jQuery 라이브러리를 사용하여 위의 예를 다시 작성하겠습니다.

<!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 페이지에서 riot.js를 가져옵니다.

<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를 전달하십시오. 마운트 프로세스는 html 페이지의 모든 발생에 messageTag를 마운트합니다. 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 태그를 구축하여 작동합니다. 이러한 태그는 웹 구성 요소와 유사하며 페이지 및 웹 앱에서 재사용 할 수 있습니다. HTML 페이지에 RIOT 프레임 워크를 포함하면 가져온 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 − 스타일 = "를 사용하는 요소를 표시합니다.display:' ' "true로 전달 된 경우.

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

  • hide − style = "를 사용하여 요소를 숨 깁니다.display:'none' "true로 전달 된 경우.

<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− 태그에서 단일 자리 표시자를 교체하려는 경우. 그런 다음이 메커니즘을 사용하십시오.

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

  • Multiple Yield− 태그에서 여러 자리 표시자를 교체하려는 경우. 그런 다음이 메커니즘을 사용하십시오.

<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>

이것은 다음 결과를 생성합니다-

refs 객체를 사용하여 HTML 요소에 액세스하는 것과 유사한 방식으로 이벤트를 HTML 요소에 첨부 할 수 있습니다. 첫 번째 단계로 DOM 요소에 ref 속성을 추가하고 태그의 스크립트 블록에서 this.ref를 사용하여 액세스합니다.

  • Attach ref − DOM 요소에 ref 속성을 추가합니다.

<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>

이것은 다음 결과를 생성합니다-

refs 객체를 사용하여 HTML 요소에 액세스 할 수 있습니다. 첫 번째 단계로 DOM 요소에 ref 속성을 추가하고 태그의 스크립트 블록에서 this.ref를 사용하여 액세스합니다.

  • Attach ref − DOM 요소에 ref 속성을 추가합니다.

<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 − 이제 "each"속성을 사용하십시오.

<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 − mount ()를 호출하기 전에 riot.mixin () 메서드를 사용하여 mixin을 정의하십시오.

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 − 초기화 후 태그 내에서 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는 한 태그에서 다른 태그로 이벤트를 보낼 수 있습니다. RIOT Observable을 이해하려면 다음 API가 중요합니다.

  • riot.observable(element)− 주어진 객체 요소에 대한 옵저버 지원을 추가하거나 인수가 비어있는 경우 새로운 옵저버 블 인스턴스가 생성되고 반환됩니다. 이 후 개체는 이벤트를 트리거하고 수신 할 수 있습니다.

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