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')
    }
  }
})