MVVM框架 SAN.js（一）

    为什么想用san？它是百度EFE的作品，当前web有那么多框架，react vue，因为san具有潜力，具有很强的兼容性，兼容IE6，体积特别小（12kb），性能卓越，现在我们首先熟悉一下MVVM。

MVVM

是一种分层架构。它的分层如下：

• Model: 域模型，用于持久化

• View: 作为视图模板存在

• ViewModel: 作为视图的模型，为视图服务

MVVM框架的工作

• 视图引擎

视图引擎：我是视图引擎，我为 View 层作为视图模板提供强力支持，开发者，你们不需要操作 DOM ，丢给我来做！

• 数据存取器

数据存取器：我是数据存取器，我可以通过 Object.defineProperty() API 轻松定义，或通过自行封装存取函数的方式曲线完成。我的内部往往封装了 发布/订阅模式，以此来完成对数据的监听、数据变更时通知更新。我是 数据绑定 实现的基础。

• 组件机制

组件机制：我是组件机制。有追求的开发者往往希望按照面向未来的组件标准 － Web Components 的方式开发，我是为了满足你的追求而生。MVVM 框架提供组件的定义、继承、生命周期、组件间通信机制，为开发者面向未来开发点亮明灯。

• more…

SAN

诞生于百度EFE

San，是一个 MVVM 的组件框架。它体积小巧（12.6K），兼容性好（IE6），性能卓越，是一个可靠、可依赖的实现响应式用户界面的解决方案。

San 通过声明式的类 HTML 视图模板，在支持所有原生 HTML 的语法特性外，还支持了数据到视图的绑定指令、业务开发中最常使用的分支、循环指令等，在保持良好的易用性基础上，由框架完成基于字符串的模板解析，并构建出视图层的 节点关系树，通过高性能的视图引擎快速生成 UI 视图。San 中定义的数据会被封装，使得当数据发生有效变更时通知 San 组件，San 组件依赖模板编译阶段生成的节点关系树，确定需要变更的最小视图，进而完成视图的异步更新，保证了视图更新的高效性。

下面是一个san的例子

DOCTYPE html >

< html >

< head >

< meta charset= "utf-8" >

< title >start - hello title >

head >

< body >

< script src= "./san.dev.js" > < / script >

< script >

var MyApp = san. defineComponent({

template: '

Hello {{name}}! do not eat {{clear}}

',

initData : function () {

return {

name: 'San',

clear: 'shit'

};

}

});

var myApp = new MyApp();

myApp. attach( document. body);

< / script >

body >

html >

浏览器渲染： hello san do not eat shit