前端MVC与后端MVC

本文探讨了后端与前端MVC模式的实现,详细解析了MVC思想在服务端渲染和前端渲染中的应用。通过一个计算器案例,展示了前端如何使用MVC模式组织数据、渲染视图和管理事件逻辑。后端MVC中,Model负责数据库操作,View呈现视图,Controller协调数据与视图。前端MVC中,Model管理数据,View用于HTML模板渲染,Controller处理事件逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章目录
*后端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();
})();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值