JS设计模式——MVC模式

MVC

MCV是前端框架中常见的一种设计模式，它将页面变化的逻辑分为视图层view、控制层controller、数据层model，三者间的逻辑关系如下：

实现一个简单的MVC

// MVC
var MVC = {}
// 数据层，存储数据修改数据
MVC.model = (function() {
  var data = {
    sidebar: [{
      title: 'sidebar1',
      href: './a.html'
    }, {
      title: 'sidebar2',
      href: './b.html'
    }, {
      title: 'sidebar3',
      href: './c.html'
    }]
  }
  return {
    getDate: function(key) {
      return data[key]
    }, 
    setDate: function(key, value) {
      data[key] = value
    }
  }
})()
// 视图层，根据数据渲染页面
MVC.view = (function() {
  var m = MVC.model
  var view = {
    createSidebar: function() {
      var data = m.getDate('sidebar')
      var html = ''
      html += '<div class="sidebar">'
      for(var i=0; i<data.length; i++) {
        html += '<div class="sidebar-item"><a href="'+data[i].href+'">'+data[i].title+'</a></div>'
      }
      html += '</div>'
      document.body.innerHTML = html
    }
    
  }
  return function (v) {
      view[v]()
    }
})
// 控制层
MVC.ctrl = (function() {
  var m = MVC.model
  var v = MVC.view
  var c = {
    initSideBar: function() {
      v('createSidebar')
    }
  }
})