Skip to content

Commit

Permalink
deploy san website
Browse files Browse the repository at this point in the history
  • Loading branch information
@errorrik
errorrik committed Apr 11, 2024
1 parent c27e934 commit 021f483
Show file tree
Hide file tree
Showing 228 changed files with 62,918 additions and 0 deletions.
339 changes: 339 additions & 0 deletions archives/2024/04/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,339 @@

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="San - A Flexible JavaScript Component Framework">
<meta name="keywords" content="San,JavaScript,Framework,MVVM,Component,Web">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="../../../img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="../../../img/icons/icon-144x144.png">

<title>Archives: 2024/4 | San</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="A Flexible JavaScript Component Framework">
<meta property="og:type" content="website">
<meta property="og:title" content="San">
<meta property="og:url" content="http://baidu.github.io/archives/2024/04/index.html">
<meta property="og:site_name" content="San">
<meta property="og:description" content="A Flexible JavaScript Component Framework">
<meta property="og:locale">
<meta property="article:author" content="errorrik">
<meta name="twitter:card" content="summary">

<link rel="alternate" href="/atom.xml" title="San" type="application/atom+xml">


<link rel="icon" href="/favicon.png">

<link rel="manifest" href="../../../manifest.json">


<link rel="stylesheet" href="../../../css/font-awesome.min.css">


<link rel="stylesheet" href="../../../css/bootstrap.min.css">


<link rel="stylesheet" href="../../../css/style.css">


<link rel="stylesheet" href="../../../css/site.css">


<link rel="stylesheet" href="../../../css/article.css">


<link rel="stylesheet" href="../../../css/code.css">


<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3fd0e328e9b2f9b1af04ac25c143093f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

<!-- search -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />


<meta name="generator" content="Hexo 7.0.0"></head>



<body id="home">
<div class="overlay">
<img height="220" src="../../../img/logo-colorful.svg" class="logo" alt="LOGO" title="San">
<h1>San</h1>
<iframe src="https://ghbtns.com/github-btn.html?user=baidu&repo=san&type=star&count=true&size=large" class="home-iframe"></iframe>
<p class="overlay-p">一个快速、轻量、灵活的 JavaScript 组件框架</p>
<a href="../../../tutorial/start/" class="get-start">快速开始</a>
<a class="discussion" style="background:url(../../../img/discussion.svg) no-repeat 50% 50% / contain" href="https://github.com/baidu/san/discussions" target="_blank" title="讨论"></a>
</div>

<!-- NavBar-->
<nav class="navbar-default" role="navigation">
<div class="navbar-container">
<a href="#home" class="nav-logo"><img src="../../../img/logo2.png"></a>
<a class="nav-a1" href="#Features">特性</a>
<a class="nav-a2" href="#Resources">资料</a>
<a class="nav-a3" href="#Facilities">周边</a>
<a class="nav-lang" href="../../../en/archives/2024/04/index.html">EN</a>
</div>
</nav>

<!-- 公众号文章 -->
<div class="article-container" data-src="../../../data/article.json">
<a class="article-text-wrapper">
<span class="article-text"></span>
</a>
</div>

<!-- feature-->
<div class="feature-container" id="Features">
<section class="feature feature-en">

<div class="feature-row">
<div class="feature-item">
<img src="../../../img/8.svg" width="44" height="44">
<h5>HTML模版</h5>
<p>声明式的模板，在编写视图时就像是在写一个普通的页面，更符合 HTML 开发人员的习惯。</p>
</div>
<div class="feature-item">
<img src="../../../img/1.svg" width="44" height="44">
<h5>数据驱动</h5>
<p>修改数据，视图引擎会根据绑定关系自动刷新视图，从此摆脱手工调用 DOM API 的繁琐与可能的遗漏。</p>
</div>
<div class="feature-item">
<img src="../../../img/2.svg" width="44" height="44">
<h5>组件化</h5>
<p>组件是数据、逻辑与视图的聚合体。通过组件，我们封装独立的功能区块，小到输入组合，大到一个页面。</p>
</div>
</div>

<div class="feature-row">
<div class="feature-item">
<img src="../../../img/3.svg" width="44" height="44">
<h5>高性能视图</h5>
<p>通过修改数据的方法，视图引擎能够直接刷新需要变更的视图区域，无需进行任何检测，性能更高。</p>
</div>
<div class="feature-item">
<img src="../../../img/5.svg" width="44" height="44">
<h5>组件反解</h5>
<p>为首屏时间优化，服务端通常直接输出HTML。我们能从现有的元素中反向解析出组件，并构建绑定关系。</p>
</div>
<div class="feature-item">
<img src="../../../img/4.svg" width="44" height="44">
<h5>体积小巧</h5>
<p>小于17k (gzipped) 的体积，无需担心对页面下载带来负担。体积强迫症患者的福音。</p>
</div>
</div>

<div class="feature-row">
<div class="feature-item">
<img src="../../../img/9.svg" width="44" height="44">
<h5>良好的兼容性</h5>
<p>通过方法修改数据的另一好处是，可以获得更好的浏览器兼容性。毕竟有时我们产品的受众用户有点死板。</p>
</div>
<div class="feature-item">
<img src="../../../img/6.svg" width="44" height="44">
<h5>模块管理自由</h5>
<p>项目中可以任意选择 ESNext Module 或 AMD 管理模块。当然，如果你想要用全局变量也是支持的。</p>
</div>
<div class="feature-item">
<img src="../../../img/7.svg" width="44" height="44">
<h5>引用方便</h5>
<p>支持多种引用方式：NPM、GitHub、下载、HTTP 与 HTTPS CDN，让开发和线上引用更便利。</p>
</div>
</div>
</section>
</div>

<!--Resources -->
<section id ="Resources" class="resource">
<hr>
<div class="resource-title">
<h4>资料</h4>
<p>这里有一些教程、文档或示例，可以帮助你学习和了解 San</p>
</div>

<div class="resource-row">
<div class="resource-block">
<a class="resource-item" href="../../../tutorial/start/">
<div class="resource-item-top resource-item-top-one">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/tutor.json"></div>
</div>
<div class="resource-item-bottom">
<h5>教程</h5>
<p>教程是入门的捷径，请从这里开始了解San。</p>
</div>
</a>
</div>

<div class="resource-block" href="/san/layout/">
<a class="resource-item" href="../../../practice/">
<div class="resource-item-top resource-item-top-two">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/compass.json"></div>
</div>
<div class="resource-item-bottom">
<h5>指南</h5>
<p>我们正在编写指南手册，以指导各种应用场景下怎么使用San。</p>
</div>
</a>
</div>

<div class="resource-block">
<a class="resource-item" href="../../../example/">
<div class="resource-item-top resource-item-top-three">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/example.json"></div>
</div>
<div class="resource-item-bottom">
<h5>示例</h5>
<p>这里展示了一些简单例子，以及在实际项目如何使用San。</p>
</div>
</a>
</div>

<div class="resource-block">
<a class="resource-item" href="../../../doc/api/">
<div class="resource-item-top resource-item-top-four">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/api.json"></div>
</div>
<div class="resource-item-bottom">
<h5>组件 API</h5>
<p>当你想不起来组件的接口时，请查阅这里。</p>
</div>
</a>
</div>
</div>
</section>


<!-- facilities -->

<section class="facility" id="Facilities">
<hr>
<div class="facility-title">
<h4>周边</h4>
<p>一些工具和库能够帮助你更快、更便捷地搭建自己的应用</p>
</div>


<div class="banner-md"><a href="https://ecomfe.github.io/santd/" target="_blank"><img
src="../../../img/banner-santd.png" alt="santd" style="width: 100%; max-width: 1160px"></a></div>
<div class="facility-row">

<div class="facility-block">
<div class="facility-item">
<div class="facility-item-top facility-item-top-one">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/test.json"></div>
</div>
<a class="facility-item-bottom" href="https://github.com/baidu/san-router" target="_blank">
<h5>Router</h5>
<p>支持hash和html5模式的router，单页或同构的Web应用通常需要它。</p>
</a>
<a class="facility-item-bottom" href="https://baidu.github.io/san-ssr/" target="_blank">
<h5>SSR</h5>
<p>服务端渲染框架与工具库。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/baidu/san-factory" target="_blank">
<h5>Factory</h5>
<p>组件工厂能帮助你在不同环境下更灵活的装配组件。</p>
</a>
</div>
</div>

<div class="facility-block">
<div class="facility-item facility-item-unready">
<div class="facility-item-top facility-item-top-two">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/store.json"></div>
</div>
<a class="facility-item-bottom" href="https://github.com/baidu/san-store" target="_blank">
<h5>Store</h5>
<p>应用状态管理套件，其理念是类似flux的单向流。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/baidu/san-update" target="_blank">
<h5>Update</h5>
<p>Immutable的对象更新库，和san-store配合进行应用状态数据更新。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/baidu/san-composition" target="_blank">
<h5>Composition</h5>
<p>支持按功能定义相应的数据、方法、生命周期运行逻辑。</p>
</a>
</div>
</div>

<div class="facility-block">
<div class="facility-item">
<div class="facility-item-top facility-item-top-three">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/dev.json"></div>
</div>
<a class="facility-item-bottom" href="https://github.com/ecomfe/san-cli" target="_blank">
<h5>CLI</h5>
<p>帮助你快速搭建San应用的命令行工具。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/ecomfe/san-loader" target="_blank">
<h5>Loader</h5>
<p>San 单文件组件的 Webpack loader。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/baidu/san-devtools" target="_blank">
<h5>DevTools</h5>
<p>基于Chrome扩展的开发者工具。</p>
</a>
</div>
</div>

<div class="facility-block">
<div class="facility-item">
<div class="facility-item-top facility-item-top-four">
<div style="width:130px;height:130px;display:inline-block;" class="bodymovin" data-movpath="../../../js/update.json"></div>
</div>
<a class="facility-item-bottom" href="https://github.com/ecomfe/san-test-utils" target="_blank">
<h5>TestUtils</h5>
<p>San的单元测试实用工具库。</p>
</a>
<a class="facility-item-bottom" href="https://github.com/ecomfe/san-anode-utils" target="_blank">
<h5>ANodeUtils</h5>
<p>一些工具方法能够帮助你处理ANode.</p>
</a>
<a class="facility-item-bottom" href="https://github.com/searchfe/sanny" target="_blank">
<h5>Sanny</h5>
<p>VSCode插件。</p>
</a>
</div>
</div>
</div>
<div class="banner-md"><a href="https://ecomfe.github.io/san-mui/" target="_blank"><img
src="../../../img/banner-md.png" alt="san-mui" style="width: 100%; max-width: 1160px"></a></div>
</section>
<img src="../../../img/san-perf.png" class="san-perf">
<footer id="More">

<div class="copyright">
&copy; 2023 <a target="_blank" href="http://ecomfe.github.io/">Baidu EFE</a>
</div>
</footer>



<!-- JavaScript -->
<script src="../../../js/jquery-1.10.2.js"></script>
<script src="../../../js/script.js"></script>
<script src="../../../js/bodymovin.min.js"></script>
<script src="../../../js/anime.js"></script>
<!-- StikyMenu -->
<script src="../../../js/stickUp.min.js"></script>

<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
$('.navbar-default').stickUp();
});
});
</script>
</body>
</html>
Loading

0 comments on commit 021f483

Please sign in to comment.