当前位置: 首页 > 科技观察

百度开源的快速、便携、灵活的MVVM前端组件框架——San

时间:2023-03-19 21:41:16 科技观察

介绍了San,这是一个小型的MVVM组件框架。它的体积小(<15k),兼容性好,性能好,是笔者认为可以给大家介绍的原因之一,尤其是它的兼容性,依然兼容IE6。没见过兼容这么低版本IE的框架,所以还是很好用的,堪称是实现响应式用户界面的可靠可靠方案!QuickstartSan是开源的,大家可以去Github上找他,从Github上看,百度的维护还是很到位的。下面是官网的简单介绍,通过它可以快速了解:San使用declarativeHTML-likeviewtemplates,除了支持所有原生HTML语法特性外,还支持数据到视图的绑定指令,业务开发中最常用的分支、循环指令等,在保持良好可用性的基础上,框架完成基于字符串的模板解析,并构建视图层的节点关系树,通过高层快速生成UI视图-性能视图引擎。San中定义的数据会被封装,这样当数据发生有效变化时,San组件会得到通知。San组件依靠模板编译阶段生成的节点关系树来确定需要更改的最小视图,进而完成视图的异步更新,保证视图更新效率。varMyApp=san.defineComponent({template:'

Hello{{name}}!

',initData:function(){return{name:'San'};}});varmyApp=newMyApp();myApp.attach(document.body);可以看到,通常使用San会经过几个步骤:我们首先定义一个San组件,定义时指定组件的内容模板和初始数据。初始化组件对象让组件在相应的地方渲染额外提示:用JavaScript写HTML片段对维护不友好,我们可以通过WebPack、AMD插件、异步请求等方式来管理这里为了简单起见一起写的例子.从官方文档中,你可以大致了解San的工作原理和使用方法!相关特性San一共有九个特性,一起来看看:HTML模板声明式模板,写视图的时候,就像写普通的页面一样,更符合HTML开发者的习惯。数据驱动修改数据,视图引擎会根据绑定关系自动刷新视图,从而摆脱手动调用DOMAPI的繁琐和可能的遗漏。组件组件是数据、逻辑和视图的集合。通过组件,我们封装了独立的功能块,小到一个输入组合,大到一个页面。高性能视图通过修改数据,视图引擎可以直接刷新需要更改的视图区域,无需任何检测,性能更高。组件反向解决方案针对首屏时间进行了优化,服务器通常直接输出HTML。我们可以从现有元素中反向解析组件并构建绑定。体积小,小于15k(gzipped),不用担心页面下载负担。强迫症患者的福音。良好的兼容性通过方法修改数据的另一个好处是更好的浏览器兼容性。毕竟有时候我们产品的受众有点死板。在模块管理自由项目中,可以任意选择ESNextModule或AMD管理模块。当然如果你想使用全局变量也是支持的。引用方便支持多种引用方式:NPM、GitHub、下载、HTTP和HTTPSCDN,让开发和在线引用更方便。文档介绍官方提供了非常详细的文档,文档中包含示例,相当于教程。下面是最简单的San组件:一个.san文件,语法如下是一个San组件:文档大概就是这些,不再赘述。需要的话可以直接去官网查看:外设支持San提供相关外设提高生产力:DevTool提供类似Vue和React的基于Chrome扩展的开发者工具San-mui是一个san-frame-基于组件库的开发人员、设计人员和产品经理。遵循materialdesign规范,融入常用ui组件,助你快速建站,开源San-MUI来自百度EFE。Router支持hash和html5模板路由器。单页或同构的Web应用一般需要Store应用状态管理套件,类似于Flux的单向流。UpdateImmutable对象更新库配合san-store更新应用状态数据。总结San是一个传统的MVVM框架,优秀的兼容性提升了它的使用价值,完善的外设支持是开发者可以选择的,如果你有类似的需求,当然可以选择它!