介紹

San，是一個小巧的MVVM組件框架，它小巧的體積（<15k）、優(yōu)秀的兼容性以及卓越的性能是筆者認(rèn)為可以介紹給大家的一個原因，特別是其兼容性，其仍然兼容IE6，目前還沒見過哪個框架兼容到這么低版本的IE，所以說還是很有使用價值的，可稱得上是一個可靠、可依賴的實(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ù)會被封裝，使得當(dāng)數(shù)據(jù)發(fā)生有效變更時通知 San 組件，San 組件依賴模板編譯階段生成的節(jié)點(diǎn)關(guān)系樹，確定需要變更的最小視圖，進(jìn)而完成視圖的異步更新，保證了視圖更新的高效性。

  
  
  

   
   
   
var MyApp = san.defineComponent({ 
   
   
   
 template: '
Hello {{name}}!
', 
   
   
   
 initData: function () { 
   
   
   
 return { 
   
   
   
 name: 'San' 
   
   
   
 }; 
   
   
   
 } 
   
   
   
}); 
   
   
   
var myApp = new MyApp(); 
   
   
   
myApp.attach(document.body); 
  
  
  

可以看到，通常情況使用 San 會經(jīng)過這么幾步：

1. 我們先定義了一個 San 的組件，在定義時指定了組件的 內(nèi)容模板 與 初始數(shù)據(jù) 。
2. 初始化組件對象
3. 讓組件在相應(yīng)的地方渲染

額外提示：在 JavaScript 中書寫 HTML 片段對維護(hù)來說是不友好的，我們可以通過 WebPack、AMD plugin、異步請求等方式管理。這里為了例子的簡單就寫在一起了。

從官方文檔可以大致了解了San是如何工作的，以及如何使用！

相關(guān)特性

San一共包含了九大特性，我們一起來了解下：

• HTML模板

聲明式的模板，在編寫視圖時就像是在寫一個普通的頁面，更符合 HTML 開發(fā)人員的習(xí)慣。

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

修改數(shù)據(jù)，視圖引擎會根據(jù)綁定關(guān)系自動刷新視圖，從此擺脫手工調(diào)用 DOM API 的繁瑣與可能的遺漏。

• 組件化

組件是數(shù)據(jù)、邏輯與視圖的聚合體。通過組件，我們封裝獨(dú)立的功能區(qū)塊，小到輸入組合，大到一個頁面。

• 高性能視圖

通過修改數(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ù)的另一好處是，可以獲得更好的瀏覽器兼容性。畢竟有時我們產(chǎn)品的受眾用戶有點(diǎn)死板。

• 模塊管理自由

項(xiàng)目中可以任意選擇 ESNext Module 或 AMD 管理模塊。當(dāng)然，如果你想要用全局變量也是支持的。

• 引用方便

支持多種引用方式：NPM、GitHub、下載、HTTP 與 HTTPS CDN，讓開發(fā)和線上引用更便利。

文檔簡介

官方提供了非常詳細(xì)的文檔，而且文檔中都帶有示例，也就相當(dāng)于是教程，下面是一個最簡單的San組件：

一個語法如下的 .san 文件，就是一個 San component：

文檔大致是這些，就不再詳細(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是一個傳統(tǒng)意義上的MVVM框架，優(yōu)秀的兼容性提升了其使用價值，完善的周邊支持可共開發(fā)者選擇，如果你有類似的需求，當(dāng)然可以選擇它！

網(wǎng)頁題目：百度開源的快速、可移植且靈活的MVVM前端組件框架——San
當(dāng)前地址：http://www.dlmjj.cn/article/dpphgco.html