SanMVVM 的組件框架
San 是一個(gè) MVVM 的組件框架。它體積小巧(12K)，兼容性好(IE6)，性能卓越，是一個(gè)可靠、可依賴的實(shí)現(xiàn)響應(yīng)式用戶界面的解決方案。
San 具有以下特性
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)而完成視圖的異步更新，保證了視圖更新的高效性。
組件是 San 的基本單位，是獨(dú)立的數(shù)據(jù)、邏輯、視圖的封裝單元。從頁面角度看，組件是 HTML 元素的擴(kuò)展；從功能模式角度看，組件是一個(gè) ViewModel。San 組件提供了完整的生命周期，與 WebComponent 的生命周期相符合，組件間是可嵌套的樹形關(guān)系，完整的支持了組件層級(jí)、組件間的通信，方便組件間的數(shù)據(jù)流轉(zhuǎn)。San 的組件機(jī)制，可以有效支撐業(yè)務(wù)開發(fā)上的組件化需求。
San 支持組件反解，以此提供服務(wù)端渲染能力，可以解決純前端渲染導(dǎo)致的響應(yīng)用戶交互時(shí)延長、SEO 問題。除此之外，San 還提供了一些周邊開源產(chǎn)品，與 San 配合使用，可以幫助開發(fā)者快速搭建可維護(hù)的大型 SPA 應(yīng)用。
現(xiàn)在，我們從一些簡單的例子，開始了解 San。這些例子可以從這里找到。
Hello
var MyApp = san.defineComponent({
template: '<p>Hello {{name}}!</p>',
initData: function () {
return {
name: 'San'
};
}
});
var myApp = new MyApp();
myApp.attach(document.body);
可以看到，通常情況實(shí)用 San 會(huì)經(jīng)過這么幾步：
-
我們先定義了一個(gè) San 的組件，在定義時(shí)指定了組件的 內(nèi)容模板 與 初始數(shù)據(jù) 。
-
初始化組件對(duì)象
-
讓組件在相應(yīng)的地方渲染
額外提示：在 JavaScript 中書寫 HTML 片段對(duì)維護(hù)來說是不友好的，我們可以通過 WebPack、AMD plugin、異步請(qǐng)求等方式管理。這里為了例子的簡單就寫在一起了。