|
|
51CTO旗下网站
|
|
移动端

百度开源的快速、可移植且灵活的MVVM前端组件框架——San

San,是一个小巧的MVVM组件框架,它小巧的体积(<15k)、优秀的兼容性以及卓越的性能是笔者认为可以介绍给大家的一个原因。

作者:最美分享Coder来源:头条科技|2019-07-17 20:31

介绍

San,是一个小巧的MVVM组件框架,它小巧的体积(<15k)、优秀的兼容性以及卓越的性能是笔者认为可以介绍给大家的一个原因,特别是其兼容性,其仍然兼容IE6,目前还没见过哪个框架兼容到这么低版本的IE,所以说还是很有使用价值的,可称得上是一个可靠、可依赖的实现响应式用户界面的解决方案!

百度开源的快速、可移植且灵活的MVVM前端组件框架——San

快速开始

San是开源的,大家可以到Github找到他,从Github来看,百度对其维护还是到位了的。

百度开源的快速、可移植且灵活的MVVM前端组件框架——San

下面是一段官网的简单介绍,可以通过这些来快速了解它:

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

  1. var MyApp = san.defineComponent({ 
  2.  template: '<p>Hello {{name}}!</p>'
  3.  initData: function () { 
  4.  return { 
  5.  name: 'San' 
  6.  }; 
  7.  } 
  8. }); 
  9. var myApp = new MyApp(); 
  10. myApp.attach(document.body); 

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

  1. 我们先定义了一个 San 的组件,在定义时指定了组件的 内容模板 与 初始数据 。
  2. 初始化组件对象
  3. 让组件在相应的地方渲染

额外提示:在 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:

  1. <template> 
  2.  <div class="hello">hello {{msg}}</div> 
  3. </template> 
  4. <script> 
  5.  export default { 
  6.  initData () { 
  7.  return { 
  8.  msg: 'world' 
  9.  }; 
  10.  } 
  11.  } 
  12. </script> 
  13. <style> 
  14.  .hello { 
  15.  color: blue; 
  16.  } 
  17. </style> 

文档大致是这些,就不再详细的去看了,有需求的可以直接到官网查看:

百度开源的快速、可移植且灵活的MVVM前端组件框架——San

周边支持

San提供了提高生产力的相关周边:百度开源的快速、可移植且灵活的MVVM前端组件框架——San

  • DevTool

提供了类似于Vue和React的那种基于Chrome扩展的开发者工具

百度开源的快速、可移植且灵活的MVVM前端组件框架——San
  • San-mui

一套为开发者、设计师和产品经理准备的基于 san 框架的组件库,遵循 material design 规范,融入了开发常用的ui组件,帮助你快速搭建网站,开源的 San-MUI 来自百度 EFE。

百度开源的快速、可移植且灵活的MVVM前端组件框架——San

百度开源的快速、可移植且灵活的MVVM前端组件框架——San
  • Router

支持hash和html5模板的router。单页面或同构的Web应用一般都需要它

  • Store

应用状态管理套件,理念类似于flux的单向流

  • Update

Immutable的对象更新库,和san-store配合进行应用状态数据更新

总结

San是一个传统意义上的MVVM框架,优秀的兼容性提升了其使用价值,完善的周边支持可共开发者选择,如果你有类似的需求,当然可以选择它!

【编辑推荐】

  1. 视频PS神器!人物隐身、水印去除,这项登上CVPR的研究刚刚开源了
  2. 醒醒吧!又一个程序员在东南亚出事了_技术栈微信半月刊第45期
  3. 技术人具备“结构化思维”意味着什么?
  4. Uber 开源研究对话系统 Plato,用于开发和训练会话 AI
  5. PYPL 7 月榜单公布:Java 份额出现下降趋势
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

302人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

650人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Microsoft SQL Server 2005 技术内幕:T-SQL查询

本书是Inside Microsoft SQL Server 2005系列四本著作中的一本。它详细介绍了T-SQL的内部构造,包含了非常全面的编程参考。它提供了使用Tra...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客