MVVM 的组件框架 San

San MVVM 的组件框架

MIT
跨平台
百度
2018-01-16
局长

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

San 具有以下特性

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

组件是 San 的基本单位,是独立的数据、逻辑、视图的封装单元。从页面角度看,组件是 HTML 元素的扩展;从功能模式角度看,组件是一个 ViewModel。San 组件提供了完整的生命周期,与 WebComponent 的生命周期相符合,组件间是可嵌套的树形关系,完整的支持了组件层级、组件间的通信,方便组件间的数据流转。San 的组件机制,可以有效支撑业务开发上的组件化需求。

San 支持组件反解,以此提供服务端渲染能力,可以解决纯前端渲染导致的响应用户交互时延长、SEO 问题。除此之外,San 还提供了一些周边开源产品,与 San 配合使用,可以帮助开发者快速搭建可维护的大型 SPA 应用。

现在,我们从一些简单的例子,开始了解 San。这些例子可以从这里找到。

Hello

var MyApp = san.defineComponent({
    template: '<p>Hello {{name}}!</p>',
    initData: function () {
        return {
            name: 'San'
        };
    }
});
var myApp = new MyApp();
myApp.attach(document.body);

可以看到,通常情况实用 San 会经过这么几步:

  1. 我们先定义了一个 San 的组件,在定义时指定了组件的 内容模板 与 初始数据 。

  2. 初始化组件对象

  3. 让组件在相应的地方渲染

额外提示:在 JavaScript 中书写 HTML 片段对维护来说是不友好的,我们可以通过 WebPack、AMD plugin、异步请求等方式管理。这里为了例子的简单就写在一起了。

加载中

评论(13)

alexsun123
alexsun123
重复造轮子?
帅人
帅人
有人用吗?
无聊的人啊
无聊的人啊
对,完全8和一下没必要的垃圾
Skyogo
Skyogo
没有layer好?
霏微
霏微
我们一概不考虑IE等兼容性问题,坏笑
aiplat点com
aiplat点com
react可以兼容ie8,https://github.com/womendi/react-app-ie8
AlloHa
AlloHa
性能没优势,开发效率没优势,就一个兼容性,没意思。
吾字天河
吾字天河
不知道 强大之处在哪里 需要实际测试使用一下
wk_9999
wk_9999
感觉vue好重,不知道这个咋样?能直接上手玩么,还需要webpack和webstorm么?
W
WO不吹牛
San 是一个 MVVM 的组件框架。它体积小巧(12K),兼容性好(IE6),性能卓越... 数据存取器:我是数据存取器,我可以通过 Object.defineProperty() API 轻松定义... san,在保持功能强大、特性支持完整的前提下,还兼顾到IE8的市场份额... ------------ 文档能不能统一说清楚一下呢,不至于一开始就要翻源码。

San 3.6.14 发布,百度开源的 MVVM 组件框架

San 3.6.14 发布了,本次更新内容包括引入功能优化和 bug 修复,具体如下: 【优化】- 对空元素的组件反解时运行报错的场景,进行健壮性增强 【bug修复】- parseTemplate 处理包含标签起始特...

10/25 06:52

San 3.6.11 发布,百度开源的 MVVM 组件框架

San 3.6.11 发布了,此次更新内容如下: 【新特性】- 支持 call 表达式 【新特性】- defineComponent 方法增加 SuperComponent 参数,可以声明父组件 【优化】- 删除 ForNode 一些遗留代码,...

10/15 07:02

San 3.6.10 发布,百度开源的 MVVM 组件框架

San 3.6.10 已发布,此次更新内容如下: 【优化】- 对 polyfill 侵入 Object prototype 的环境进行判断处理 【优化】- 组件数据绑定将 kabab 转换成 camel 形式时,兼容原名称包含大写字母 ...

10/02 07:38

San 3.6.8 发布,百度开源的 MVVM 组件框架

San 3.6.8 发布了,此次更新内容如下: 【优化】- 将 button 归为动态创建元素,兼容 ie8- 下 type 属性无法动态变更 【优化】- disabled / readonly 等表单 bool 属性用于普通元素时,原样保...

09/15 08:22

San 3.6.7 发布,百度开源的 MVVM 组件框架

San 3.6.7 已发布,本次更新内容如下: 【bug修复】- ACCESSOR 表达式中,若子项为非 ACCESSOR 的复杂表达式,数据变化时视图可能不会刷新 San 是一个 MVVM 的组件框架。它体积小巧(12K),兼...

08/29 07:24

San 3.6.6 发布,百度开源的 MVVM 组件框架

San 3.6.5 已发布,本次更新内容如下: 【新特性】- 一元表达式支持 - 操作符 【优化】- 对 parseText 中用到的正则对象进行缓存,避免每次动态生成 【bug修复】- 遍历数组中,使用 list[ind...

08/14 07:34

MVVM 组件框架 San 3.6.5 发布,包含功能优化

San 3.6.5 已发布,本次更新内容包括引入功能优化和 bug 修复,具体如下: 【优化】- 对表达式解析过程中调用表达式的支持进行了优化 【bug修复】- 动态创建的子组件被添加到 children 时,数...

08/03 06:29

San 3.6.3 发布,百度开源的 MVVM 组件框架

San 3.6.3 已发布,这是一个 bug 修复版本,解决 forgienObject 等带有大写字母的 svg 标签渲染错误的问题。 San 是百度开源的一个 MVVM 的组件框架。它体积小巧(12.6K),兼容性好(IE6),...

07/18 07:06

MVVM 组件框架 San 3.6.2 发布,包含新特性和修复

San 3.6.2 已发布,本次更新内容包括引入新特性和 bug 修复,具体如下: 【新特性】- for 指令支持对象的遍历 【bug修复】- input type 为动态值时,双向绑定行为失效 San 是一个 MVVM 的组件...

07/03 06:59

San 3.6.1 发布,百度开源的 MVVM 组件框架

San 3.6.1 已发布,更新内容如下: 【新特性】- for 指令支持对 array literal 进行遍历 【新特性】- for 指令支持 trackBy 【优化】- 支持换行作为空白字符的表达式解析 San 是百度开源的一...

06/22 07:33

没有更多内容

加载失败,请刷新页面

暂无问答

MMVM模式

MVVM MVVM 是 Model-View-ViewModel 的简写,MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model) MVC 回顾 MVC 存在的问题 模型的代码很少 控制器的代码一不小心就越来越...

2015/12/08 21:46
11
0
MVVM 介绍

MVVM 介绍

2016/01/13 10:04
24
1
MVVM介绍

我于 2011 年在 500px 找到自己的第一份 iOS 开发工作。虽然我已经在大学里做了好几年 iOS 外包开发,但这才是我的一个真正的 iOS 开发工作。我被作为唯一的 iOS 开发者被招聘去实现拥有漂亮...

2016/06/28 11:25
113
1
写给iOS小白的MVVM教程(序)

这几天,需要重构下部分代码,这里简要记录下.但是涉及的技术要点还是很多,所以分为多个篇章叙述.此教程来源于,并将于应用于实践,不做过多的概念性阐释和争论.每个篇章都会附上实际的可执行的代...

2015/10/13 18:49
148
0
ReactiveCocoa & MVVM 学习总结二

ReactiveCocoa & MVVM 学习总结

2015/09/23 16:51
155
0
面试之路(3)-详解MVC,MVP,MVVM

一:mvc mvc结构: 视图(View):用户界面。 控制器(Controller):业务逻辑 模型(Model):数据保存 mvc各部分的通信方式 mvc互动模式 通过 View 接受指令,传递给 Controller。 另一种是...

2016/11/09 09:16
20
0
WPF企业内训全程实录(中)

摘要   WPF企业内训全程实录由于文章比较长,所以一共拆分成了三篇,上篇WPF企业内训全程实录(上)主要讲了基础,这篇作为该实录的中篇,起着承上启下的作用,主要讲解开发模式、团队协作及...

2014/08/07 13:49
55
0
WPF企业内训全程实录(中)

摘要 WPF企业内训全程实录由于文章比较长,所以一共拆分成了三篇,上篇WPF企业内训全程实录(上)主要讲了基础,这篇作为该实录的中篇,起着承上启下的作用,主要讲解开发模式、团队协作及应用...

2012/03/09 13:27
71
0
WPF企业内训全程实录(中)

摘要 WPF企业内训全程实录由于文章比较长,所以一共拆分成了三篇,上篇WPF企业内训全程实录(上)主要讲了基础,这篇作为该实录的中篇,起着承上启下的作用,主要讲解开发模式、团队协作及应用...

2012/03/09 13:26
78
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部