先容

San，是一个小巧的MVVM组件框架，它小巧的体积（<15k）、优越的兼容性以及卓越的机能是笔者以为可以先容给各人的一个缘故起因，出格是其兼容性，其如故兼容IE6，今朝还没见过哪个框架兼容到这么低版本的IE，以是嗣魅照旧很有行使代价的，可称得上是一个靠得住、可依靠的实现相应式用户界面的办理方案！

快速开始

San是开源的，各人可以到Github找到他，从Github来看，百度对其维护照旧到位了的

下面是一段官网的简朴先容，可以通过这些来快速相识它：

San 通过声明式的类 HTML 视图模板，在支持全部原生 HTML 的语法特征外，还支持了数据到视图的绑定指令、营业开拓中最常行使的分支、轮回指令等，在保持精采的易用性基本上，由框架完成基于字符串的模板理会，并构建出视图层的 节点相关树，通过高机能的视图引擎快速天生 UI 视图。San 中界说的数据会被封装，使适合数据产生有用改观时关照 San 组件，San 组件依靠模板编译阶段天生的节点相关树，确定必要改观的最小视图，进而完成视图的异步更新，担保了视图更新的高效性。

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、异步哀求等方法打点。这里为了例子的简朴就写在一路了。

从官方文档可以大抵相识了San是怎样事变的，以及怎样行使！

相干特征

San一共包括了九大特征，我们一路来相识下：

• HTML模板

声明式的模板，在编写视图时就像是在写一个平凡的页面，更切合 HTML 开拓职员的风俗。

• 数据驱动

修改数据，视图引擎会按照绑定相关自动革新视图，以后挣出手工挪用 DOM API 的繁琐与也许的漏掉。

• 组件化

组件是数据、逻辑与视图的聚合体。通过组件，我们封装独立的成果区块，小到输入组合，大到一个页面。

• 高机能视图

通过修改数据的要领，视图引擎可以或许直接革新必要改观的视图地区，无需举办任何检测，机能更高。

• 组件反解

为首屏时刻优化，处事端凡是直接输出HTML。我们能从现有的元素中反向理会出组件，并构建绑定相关。

• 体积小巧

小于15k (gzipped) 的体积，无需担忧对页面下载带来承担。体积强制症患者的福音。

• 精采的兼容性

通过要领修改数据的另一甜头是，可以得到更好的赏识器兼容性。事实偶然我们产物的受众用户有点古板。

• 模块打点自由

项目中可以恣意选择 ESNext Module 或 AMD 打点模块。虽然，假如你想要用全局变量也是支持的。

• 引用利便

支持多种引用方法：NPM、GitHub、下载、HTTP 与 HTTPS CDN，闪开拓和线上引用更便利。

文档简介

官方提供了很是具体的文档，并且文档中都带有示例，也就相等于是教程，下面是一个最简朴的San组件：

一个语法如下的 .san 文件，就是一个 San component：

<template> 
 <div class="hello">hello {{msg}}</div> 
</template> 
<script> 
 export default { 
 initData () { 
 return { 
 msg: 'world' 
 }; 
 } 
 } 
</script> 
<style> 
 .hello { 
 color: blue; 
 } 
</style> 

文档大抵是这些，就不再具体的去看了，有需求的可以直接到官网查察：

周边支持

San提供了提跨越产力的相干周边：

• DevTool

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!