RIOT.JS - 快速指南

上一頁
下一頁

RIOT.JS - 概述

RIOT.js 是一個非常小巧/輕量級的基於 Web Components 的 UI 庫，用於開發 Web 應用程式。它結合了 React.JS 和 Polymer 的優勢，具有非常簡潔的實現和簡單的結構，易於學習和使用。它的壓縮版本大小接近 10KB。

以下是 RIOT.js 的主要特性

表示式繫結

  • DOM 更新和重繪期間的有效載荷非常小。

  • 更改從父標籤向下傳播到子標籤/控制元件。

  • 使用預編譯的表示式並將其快取以提高效能。

  • 提供對生命週期事件的良好控制。

遵循標準

  • 沒有專有的事件系統

  • 不依賴任何 polyfill 庫。

  • 沒有向現有的 HTML 新增額外的屬性。

  • 與 jQuery 整合良好。

核心價值觀

RIOT.js 的開發考慮了以下價值觀。

  • 簡單且極簡主義。

  • 易於學習和實施。

  • 提供響應式檢視來構建使用者介面。

  • 提供事件庫來構建具有獨立模組的 API。

  • 處理瀏覽器後退按鈕的應用程式行為。

RIOT.JS - 環境設定

有兩種方法可以使用 RIOT js。

  • 本地安裝 - 您可以在本地機器上下載 RIOT 庫，並將其包含在您的 HTML 程式碼中。

  • 基於 CDN 的版本 - 您可以直接從內容分發網路 (CDN) 將 RIOT 庫包含到您的 HTML 程式碼中。

本地安裝

示例

現在您可以如下在 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) 將 RIOT js 庫包含到您的 HTML 程式碼中。Google 和 Microsoft 提供了最新版本的內容分發。

注意 - 在本教程中，我們始終使用 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.JS - 第一個應用程式

RIOT 透過構建自定義的可重用 html 標籤來工作。這些標籤類似於 Web Components，可以在頁面和 Web 應用程式之間重用。

使用 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 傳遞給它。掛載過程將 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.JS - 標籤

RIOT 透過構建自定義的可重用 html 標籤來工作。這些標籤類似於 Web Components，可以在頁面和 Web 應用程式之間重用。當您在 HTML 頁面中包含 RIOT 框架時，匯入的 js 會建立一個指向 riot 物件的 riot 變數。此物件包含與 RIOT.js 互動所需的功能，例如建立和掛載標籤。

我們可以透過兩種方式建立和使用標籤。

  • 內聯 HTML - 透過呼叫 riot.tag() 函式。此函式採用標籤名稱和標籤定義來建立一個標籤。標籤定義可以包含 HTML、JavaScript 和 CSS 等。

  • 單獨的標籤檔案 - 透過將標籤定義儲存在標籤檔案中。此標籤檔案包含建立標籤的標籤定義。此檔案需要匯入到 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 使用 {} 來定義表示式。RIOT js 允許以下型別的表示式。

  • 簡單表示式 - 定義一個變數並在標籤中使用。

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

  • 評估表示式 - 在運算中使用時評估變數。

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

  • 從 Options 物件獲取值 - 獲取透過屬性傳遞給標籤的值。

示例

以下是上述概念的完整示例。

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 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.JS - 條件語句

條件語句是用於顯示/隱藏 RIOT 標籤元素的結構。以下是 RIOT 支援的三種條件語句 -

  • if - 根據傳遞的值新增/刪除元素。

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

  • show - 如果傳遞 true，則使用 style = "display:' ' " 顯示元素。

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

  • hide - 如果傳遞 true，則使用 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>

這將產生以下結果 -

RIOT.JS - Yield

Yield 是一種將外部 html 內容放入 RIOT 標籤的機制。有多種方法可以執行 yield。

  • 簡單 Yield - 如果我們想替換標籤中的單個佔位符。然後使用此機制。

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

<custom3Tag><b>User</b></custom3Tag>

  • 多個 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>

這將產生以下結果 -

RIOT.JS - 事件處理

我們可以像使用 refs 物件訪問 HTML 元素一樣，將事件附加到 HTML 元素上。第一步是在 DOM 元素上新增 ref 屬性，並在標籤的指令碼塊中使用 this.ref 訪問它。

  • 附加 ref - 在 DOM 元素上新增 ref 屬性。

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

  • 使用 refs 物件 - 現在在 mount 事件中使用 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>

這將產生以下結果 -

RIOT.JS - 訪問DOM

我們可以使用 refs 物件訪問 HTML 元素。第一步是在 DOM 元素上新增 ref 屬性，並在標籤的指令碼塊中使用 this.ref 訪問它。

  • 附加 ref - 在 DOM 元素上新增 ref 屬性。

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

  • 使用 refs 物件 - 現在在 mount 事件中使用 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.JS - 迴圈

我們可以遍歷 RIOT 的基本型別或物件的陣列，並在執行時建立/更新 html 元素。使用“each”結構可以實現它。

  • 建立陣列 - 建立一個物件陣列。

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

  • 新增 each 屬性 - 現在使用“each”屬性。

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

  • 迭代物件陣列 - 使用物件屬性迭代陣列。

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

這將產生以下結果 -

RIOT.JS - Mixin

透過 Mixin，我們可以在標籤之間共享通用功能。Mixin 可以是函式、類或物件。考慮一個每個標籤都應該使用的身份驗證服務的案例。

  • 定義 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!'
      }   
   }
});

  • 初始化 mixin - 在每個標籤中初始化 mixin。

this.mixin('authService')

  • 使用 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>

這將產生以下結果 -

RIOT.JS - 可觀察物件

可觀察物件機制允許 RIOT 從一個標籤向另一個標籤傳送事件。以下 API 對於理解 RIOT 可觀察物件非常重要。

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

這將產生以下結果 -

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.