前端框架 san 使用

最新推荐文章于 2024-05-11 09:45:02 发布

lefex

最新推荐文章于 2024-05-11 09:45:02 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351408

版权

前端的框架作用其实都是为了让你更快速、更好地完成前端开发，一个需求如果单纯使用 HTML、JS 需要几百行代码实现，而使用框架几行代码即可搞定。另外框架可以很好地做到模块化、组件化开发，以数据来渲染 UI，不需要通过繁琐的 API 来操作 DOM。san 是一个开源的MVVM前端框架，只有 15k 左右，它与 Vue 和 React 类似。

先看一个完整例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>第一个例子</title>    <script src="https://unpkg.com/san@latest"></script>    <!-- <script src="../san-sdk/src/main.js"></script> --></head><body>    <script>        var MyApp = san.defineComponent({
                 template: `<p>Hello {
     {name}}!</p>`,            initData: function() {
                     return {
                         name: 'lefe'                };            }        })        var app = new MyApp();        app.attach(document.body);</script></body></html>

上面的代码运行后，结果如下：

上面的例子中，通过数据来渲染 UI，当 name 值改变的时候 UI 将会自动改变。我们一起看看其它使用方式：

san 可以通过引用的方式（直接从线上获取代码）使用 san：

// 开发版本
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
// 线上版本
<script src="https://unpkg.com/san@latest"></script>

也可以通过本地引用来使用 san，通过 sudo npm install -g san 全局安装 san，复制一份到开发目录，这样方便看源码。看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>day1</title>
    // 必须要加入
    <script src="../san-sdk/dist/san.dev.js"></script>
</head>
 
<body>
    <script>
        var MyApp = san.defineComponent({
   
            template: '<p>Hello {
   {name}}!</p>',

            initData: function () {
   
                return {
   
                    name: 'San'
                };
            }
        });

        var myApp = new MyApp();
        myApp.attach(document.body);
    </script>
</body>

</html>