Web Component是Web開發(fā)的未來(lái)。Polymer, X-Tag等Web Component框架也越來(lái)越熱門，但由于其瀏覽器支持度不高，我們?nèi)匀鄙賹eb Component應(yīng)用到專案中的機(jī)會(huì)。

但是，雖然Web Component的支持度不高，但并不代表我們不能在現(xiàn)有的項(xiàng)目中使用元件化開發(fā)思想。

Nova.js可以幫助我們?cè)陧?xiàng)目中使用Web元件化的方式進(jìn)行開發(fā)，同時(shí)，支持行動(dòng)端所有主流瀏覽器及PC端IE9+及其它主流瀏覽器。

NOVA.js 的特色

自定義元素

通過(guò)自定義元素的方式實(shí)現(xiàn)元件?？煞奖憧焖俚囟x元素的樣式、模板、屬性、方法、生命周期各階段的行為。

Scoped CSS

編寫自定義元素的CSS時(shí)無(wú)需擔(dān)心影響外部元素，樣式只會(huì)作用于元素及其內(nèi)部，將你從命名的牢籠中解救出來(lái)。

雙向綁定

通過(guò)MVVM模型，方便開發(fā)者快速關(guān)聯(lián)元素的模板與屬性，快速綁定事件, 無(wú)需過(guò)多手動(dòng)地讀寫DOM節(jié)點(diǎn)來(lái)同步屬性。

更多功能

Nova.js使用gzip壓縮后僅12K，支持所有移動(dòng)端瀏覽器和IE9+等主流PC瀏覽器。它還包含屬性監(jiān)聽(tīng)、方法切片、Behavior復(fù)用機(jī)制等功能。

Nova.js與Polymer、Vue.js的區(qū)別

與Polymer

Nova.js是根據(jù)Polymer設(shè)計(jì)而來(lái)。其主要區(qū)別有：

1. 支持度：Polymer移動(dòng)端只支持到Android4.4，PC端的支持也與Import、Template等標(biāo)準(zhǔn)的支持度一樣非常低。但是Nova.js已經(jīng)可以支持所有移動(dòng)端瀏覽器，PC端的IE9+和其它主流瀏覽器。
2. 體積：Polymer底層龐大，若在移動(dòng)端想使用基于Polymer的一個(gè)元件，流量代價(jià)較高。而Nova.js在gzip壓縮后只有12K。相對(duì)所有其它的MVVM架構(gòu)，非常小巧精簡(jiǎn)。

與Vue.js

1. 定位：Vue.js的定位是Web應(yīng)用框架。而Nova.js專注與元件開發(fā)。因此Nova.js元件的樣式具有作用域、能方便定義元件模板。總而言之，開發(fā)元件更為方便。
2. ?。?Nova.js的體積為Vue.js的一半以下。因此當(dāng)使用者想簡(jiǎn)單引入一個(gè)元件時(shí)、使用Nova.js的代價(jià)也是更低的。

Nova.js的優(yōu)勢(shì)

Nova.js的主要優(yōu)勢(shì)就是小巧、專注于開發(fā)元件?，F(xiàn)在有許多Web應(yīng)用框架，如React、Vue.js、Angular等。但是它們的問(wèn)題是太龐大。當(dāng)我們想在一個(gè)很簡(jiǎn)單的頁(yè)面（例如活動(dòng)宣傳頁(yè)）中使用現(xiàn)成的元件時(shí)，如果還要引入React,Vue.js等框架的基礎(chǔ)庫(kù)，那么成本并不低。

使用Nova.js開發(fā)元件，不管未來(lái)頁(yè)面使用的是什么Web框架，或者是一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面。都能引入小巧的元件。

Nova.js官網(wǎng)

NovaUI官網(wǎng)