抽象思维1：最小知识原则

引入一个模块需要引入html、css、js
引入一个模块需要引入html、js
引入一个模块需要引入js

代码：

这样做会使得页面一开始空白，没内容没样式
解决的方法很多，比如开菊花（加载图片）、加骨架、加占位内容等
也有人使用ssr技术来解决，我个人觉得没有必要

设置每个模块的数据保存

app2.js:添加的代码！

const index = localStorage.getItem('app2.index') || 0
    localStorage.setItem('app2.index',index)
$tabBar.children().eq(index).trigger('click')//自己点击

简化代码

const  active = localStorage.getItem(localKey) ===  'yes'
// const  active = localStorage.getItem(localKey) ===  'yes' ? true : false

if (active){
    $square.addClass('active')
}else{
    $square.removeClass('active')
} // as same as -----------> $square.toggleClass('active',active)

bottom初始化比rander早会导致页面失效.

采取的方式用initial(){}函数

init(){
        c.ui={
            button1 : $('#add1'),
            button2 : $('#sub1'),
            button3 : $('#mul2'),
            button4 : $('#div2'),
            number : $('#number')
        }
        c.bindEvents()
    },

为了防止元素替换后带来的按键失效：

用到的方法事件绑定：我们把元素绑定在最外面的哪一个元素上面，利用父级元素对子元素的监听！

抽象思维2：以不变应万变

既然每个模块都可以用 m + v + c 搞定
那么每个模块我就都这样写就好啦
不用再思考类似的需求该怎么做了
代价有时候会有一些多余的用不到代码有时候遇到特殊情况不知道怎么变通，比如没有 html 的模块怎么做 mvc

抽像思维3：表驱动编程

当你看到大批类似但不重复的代码
眯起眼睛，看看到底哪些才是重要的数据
把重要的数据做成哈希表，你的代码就简单了这是数据结构知识给我们的红利

事件绑定变为哈希表

原来函数：

// bindEvents(){
    //     v.el.on('click','#add1',()=>{
    //         m.data.n += 1
    //         v.render(m.data.n)
    //     });
    //     v.el.on('click','#sub1',()=>{
    //         m.data.n -= 1
    //         v.render(m.data.n)
    //     });
    //     v.el.on('click','#mul2',()=>{
    //         m.data.n *=2
    //         v.render(m.data.n)
    //     });
    //     v.el.on('click','#div2',()=>{
    //         m.data.n /= 2
    //         v.render(m.data.n)
    //     });
    // }

改后的函数：

events:{
        'click #add1':'add',
        'click #sub1':'sub',
        'click #mul2':'mul',
        'click #div2':'div'
    },
    add(){
        m.data.n+=1
        v.render(m.data.n)
    },
    sub(){
        m.data.n-=1
        v.render(m.data.n)
    },
    mul(){
        m.data.n*=2;
        v.render(m.data.n)
    },
    div(){
        m.data.n/=2;
        v.render(m.data.n)
    },
    autoBindEvent(){
        for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0,spaceIndex)
            const part2 = key.slice(spaceIndex+1)
            v.el.on(part1,part2,value)
        }
    }

抽象思维4：俯瞰全局

把所有的对象看成点一个点和一个点怎么通信
一个点和多个点怎么通信多个点和多个点怎么通信
最终我们找出一个专用的点负责通信这个点就是 event bus（事件总线）

抽象思维5： view = render(data)

view = render(data) 比起操作 DOM 对象，
直接 render 简单多了只要改变 data，就可以得到对应的 view

代价

render 粗犷的渲染肯定比 DOM 操作浪费性能
还好我们后面会用到虚拟 DOM 虚拟 DOM 能让 render 只更新该更新的地方

函数总结：

const eventBus = $({})

作用：监听n的变化

console.log(eventBus)

Object.assign(m.data,data)

作用：把data所有的属性赋值给m.data

MVC

MVC-中