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

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

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

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

關鍵詞

動態(tài)模板引擎

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

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

100%的獨立性

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

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

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

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

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

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

當然數(shù)據(jù)驅動的開發(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ā)領域， 組件應該是一種獨立的、可復用的交互元素的封裝

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

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
}

})
模板中實例化

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

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

這里，是一個比較典型的基于regularjs構建的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)建深層次的單頁應用, 這個已經在實際產品中被實踐過， 。

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

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

新一代類庫

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

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

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

web component: polymer x-tags

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

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

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

....

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

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

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

良好的封裝性和擴展性

....

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

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

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

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

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

更多網易技術、產品、運營經驗分享請訪問網易云社區(qū)。

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