RIOT.JS - Hướng dẫn nhanh

RIOT.js là một thư viện giao diện người dùng dựa trên Thành phần Web có kích thước rất nhỏ / nhẹ để phát triển các ứng dụng web. Nó kết hợp những lợi ích của React.JS và Polymer với cách triển khai rất ngắn gọn và các cấu trúc đơn giản để học và sử dụng. Phiên bản thu nhỏ của nó có kích thước gần 10KB.

Sau đây là các tính năng chính của RIOT.js

Ràng buộc biểu hiện

  • Tải trọng rất nhỏ trong quá trình cập nhật và giới thiệu DOM.

  • Các thay đổi lan truyền xuống từ thẻ mẹ sang thẻ / điều khiển con.

  • Sử dụng các biểu thức được biên dịch trước và lưu vào bộ nhớ cache để có hiệu suất cao.

  • Cung cấp constrol tốt qua các sự kiện vòng đời.

Tuân theo các tiêu chuẩn

  • Không có hệ thống sự kiện độc quyền

  • Không phụ thuộc vào bất kỳ thư viện polyfill nào.

  • Không có thuộc tính bổ sung nào được thêm vào HTML hiện có.

  • Tích hợp tốt với jQuery.

Những giá trị cốt lõi

RIOT.js được phát triển dựa trên các giá trị sau.

  • Đơn giản và tối giản.

  • Dễ dàng học và thực hiện.

  • Cung cấp Chế độ xem phản ứng để xây dựng giao diện người dùng.

  • Cung cấp Thư viện sự kiện để xây dựng các API với các mô-đun độc lập.

  • Để chăm sóc hành vi của ứng dụng bằng nút quay lại của trình duyệt.

Có hai cách để sử dụng RIOT js.

  • Local Installation - Bạn có thể tải xuống thư viện RIOT trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.

  • CDN Based Version - Bạn có thể đưa thư viện RIOT vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

  • Đi đến https://riot.js.org để tải xuống phiên bản mới nhất có sẵn.

  • Bây giờ đặt tải xuống riot.min.js tập tin trong một thư mục của trang web của bạn, ví dụ: / riotjs.

Thí dụ

Bây giờ bạn có thể bao gồm thư viện riotjs trong tệp HTML của mình như sau:

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

Điều này sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể bao gồm thư viện RIOT js vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). Google và Microsoft cung cấp nội dung cung cấp cho phiên bản mới nhất.

Note - Chúng tôi đang sử dụng phiên bản CDNJS của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng thư viện jQuery từ 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>

Điều này sẽ tạo ra kết quả sau:

RIOT hoạt động bằng cách xây dựng các thẻ html tùy chỉnh, có thể tái sử dụng. Các thẻ này tương tự như các thành phần Web và có thể sử dụng lại trên các trang và ứng dụng web.

Các bước sử dụng RIOT

  • Nhập riot.js trong trang html.

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

  • Bắt đầu một phần tập lệnh và xác định nội dung thẻ là html. Script cũng có thể được bao gồm mà chúng ta sẽ xem sau trong hướng dẫn.

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

  • Xác định thẻ bằng phương thức riot.tag (). Chuyển cho nó tên của thẻ, messageTag và biến chứa nội dung thẻ.

riot.tag("messageTag", tagHtml);

  • Gắn thẻ bằng phương thức riot.mount (). Chuyển cho nó tên của thẻ, messageTag. Quá trình gắn kết sẽ gắn thẻ messageTag trong tất cả các lần xuất hiện của nó trong trang html. Thẻ MessageTag phải được xác định bằng riot.js trước khi gắn.

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

Sau đây là ví dụ đầy đủ.

Thí dụ

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

Điều này sẽ tạo ra kết quả sau:

RIOT hoạt động bằng cách xây dựng các thẻ html tùy chỉnh, có thể tái sử dụng. Các thẻ này tương tự như các thành phần Web và có thể sử dụng lại trên các trang và ứng dụng web. Khi bạn bao gồm khung công tác RIOT trong trang HTML của mình, js đã nhập sẽ tạo ra một biến bạo loạn trỏ đến một đối tượng bạo loạn. Đối tượng này chứa các chức năng cần thiết để tương tác với RIOT.js như tạo và gắn các thẻ.

Chúng ta có thể tạo và sử dụng thẻ theo hai cách.

  • Inline HTML- Bằng cách gọi hàm riot.tag (). Hàm này lấy tên thẻ và định nghĩa thẻ để tạo thẻ. Định nghĩa thẻ có thể chứa HTML, JavaScript và CSS, v.v.

  • Seperate Tag file- Bằng cách lưu trữ định nghĩa thẻ trong tệp thẻ. Tệp thẻ này chứa định nghĩa thẻ để tạo thẻ. Tệp này cần được nhập vào vị trí của lệnh gọi riot.tag ().

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

Sau đây là ví dụ về thẻ nội tuyến.

Thí dụ

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

Điều này sẽ tạo ra kết quả sau:

Sau đây là ví dụ về thẻ tệp bên ngoài.

Thí dụ

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>

Điều này sẽ tạo ra kết quả sau:

RIOT js sử dụng {} để xác định các biểu thức. RIOT js cho phép các loại biểu thức sau.

  • Simple Expression - Xác định một biến và sử dụng trong thẻ.

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

  • Evaluate Expression - Đánh giá một biến khi sử dụng trong một hoạt động.

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

  • Get value from Options object - Để lấy giá trị được truyền cho thẻ thông qua các thuộc tính.

Thí dụ

Sau đây là ví dụ đầy đủ về các khái niệm trên.

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>

Điều này sẽ tạo ra kết quả sau:

Các thẻ RIOT js có thể có kiểu riêng và chúng ta có thể xác định kiểu bên trong các thẻ mà sẽ chỉ ảnh hưởng đến nội dung bên trong thẻ. Chúng tôi cũng có thể đặt một lớp kiểu bằng cách sử dụng các tập lệnh cũng như trong một thẻ. Sau đây là cú pháp để đạt được kiểu dáng của thẻ 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>

Điều này sẽ tạo ra kết quả sau:

Điều kiện là cấu trúc được sử dụng để hiển thị / ẩn các phần tử của thẻ RIOT. Sau đây là ba điều kiện mà RIOT hỗ trợ:

  • if - thêm / bớt phần tử dựa trên giá trị được truyền vào.

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

  • show - hiển thị một phần tử sử dụng style = "display:' ' "nếu được thông qua true.

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

  • hide - ẩn một phần tử bằng cách sử dụng style = "display:'none' "nếu được thông qua true.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Lợi nhuận là một cơ chế để đưa nội dung html bên ngoài vào thẻ RIOT. Có nhiều cách để đạt được lợi nhuận.

  • Simple Yield- Nếu chúng tôi muốn thay thế một trình giữ chỗ duy nhất trong thẻ. Sau đó sử dụng cơ chế này.

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

  • Multiple Yield- Nếu chúng ta muốn thay thế nhiều chỗ dành sẵn trong thẻ. Sau đó sử dụng cơ chế này.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Chúng ta có thể đính kèm sự kiện vào các phần tử HTML theo cách tương tự như cách chúng ta truy cập các phần tử HTML bằng đối tượng refs. Bước đầu tiên, chúng ta thêm thuộc tính ref vào phần tử DOM và truy cập nó bằng cách sử dụng this.ref trong khối script của thẻ.

  • Attach ref - Thêm thuộc tính ref vào một phần tử DOM.

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

  • Use the refs object- Bây giờ sử dụng đối tượng refs trong sự kiện mount. Sự kiện này được kích hoạt khi RIOT gắn thẻ tùy chỉnh và nó điền vào đối tượng refs.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Chúng ta có thể truy cập các phần tử HTML bằng đối tượng refs. Bước đầu tiên, chúng ta thêm thuộc tính ref vào phần tử DOM và truy cập nó bằng cách sử dụng this.ref trong khối script của thẻ.

  • Attach ref - Thêm thuộc tính ref vào một phần tử DOM.

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

  • Use the refs object- Bây giờ sử dụng đối tượng refs trong sự kiện mount. Sự kiện này được kích hoạt khi RIOT gắn thẻ tùy chỉnh và nó điền vào đối tượng refs.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Chúng ta có thể lặp lại qua mảng RIOT của các nguyên thủy hoặc các Đối tượng và tạo / cập nhật các phần tử html khi đang di chuyển. Sử dụng cấu trúc "each", chúng ta có thể đạt được nó.

  • Create array - Tạo một mảng đối tượng.

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

  • Add each attribute - Bây giờ sử dụng thuộc tính "each".

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

  • Iterate array of objects - Lặp lại mảng bằng cách sử dụng thuộc tính đối tượng.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Thông qua Mixin, chúng tôi có thể chia sẻ chức năng chung giữa các thẻ. Mixin có thể là một hàm, lớp hoặc đối tượng. Hãy xem xét một trường hợp của Dịch vụ xác thực mà mỗi thẻ sẽ được sử dụng.

  • Define Mixin - Định nghĩa mixin bằng phương thức riot.mixin () trước khi gọi 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 - Khởi tạo mixin trong mỗi thẻ.

this.mixin('authService')

  • Use mixin - Sau khi khởi tạo, mixin có thể được sử dụng trong thẻ.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

Cơ chế Observables cho phép RIOT gửi các sự kiện từ thẻ này sang thẻ khác. Các API sau đây rất quan trọng để hiểu các RIOT quan sát được.

  • riot.observable(element)- Thêm hỗ trợ Observer cho phần tử đối tượng đã cho hoặc nếu đối số trống, một thể hiện có thể quan sát mới được tạo và trả về. Sau đó, đối tượng có thể kích hoạt và lắng nghe các sự kiện.

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

  • element.trigger(events) - Thực thi tất cả các hàm gọi lại lắng nghe sự kiện đã cho.

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

  • element.on(events, callback) - Nghe sự kiện đã cho và thực hiện lệnh gọi lại mỗi khi một sự kiện được kích hoạt.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau:

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