前端MVC与后端MVC

文章目录
*后端MVC：*
*前端MVC：*
MVC思想实现计算器案例
后端MVC：
M：Model 数据模型 -> 操作数据库（对数据进行增删改查）
V：View 视图层 显示视图与视图模板
C：Controller
服务端渲染：
控制层、逻辑层 ： 数据和视图关联挂载和基本的逻辑操作
View需要数据 Controller对应的方法 调用Model的方法 获取数据 返回给Controller对应的方法 render到View中
前端渲染：
API层 ：前端请求的API对应的是控制器中的方法
前端 异步请求URL 控制器中的一个方法 Model层的方法 操作数据库 获取数据 返回给控制器方法 响应回前端
前端MVC：
Model：管理视图所需要的数据 数据与视图的关联
View：HTML模板 + 视图渲染
Controller：管理事件逻辑
MVC思想实现计算器案例
<div id="app"></div>
1
(function() {

  function init() {
    model.init(); // 组织数据 数据监听操作&数据代理
    view.render(); // 组织HTML模板 渲染HTML模板
    controller.init(); // 事件处理函数绑定
  }

  var model = {
    data: {
      a: 1,
      b: 2,
      s: '+',
      r: 0
    },
    init: function() {
      var _this = this;

      for(var key in _this.data) {

        (function(k){
          Object.defineProperty(_this, k, {
            get: function() {
              return _this.data[k];
            },

            set: function(newValue) {
              _this.data[k] = newValue;
              view.render({ [k]: newValue}); 
            }
          });
        })(key);
      }
    }
  }

  var view = {
    el: '#app',
    template: `
      <p>
        <span class="cal-a">{{ a }}</span>
        <span class="cal-s">{{ s }}</span>
        <span class="cal-b">{{ b }}</span>
        <span>=</span>
        <span class="cal-r">{{ r }}</span>
      </p>
      <p>
        <input type="text" placeholder="Number a" class="cal-input a" />
        <input type="text" placeholder="Number b" class="cal-input b" />
      </p>
      <p>
        <button class="cal-btn">+</button>
        <button class="cal-btn">-</button>
        <button class="cal-btn">*</button>
        <button class="cal-btn">/</button>
      </p>
    `,
    render: function(mutedData) {
      if(!mutedData) {
        this.template = this.template.replace(
          /\{\{(.*?)\}\}/g,
          function(node, key) {
            return model[key.trim()];
          }
        );

        var container = document.createElement('div');
        container.innerHTML = this.template;
        document.querySelector(this.el).appendChild(container);
      }else {
        for(var key in mutedData) {
          document.querySelector('.cal-' + key).textContent = mutedData[key];
        }
      }
    }
  }

  var controller = {
    init: function() {
      var oCalInputs = document.querySelectorAll('.cal-input'),
          oCalBtns = document.querySelectorAll('.cal-btn'),
          inputItem,
          btnItem;

      for(var i = 0; i < oCalInputs.length; i ++) {
        inputItem = oCalInputs[i];

        inputItem.addEventListener('input', this.handleInput, false);
      }

      for(var i = 0; i < oCalBtns.length; i ++) {
        btnItem = oCalBtns[i];

        btnItem.addEventListener('click', this.handleBtn, false);
      }
    },
    handleInput: function(e) {
      var tar = e.target,
          value = Number(tar.value),
          field = tar.className.split(' ')[1];

      model[field] = value;

      // model.r = eval('model.a' + model.s + 'model.b');
      with(model) {
        r = eval('a' + s + 'b');
      }
    },
    handleBtn: function(e) {
      var type = e.target.textContent;

      model.s = type;

      with(model) {
        r = eval('a' + s + 'b');
      }
    }
  }

  init();
})();