摘要：目前已經(jīng)在大大小小多個線上產(chǎn)品中使用了，也收集了一些有效的建議好了，該看下一個最簡單的組件長什么樣吧免費領取驗證碼內(nèi)容安全短信發(fā)送直播點播體驗包及云服務器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū)

本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。

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

Regularjs是基于動態(tài)模板實現(xiàn)的用于構(gòu)建數(shù)據(jù)驅(qū)動型組件的新一代類庫

關(guān)鍵詞

動態(tài)模板引擎

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

數(shù)據(jù)驅(qū)動的開發(fā)模式

100%的獨立性

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

×
{#if needTitle}    
{msg.title}
{/if}    
{msg.message}

數(shù)據(jù)驅(qū)動

強制數(shù)據(jù)模型抽象是因

數(shù)據(jù)驅(qū)動的開發(fā)模式是果

數(shù)據(jù)驅(qū)動即強制將你的業(yè)務邏輯抽象為數(shù)據(jù)（狀態(tài)）的變化， 這樣原本瑣碎的前端開發(fā)會更加貼近與編程本質(zhì)（算法 + 數(shù)據(jù)結(jié)構(gòu)）, 帶來的開發(fā)體驗上的進步事實上早已被angularjs或更骨灰的knockout框架所驗證.

當然數(shù)據(jù)驅(qū)動的開發(fā)模式同時也帶來一些不便， 比如:

無法處理復雜的動畫

可控性不如直接的dom操作

數(shù)據(jù)模型抽象的方式有很多種， 但是目前不外乎以下幾種:

臟檢查

數(shù)據(jù)模型的臟檢查(angularjs / regularjs)

view抽象的臟檢查(react以及雨后春筍般的基于virtual dom的庫或框架)

存取器

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

常規(guī)的setter/getter函數(shù)(Backbone, knockoutjs, ractivejs)

對于這個點， 本來也有一篇長文正在撰寫， 但是這篇2015前端框架何去何從差不多說出了我的心聲， 推薦大家閱讀.

組件

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

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

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

regularjs中， 組件被拆分為了: 模板template + 數(shù)據(jù)data + 業(yè)務邏輯(實例函數(shù))的組合, 每一份組件可以視為一個小型的mvvm系統(tǒng).

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

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

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

js中實例化

var pager = new Pager({

data: {
  current: 1,
  total: 10
}

})
模板中實例化

它們帶來的結(jié)果是一致的， 我們可以看到標簽化只是組件的一種使用方式, 或是一種在模板中的接口形式， 關(guān)鍵是組件內(nèi)部的業(yè)務(領域)模型, 并且由于數(shù)據(jù)驅(qū)動的特性， 在mvvm模式下， 并不是所有可復用的交互元素都適合封裝成組件. 關(guān)于這點@民工精髓的這篇文章差不多說到了點子上.

組件與事件系統(tǒng)沒有直接關(guān)系, 但是一般而言，一個功能良好的組件會通過拋出事件來與外部系統(tǒng)進行溝通.

這里，是一個比較典型的基于regularjs構(gòu)建的Tabs組件.

{user.unread_messages_count}" on-active={user.unread_messages_count+=2} >

Your username is: {user.username}

{#list todos as item}

  Content of the first tab + {item} + {user.username}    

{/list}

類庫

類庫代表regularjs具有100%的獨立性.

無依賴

每個組件生命周期完全自治， 只有一個獨立的model, 不會像angular一樣創(chuàng)建出深度的原型繼承，使用上讓人困惑的scope.

不會引入框架級的設施: 模塊系統(tǒng) + 模板加載 + 路由. 但是不證明它不能支持， 目前regularjs支持browserify, requirejs的插件預解析模板文件. 打包后的文件為一個標準的UMD模塊， 可以在commonjs, AMD, Globals下使用. 路由的話可以使用regular-state來創(chuàng)建深層次的單頁應用, 這個已經(jīng)在實際產(chǎn)品中被實踐過， 。

大小 對比后其實你會發(fā)現(xiàn)， regularjs的大小始終維持在50kb, 對于同類的ractivejs, reactjs, angularjs動輒200kb+的大小， 它稱為類庫可謂非常厚道

相對精簡的內(nèi)核是regularjs成為一個能屈能伸的, 并對其他框架或類庫友好的關(guān)鍵所在.

新一代類庫

現(xiàn)在聲稱的下一代(Next-generation)框架越來越多了， 但是本質(zhì)永遠不會變(從根本和可能性討論問題， 程序員之間的扯皮其實是可以避免的 :) ， 即

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

我們目前就可以看得到得趨勢有:

web component: polymer x-tags

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

同構(gòu)的javascript: 這一般會包含兩個組成方面: 單頁應用與 路由系統(tǒng). 我可以負責任的說， 目前的基于框架的同構(gòu)app實現(xiàn)基本還處于玩具級別, DEMO和產(chǎn)品的性質(zhì)是不同的

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

....

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

regularjs有哪些特性
在實際使用中， 你會發(fā)現(xiàn)， regularjs就如我發(fā)布初期的slogan:

regularjs = reactjs(ractivejs) + angularjs

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

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

幾乎完備ES5表達式支持

指令/過濾器(雙向)

一致的事件系統(tǒng)

動畫系統(tǒng)

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

內(nèi)嵌組件 + 內(nèi)嵌內(nèi)容(transclued content)

良好的封裝性和擴展性

....

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

這是一個令人羞愧的設定， 與作者所在的環(huán)境也有直接關(guān)系， 但是對于那些可能也需要支持IE6的朋友們， regularjs可能是一個比較安全的選擇.

regularjs未來會拉出一個支持度接近vuejs的版本， 但是特性不會發(fā)生改變， 大家可以放心使用。 regularjs目前已經(jīng)在大大小小多個線上產(chǎn)品中使用了， 也收集了一些有效的建議.

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

免費領取驗證碼、內(nèi)容安全、短信發(fā)送、直播點播體驗包及云服務器等套餐

更多網(wǎng)易技術(shù)、產(chǎn)品、運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。

文章來源： 網(wǎng)易云社區(qū)