San MVVM 框架 学习笔记

San 是百度开源的一个MVVM框架，兼容IE6，API文档地址：https://baidu.github.io/san/doc/api/

San的生命周期：

• compiled - 组件视图模板编译完成
• inited - 组件实例初始化完成
• created - 组件元素创建完成
• attached - 组件已被附加到页面中
• updated - 组件数据更新
• detached - 组件从页面中移除
• disposed - 组件卸载完成

 San组件的写法：

Header.html

<div class="layui-layout layui-layout-admin" layadmin-themealias="ocean">
    <ui-header s-ref="header" menus="{{menus}}"></ui-header>
    <div class="home-main" >
        <div class="absolute layui-tab layui-tab-card home-tabs" lay-filter="homeMenu">

            <ul class="layui-tab-title layui-tab-title-draw">
                <!--li>示例</li-->
            </ul>
            <div class="layui-tab-content layui-tab-content-draw" >
                <!--div class="layui-tab-item">示例</div-->
            </div>
        </div>
    </div>
</div>

Header.js部分

define(function (require) {
    var san = require('san');
    var req = require('requests');
    // 引入htm
    var template = require('./lib/tpl!./components/Header.html');
    var msgNotify = require('msgNotify');
    var _this = null;
    return san.defineComponent({
        template: template,
        initData:function(){
            return{
                menus:[],
                currentMenu:null,
            };
        },
　　　　　// 组件已挂载完成
        attached: function () {
            _this = this;
            layui.use('element', function(){
                var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
                
                //监听导航点击
                element.on('nav(demo)', function(elem){
                    layer.msg(elem.text());
                });
            });
        },
　　　　　// 事件
        onMenuClick:function(menu){
            if(menu.component){
                // 组件传值：子组件传值给父组件
                this.dispatch('header:menu-click',menu);
            }
        },
        logout:function () {
            req.get(BASE+"logout",null,function (res) {
                if(res.status){
                    layer.msg("注销成功")
                    setTimeout(function () {
                        window.location.href= BASE+"login.html"
                    },500);
                }else{
                    layer.msg("注销失败")
                }
            });
        },
        about:function () {
            layer.open({
                title:"关于",
                shadeClose: true, //开启遮罩关闭
                btn:[],
                content:'<div align="center">license:HBYP20170086</div>'
            });
        }

    })
})
    

　San父子组件交互

　　父组件

　　

// html
<ui-header s-ref="header" menus="{{menus}}"></ui-header>

// js部分
// 组件  
var Header = require('Header');
return san.defineComponent({
        template: template,
        dropListeners: {},
        initData: function () {
            return {
               
            };
        },
　　　　// 父引入的组件
        components: {
            'ui-header': Header,
    
        },
        messages: {
            'header:menu-click': function (arg) {
                var menu = arg.value;
                this.switchMenuTab(menu);
            },           
        },       
    });

子组件

  onMenuClick:function(menu){
            if(menu.component){
                // 组件传值：子组件传值给父组件
                this.dispatch('header:menu-click',menu);
            }
        },