介紹

San，是一個(gè)小巧的MVVM組件框架，它小巧的體積（<15k）、優(yōu)秀的兼容性以及卓越的性能是筆者認(rèn)為可以介紹給大家的一個(gè)原因，特別是其兼容性，其仍然兼容IE6，目前還沒(méi)見過(guò)哪個(gè)框架兼容到這么低版本的IE，所以說(shuō)還是很有使用價(jià)值的，可稱得上是一個(gè)可靠、可依賴的實(shí)現(xiàn)響應(yīng)式用戶界面的解決方案！

快速開始

San是開源的，大家可以到Github找到他，從Github來(lái)看，百度對(duì)其維護(hù)還是到位了的。

下面是一段官網(wǎng)的簡(jiǎn)單介紹，可以通過(guò)這些來(lái)快速了解它：

San 通過(guò)聲明式的類 HTML 視圖模板，在支持所有原生 HTML 的語(yǔ)法特性外，還支持了數(shù)據(jù)到視圖的綁定指令、業(yè)務(wù)開發(fā)中最常使用的分支、循環(huán)指令等，在保持良好的易用性基礎(chǔ)上，由框架完成基于字符串的模板解析，并構(gòu)建出視圖層的節(jié)點(diǎn)關(guān)系樹，通過(guò)高性能的視圖引擎快速生成 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: 'Hello {{name}}!
', 
   
   
    initData: function () { 
   
   
    return { 
   
   
    name: 'San' 
   
   
    }; 
   
   
    } 
   
   
   }); 
   
   
   var myApp = new MyApp(); 
   
   
   myApp.attach(document.body); 
  
  
  

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

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

額外提示：在 JavaScript 中書寫 HTML 片段對(duì)維護(hù)來(lái)說(shuō)是不友好的，我們可以通過(guò) WebPack、AMD plugin、異步請(qǐng)求等方式管理。這里為了例子的簡(jiǎn)單就寫在一起了。

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

文檔簡(jiǎn)介

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

一個(gè)語(yǔ)法如下的 .san 文件，就是一個(gè) 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 框架的組件庫(kù)，遵循 material design 規(guī)范，融入了開發(fā)常用的ui組件，幫助你快速搭建網(wǎng)站，開源的 San-MUI 來(lái)自百度 EFE。

Router

支持hash和html5模板的router。單頁(yè)面或同構(gòu)的Web應(yīng)用一般都需要它

Store

應(yīng)用狀態(tài)管理套件，理念類似于flux的單向流

Update

Immutable的對(duì)象更新庫(kù)，和san-store配合進(jìn)行應(yīng)用狀態(tài)數(shù)據(jù)更新

總結(jié)

San是一個(gè)傳統(tǒng)意義上的MVVM框架，優(yōu)秀的兼容性提升了其使用價(jià)值，完善的周邊支持可共開發(fā)者選擇，如果你有類似的需求，當(dāng)然可以選擇它！

網(wǎng)頁(yè)標(biāo)題：百度開源的快速、可移植且靈活的MVVM前端組件框架——San
分享網(wǎng)址：http://m.fisionsoft.com.cn/article/dpphgco.html

新聞中心

介紹

快速開始

相關(guān)特性

文檔簡(jiǎn)介

周邊支持

總結(jié)

其他資訊