百度開源的快速、可移植且靈活的MVVM前端組件框架——San
介紹
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一共包含了九大特性，我們一起來了解下：
- HTML模板
聲明式的模板，在編寫視圖時就像是在寫一個普通的頁面，更符合 HTML 開發人員的習慣。
- 數據驅動
修改數據，視圖引擎會根據綁定關系自動刷新視圖，從此擺脫手工調用 DOM API 的繁瑣與可能的遺漏。
- 組件化
組件是數據、邏輯與視圖的聚合體。通過組件，我們封裝獨立的功能區塊，小到輸入組合，大到一個頁面。
- 高性能視圖
通過修改數據的方法，視圖引擎能夠直接刷新需要變更的視圖區域，無需進行任何檢測，性能更高。
- 組件反解
為首屏時間優化，服務端通常直接輸出HTML。我們能從現有的元素中反向解析出組件，并構建綁定關系。
- 體積小巧
小于15k (gzipped) 的體積，無需擔心對頁面下載帶來負擔。體積強迫癥患者的福音。
- 良好的兼容性
通過方法修改數據的另一好處是，可以獲得更好的瀏覽器兼容性。畢竟有時我們產品的受眾用戶有點死板。
- 模塊管理自由
項目中可以任意選擇 ESNext Module 或 AMD 管理模塊。當然，如果你想要用全局變量也是支持的。
- 引用方便
支持多種引用方式：NPM、GitHub、下載、HTTP 與 HTTPS CDN，讓開發和線上引用更便利。
文檔簡介
官方提供了非常詳細的文檔，而且文檔中都帶有示例，也就相當于是教程，下面是一個最簡單的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>
文檔大致是這些，就不再詳細的去看了，有需求的可以直接到官網查看：
周邊支持
San提供了提高生產力的相關周邊：
- DevTool
提供了類似于Vue和React的那種基于Chrome擴展的開發者工具
- San-mui
一套為開發者、設計師和產品經理準備的基于 san 框架的組件庫，遵循 material design 規范，融入了開發常用的ui組件，幫助你快速搭建網站，開源的 San-MUI 來自百度 EFE。
- Router
支持hash和html5模板的router。單頁面或同構的Web應用一般都需要它
- Store
應用狀態管理套件，理念類似于flux的單向流
- Update
Immutable的對象更新庫，和san-store配合進行應用狀態數據更新
總結
San是一個傳統意義上的MVVM框架，優秀的兼容性提升了其使用價值，完善的周邊支持可共開發者選擇，如果你有類似的需求，當然可以選擇它！
