30. mvc(一)

什么是设计模式?

当代码有许多重复之处, 就需要重构, 形成好的代码.

把自己写的好的代码抽象,总结和归纳成好的模板就是设计模式

什么是mvc

mvc是一种设计模式. 具体来说:

• M: model 数据模型
• V: View: 负责所有UI界面
• C: Controller : 控制其他 , 例如业务逻辑,

但是mvc没有明确定义, 但是很多人理解有差异, Google一下mvc, 前四张图片mvc的流程图都不一样

最重要的是: 我们可以用mvc来优化面条代码

如何实现tab标签页的切换?

let $tab = $(".app2 .tab")
let $content = $(".app2 .content")
$tab.on('click','li',(e)=>{
    //如何切换tab-bar标签?
    //----1. 找到小tab,转换成jquer对象
    const $li = $(e.currentTarget)
    $li.addClass('active')
        .siblings()
        .removeClass('active')
    //----2. 找到索引
    const index = $li.index()
    //----3. 根据索引来选择展示不同的东西
    $content.children()
        .eq(index)
        .addClass('active')
        .siblings()
        .removeClass('active')
})

        <section class="app2">
                <ol class="tab">
                    <li id="tab1">tab1</li>
                    <li id="tab2">tab2</li>
                </ol>
                <ol class="content">
                    <li class="content1 active">content1</li>
                    <li class="content2">content2</li>
                </ol>
        </section>

如何写动画,更记得住的方法?

.app4 .active{
    animation-duration: 1s;
    animation-name: itt;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes itt {
    0%{background-color: cornflowerblue;}
    100%{background-color: aquamarine;}

}

踩坑

/*踩坑:这里写content, 而不是li的,导致我有的content都无法显示, 包括li*/
.app2 .content li{
    display: none;
}