Regularjs是什麼

本文由做者鄭海波受權網易雲社區發佈。

此文摘自regularjs的指南， 目前指南正在全面更新， 把老文檔的【接口/語法部分】統一放到了獨立的 Reference頁面.

Regularjs是基於動態模板實現的用於構建數據驅動型組件的新一代類庫

關鍵詞

1. 動態模板引擎

關於前端的模板技術， 我在前端亂燉有一篇反響還算不錯的綜合性文章——一個對前端模板技術的全面總結， 整體來說動態模板引擎是一種介於常規字符串模板(jade, ejs)和Dom模板(angulrjs, vuejs)之間的模板技術, 它保證了regularjs的:

1. 數據驅動的開發模式

2. 100%的獨立性

一個regularjs組件的模板寫法相似這樣

<div class="m-notify m-notify-{position}">
  {#list messages as msg}  <div class="notify notify-{msg.type||'info'}" >
    <div class="glyphicon glyphicon-{iconMap[msg.type]}"></div>
    <span class="notify_close" on-click={this.clear(msg)}>×</span>
    {#if needTitle}    <h4 class="notify_title">{msg.title}</h4>
    {/if}    <p class="notify_message">{msg.message}</p>
  </div>
  {/list}</div>

很是接近於咱們使用字符串模板的體驗. 可是不一樣的時， 它編譯生成的不是字符串而是Living dom, 使得view是會隨着數據變化的， 相信你也看到了模板中有相似on-click的屬性， 由於其實compile結束以後， regularjs與angularjs產生的Living Dom已經沒有本質區別，因爲也是基於髒檢查的設定， 事實上後續使用會很是接近angularjs.

2. 數據驅動

• 強制數據模型抽象是因

• 數據驅動的開發模式是果

數據驅動即強制將你的業務邏輯抽象爲數據（狀態）的變化， 這樣本來瑣碎的前端開發會更加貼近與編程本質（算法 + 數據結構）, 帶來的開發體驗上的進步事實上早已被angularjs或更骨灰的knockout框架所驗證.

固然數據驅動的開發模式同時也帶來一些不便， 好比:

1. 沒法處理複雜的動畫

2. 可控性不如直接的dom操做

數據模型抽象的方式有不少種， 可是目前不外乎如下幾種:

• 髒檢查

• 數據模型的髒檢查(angularjs / regularjs)

• view抽象的髒檢查(react以及雨後春筍般的基於virtual dom的庫或框架)

• 存取器

• 計算屬性: defineProperty(vuejs, 黑科技avalonjs)

• 常規的setter/getter函數(Backbone, knockoutjs, ractivejs)

對於這個點， 原本也有一篇長文正在撰寫， 可是這篇2015前端框架何去何從差很少說出了個人心聲， 推薦你們閱讀.

3. 組件

隨着angularjs等框架的大行其道， bootstrap等ui框架也提供了不少標籤上直接可配的使用方式. 大部分的人腦中對組件化的理解彷佛開始停留在了【標籤化】這個層級上, 事實上組件的定義歷來未曾改變過:

在前端開發領域， 組件應該是一種獨立的、可複用的交互元素的封裝

而在基於特定框架/類庫之下， 組件會被強加一種特定的構建方式. 就如:

• regularjs中， 組件被拆分爲了: 模板template + 數據data + 業務邏輯(實例函數)的組合, 每一份組件能夠視爲一個小型的mvvm系統.

• react中， 組件被拆分爲了: state + virtual-dom聲明(render函數) + 業務邏輯的組合

• angularjs1.x版本中， 事實上它的組件化是不純粹的， 推薦你們看下2.0的設計

一個典型的例子就是regularjs中組件的兩種使用方式:

• js中實例化

  var pager = new Pager({
    data: {
      current: 1,
      total: 10
    }
  })

• 模板中實例化

  <pager current=1 total=100></pager>

它們帶來的結果是一致的， 咱們能夠看到標籤化只是組件的一種使用方式, 或是一種在模板中的接口形式， 關鍵是組件內部的業務(領域)模型, 而且因爲數據驅動的特性， 在mvvm模式下， 並非全部可複用的交互元素都適合封裝成組件. 關於這點@民工精髓的這篇文章差很少說到了點子上.

組件與事件系統沒有直接關係, 可是通常而言，一個功能良好的組件會經過拋出事件來與外部系統進行溝通.

這裏，是一個比較典型的基於regularjs構建的Tabs組件.

<Tabs ref="tabs">
  <TabPane title="<strong>Inbox</strong> <span class='badge'>{user.unread_messages_count}</span>" on-active={user.unread_messages_count+=2} >
    Your username is: <strong>{user.username}</strong>
    <input r-model={user.username}  >
  </TabPane>
  {#list todos as item}    <TabPane title="Tab {item_index+1} " >
      Content of the first tab + {item} + {user.username}    </TabPane>
  {/list}</Tabs><hr><div>
  <button on-click={this.$refs.tabs.selectTab(0)}>Select first tab</button>
  <button on-click={this.$refs.tabs.selectTab(1)}>Select second tab</button>
  <button on-click={this.$refs.tabs.selectTab(2)}>Select third tab</button></div>

你們能夠與其餘好比angularjs或react作下對比.

4. 類庫

類庫表明regularjs具備100%的獨立性.

1. 無依賴

2. 每一個組件生命週期徹底自治， 只有一個獨立的model, 不會像angular同樣建立出深度的原型繼承，使用上讓人困惑的scope.

3. 不會引入框架級的設施: 模塊系統 + 模板加載 + 路由. 可是不證實它不能支持， 目前regularjs支持browserify, requirejs的插件預解析模板文件. 打包後的文件爲一個標準的UMD模塊， 能夠在commonjs, AMD, Globals下使用. 路由的話可使用regular-state來建立深層次的單頁應用, 這個已經在實際產品中被實踐過， 。

4. 大小 對比後其實你會發現， regularjs的大小始終維持在50kb, 對於同類的ractivejs, reactjs, angularjs動輒200kb+的大小， 它稱爲類庫可謂很是厚道

相對精簡的內核是regularjs成爲一個能屈能伸的, 並對其餘框架或類庫友好的關鍵所在.

5. 新一代類庫

如今聲稱的下一代(Next-generation)框架愈來愈多了， 可是本質永遠不會變(從根本和可能性討論問題， 程序員之間的扯皮實際上是能夠避免的 :) ， 即

下一代框架應該順應前端開發的趨勢和潮流

咱們目前就能夠看獲得得趨勢有:

1. web component: polymer x-tags

2. 動畫: material design等設計趨勢, 硬件和瀏覽器的更新

3. 同構的javascript: 這通常會包含兩個組成方面: 單頁應用與 路由系統. 我能夠負責任的說， 目前的基於框架的同構app實現基本還處於玩具級別, DEMO和產品的性質是不一樣的

4. ES6/7: Object.observe / class/ imports等

5. ....

在這些部分， regularjs有些完成了一些工做， 而有些還正在進行(可是已經確保可能性).

regularjs有哪些特性

在實際使用中， 你會發現， regularjs就如我發佈初期的slogan:

regularjs = reactjs(ractivejs) + angularjs

在regularjs僅僅50kb的身材之下, 你能看到一些react, angularjs以及ractive的影子， 後來者每每有社區上的劣勢， 但換句話說它沒有任何歷史包袱, 在設計中去糟存精使得regularjs更加易用. 固然它絕對不是特性整合這麼簡單, 它同時也提供了獨一無二的特性來幫助咱們實現卓有成效的組件級開發.

咱們先簡單看下regularjs的特性支持:

1. 幾乎完備ES5表達式支持

2. 指令/過濾器(雙向)

3. 一致的事件系統

4. 動畫系統

5. 單頁面支持: 需配合regular-state模塊

6. 內嵌組件 + 內嵌內容(transclued content)

7. 良好的封裝性和擴展性

8. ....

哦， 對了， 目前regularjs仍然支持IE6

這是一個使人羞愧的設定， 與做者所在的環境也有直接關係， 可是對於那些可能也須要支持IE6的朋友們， regularjs多是一個比較安全的選擇.

regularjs將來會拉出一個支持度接近vuejs的版本， 可是特性不會發生改變， 你們能夠放心使用。 regularjs目前已經在大大小小多個線上產品中使用了， 也收集了一些有效的建議.

---

好了， 該看下一個最簡單的regularjs組件長什麼樣吧..

免費領取驗證碼、內容安全、短信發送、直播點播體驗包及雲服務器等套餐

更多網易技術、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 wireshark抓包分析——TCP/IP協議