为什么想用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: '<p>Hello {{name}}! do not eat {{clear}}</p>',
initData : function () {
return {
name: 'San',
clear: 'shit'
};
}
});
var myApp = new MyApp();
myApp. attach( document. body);
< / script >
</ body >
</ html >


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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue