Riot.js——一個小而美的JS框架

時間 2019-11-09

標籤 riot.js riot 一個小而美的框架欄目 JavaScript 简体版

原文原文鏈接

Riot.js是什麼？

Riot 擁有建立現代客戶端應用的全部必需的成分：css

「響應式」視圖層用來建立用戶界面
用來在各獨立模塊之間進行通訊的事件庫
用來管理URL和瀏覽器回退按鈕的路由器(Router)

Riot 儘可能不使用強制的規則，而是提供最基本的工具，但願你可以有創意地使用它們。這種靈活的方式將應用層面的大的架構決策交還給開發者。html

爲何須要一個新的 UI 庫?

簡單的說，它跟React相似，專一於view層，能夠理解成不那麼臃腫的 React + Polymer。並無從新發明輪子，而是從已有的工具中提取精華，構建出儘可能簡單的工具。vue

Riot有什麼特色?

Riot 在全部瀏覽器上支持自定義標籤。
對閱讀友好

自定義標籤容許你用HTML來編寫複雜的用戶界面。你的應用會長成這個樣子:webpack

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

虛擬 DOMgit
- 保證最少許的DOM 更新和數據流動
- 支持自定義標籤的服務端渲染，支持單語言應用
與標準保持一致github
- 沒有專有的事件系統
- 渲染出的 DOM 節點能夠放心地用其它工具(庫)進行操做
- 不要求額外的 HTML 根元素或 data- 屬性
- 與 jQuery 友好共存
很是低的學習成本web
- 與其它 UI 庫比較，Riot 所提供的 API 方法的數量要少 10 至 100倍。這意味着須要學習的內容更少。須要閱讀的書籍和指南文檔更少。
- 專有的內容更少，而更多符合標準的成分。

你能夠感覺下，這是 Riot 寫的Todo：編程

<todo>

  <h3>{ opts.title }</h3>

  <ul>
    <li each={ items }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
      </label>
    </li>
  </ul>

  <form onsubmit={ add }>
    <input name="input" onkeyup={ edit }>
    <button disabled={ !text }>Add #{ items.length + 1 }</button>
  </form>

  <script>
    this.disabled = true

    this.items = opts.items

    edit(e) {
      this.text = e.target.value
    }

    add(e) {
      if (this.text) {
        this.items.push({ title: this.text })
        this.text = this.input.value = ''
      }
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
  </script>

</todo>

體積極小，壓縮以後只有10.36KB。api
- 更少的bug
- 解析更快，下載更迅速
- 方便嵌入. 庫應該比整個應用小
- 維護工做量更小

基本執行原理

一個riot自定義標籤在平常開發中從源碼到呈如今頁面上主要分爲三步：編譯(通常利用官方自帶編譯工具)、註冊(riot.tag())和加載(riot.mount())，以下圖所示：瀏覽器

自定義 Tag 的建立過程是這樣的:

建立標籤實例
標籤訂義中的JavaScript被執行
HTML 中的表達式被首次計算並首次觸發「update」事件
標籤被加載 (mount) 到頁面上，觸發「mount」事件

加載完成後，表達式會在如下時機被更新:

當一個事件處理器被調用（如上面ToDo示例中的toggle方法）後自動更新。你也能夠在事件處理器中設置 e.preventUpdate = true 來禁止這種行爲。
當前標籤實例的 this.update() 方法被調用時
當前標籤的任何一個祖先的 this.update() 被調用時. 更新從父親到兒子單向傳播。
當 riot.update() 方法被調用時, 會更新頁面上全部的表達式。
每次標籤實例被更新，都會觸發「update」事件。

因爲表達式的首次計算髮生在加載以前，因此不會有相似 <img src={ src }> 計算失敗之類的意外問題。