MVC交互模式

其基本思路是将DOM交互的内容分为数据模式、视图和事件控制函数三个部分，并对它们进行统一管理。

Model用来存放请求的数据结果和数据对象，
VIew用于页面DOM的更新与修改，
Controller则用于根据前端路由条件来调用不同Model给View渲染不同的数据内容。

常用的页面路由的实现也很简单，其主要思路是让URL地址内容匹配对应的字符串然后进行相应的操作。

const router = {
    get(match, fn) {
        let url = location.href
        let routeReg = new RegExp (match, 'g')
        if(routeReg.test(url)){
            fn()
        }
        return this
    }
}

router.get('#index', function(){
    _loadIndex(); //注册hash含有#index的路由执行对应的操作
}).get('#detail', function(){
    _loadDetail()
})

也可以使用HTML5的pushState来实现路由。history.pushState(state, title, url)方法可以改变当前页面的url而不发生跳转，并将不同的state数据和对应的url对应起来。

history.pushState({page: "A"}, 'page A', 'a.html')
console.log(history.state);// {page: 'A'} 对象

使用路由后，将SPA中的每个路由或用户操作加载的页面内容都看成是一个组件。所有的组件数据请求、渲染、页面逻辑操作都分别用Model、View、Controller来注册调用。
例如其中一个组件A

<div id="A" onclick="Controller.A.event.change"></div>

let component = new Component()
ler A = component.extend({
    $el: document.getElementById('A'),
    model： {
        text: 'ViewA渲染成功'
    },
    view: {
        let tpl = '<input id='input' type='text' value='{{text}}'><span id="showText">{{text}}</span>'
        //调用模板渲染数据获取HTML片段
        let html = render(tpl, data)
        this.$el.innerHtml = html
    },
    controller(){
        let self = this
        //调用model数据传入view中的渲染内容
        self.view(self.model)
        //用户操作一般通过hash来触发Controller改变Modle和View
        $('window').on('hashChange', function(){
            self.model.text = location.href
            self.view(self.model)
        })
    }
})