百度開源的快速、可移植且靈活的MVVM前端組件框架——San
介紹
San，是一個(gè)小巧的MVVM組件框架，它小巧的體積（<15k）、優(yōu)秀的兼容性以及卓越的性能是筆者認(rèn)為可以介紹給大家的一個(gè)原因，特別是其兼容性，其仍然兼容IE6，目前還沒見過哪個(gè)框架兼容到這么低版本的IE，所以說還是很有使用價(jià)值的，可稱得上是一個(gè)可靠、可依賴的實(shí)現(xiàn)響應(yīng)式用戶界面的解決方案！
快速開始
San是開源的，大家可以到Github找到他，從Github來看，百度對其維護(hù)還是到位了的。
下面是一段官網(wǎng)的簡單介紹，可以通過這些來快速了解它：
San 通過聲明式的類 HTML 視圖模板，在支持所有原生 HTML 的語法特性外，還支持了數(shù)據(jù)到視圖的綁定指令、業(yè)務(wù)開發(fā)中最常使用的分支、循環(huán)指令等，在保持良好的易用性基礎(chǔ)上，由框架完成基于字符串的模板解析，并構(gòu)建出視圖層的 節(jié)點(diǎn)關(guān)系樹，通過高性能的視圖引擎快速生成 UI 視圖。San 中定義的數(shù)據(jù)會(huì)被封裝，使得當(dāng)數(shù)據(jù)發(fā)生有效變更時(shí)通知 San 組件，San 組件依賴模板編譯階段生成的節(jié)點(diǎn)關(guān)系樹，確定需要變更的最小視圖，進(jìn)而完成視圖的異步更新，保證了視圖更新的高效性。
- var MyApp = san.defineComponent({
- template: '<p>Hello {{name}}!</p>',
- initData: function () {
- return {
- name: 'San'
- };
- }
- });
- var myApp = new MyApp();
- myApp.attach(document.body);
可以看到，通常情況使用 San 會(huì)經(jīng)過這么幾步：
- 我們先定義了一個(gè) San 的組件，在定義時(shí)指定了組件的 內(nèi)容模板 與 初始數(shù)據(jù) 。
- 初始化組件對象
- 讓組件在相應(yīng)的地方渲染
額外提示：在 JavaScript 中書寫 HTML 片段對維護(hù)來說是不友好的，我們可以通過 WebPack、AMD plugin、異步請求等方式管理。這里為了例子的簡單就寫在一起了。
從官方文檔可以大致了解了San是如何工作的，以及如何使用！
相關(guān)特性
San一共包含了九大特性，我們一起來了解下：
- HTML模板
聲明式的模板，在編寫視圖時(shí)就像是在寫一個(gè)普通的頁面，更符合 HTML 開發(fā)人員的習(xí)慣。
- 數(shù)據(jù)驅(qū)動(dòng)
修改數(shù)據(jù)，視圖引擎會(huì)根據(jù)綁定關(guān)系自動(dòng)刷新視圖，從此擺脫手工調(diào)用 DOM API 的繁瑣與可能的遺漏。
- 組件化
組件是數(shù)據(jù)、邏輯與視圖的聚合體。通過組件，我們封裝獨(dú)立的功能區(qū)塊，小到輸入組合，大到一個(gè)頁面。
- 高性能視圖
通過修改數(shù)據(jù)的方法，視圖引擎能夠直接刷新需要變更的視圖區(qū)域，無需進(jìn)行任何檢測，性能更高。
- 組件反解
為首屏?xí)r間優(yōu)化，服務(wù)端通常直接輸出HTML。我們能從現(xiàn)有的元素中反向解析出組件，并構(gòu)建綁定關(guān)系。
- 體積小巧
小于15k (gzipped) 的體積，無需擔(dān)心對頁面下載帶來負(fù)擔(dān)。體積強(qiáng)迫癥患者的福音。
- 良好的兼容性
通過方法修改數(shù)據(jù)的另一好處是，可以獲得更好的瀏覽器兼容性。畢竟有時(shí)我們產(chǎn)品的受眾用戶有點(diǎn)死板。
- 模塊管理自由
項(xiàng)目中可以任意選擇 ESNext Module 或 AMD 管理模塊。當(dāng)然，如果你想要用全局變量也是支持的。
- 引用方便
支持多種引用方式：NPM、GitHub、下載、HTTP 與 HTTPS CDN，讓開發(fā)和線上引用更便利。
文檔簡介
官方提供了非常詳細(xì)的文檔，而且文檔中都帶有示例，也就相當(dāng)于是教程，下面是一個(gè)最簡單的San組件：
一個(gè)語法如下的 .san 文件，就是一個(gè) San component：
- <template>
- <div class="hello">hello {{msg}}</div>
- </template>
- <script>
- export default {
- initData () {
- return {
- msg: 'world'
- };
- }
- }
- </script>
- <style>
- .hello {
- color: blue;
- }
- </style>
文檔大致是這些，就不再詳細(xì)的去看了，有需求的可以直接到官網(wǎng)查看：
周邊支持
San提供了提高生產(chǎn)力的相關(guān)周邊：
- DevTool
提供了類似于Vue和React的那種基于Chrome擴(kuò)展的開發(fā)者工具
- San-mui
一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 san 框架的組件庫，遵循 material design 規(guī)范，融入了開發(fā)常用的ui組件，幫助你快速搭建網(wǎng)站，開源的 San-MUI 來自百度 EFE。
- Router
支持hash和html5模板的router。單頁面或同構(gòu)的Web應(yīng)用一般都需要它
- Store
應(yīng)用狀態(tài)管理套件，理念類似于flux的單向流
- Update
Immutable的對象更新庫，和san-store配合進(jìn)行應(yīng)用狀態(tài)數(shù)據(jù)更新
總結(jié)
San是一個(gè)傳統(tǒng)意義上的MVVM框架，優(yōu)秀的兼容性提升了其使用價(jià)值，完善的周邊支持可共開發(fā)者選擇，如果你有類似的需求，當(dāng)然可以選擇它！
