百度開源的快速、可移植且靈活的MVVM前端組件框架——San

作者：最美分享Coder 2019-07-17 20:31:04

San，是一個小巧的MVVM組件框架，它小巧的體積（<15k）、優秀的兼容性以及卓越的性能是筆者認為可以介紹給大家的一個原因。

介紹

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

快速開始

San是開源的，大家可以到Github找到他，從Github來看，百度對其維護還是到位了的。

下面是一段官網的簡單介紹，可以通過這些來快速了解它：

San 通過聲明式的類 HTML 視圖模板，在支持所有原生 HTML 的語法特性外，還支持了數據到視圖的綁定指令、業務開發中最常使用的分支、循環指令等，在保持良好的易用性基礎上，由框架完成基于字符串的模板解析，并構建出視圖層的節點關系樹，通過高性能的視圖引擎快速生成 UI 視圖。San 中定義的數據會被封裝，使得當數據發生有效變更時通知 San 組件，San 組件依賴模板編譯階段生成的節點關系樹，確定需要變更的最小視圖，進而完成視圖的異步更新，保證了視圖更新的高效性。
var MyApp = san.defineComponent({ 
 template: '<p>Hello {{name}}!</p>', 
 initData: function () { 
 return { 
 name: 'San' 
 }; 
 } 
}); 
var myApp = new MyApp(); 
myApp.attach(document.body); 

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

我們先定義了一個 San 的組件，在定義時指定了組件的 內容模板 與 初始數據 。
初始化組件對象
讓組件在相應的地方渲染

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

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

文檔簡介

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

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

<template> 
 <div class="hello">hello {{msg}}</div> 
</template> 
<script> 
 export default { 
 initData () { 
 return { 
 msg: 'world' 
 }; 
 } 
 } 
</script> 
<style> 
 .hello { 
 color: blue; 
 } 
</style>