浅谈MVC（初步的自我理解）

MVC是啥

• 每个模块都可以写成三个对象，分别是M、V、C
• M -Model（数据模型）负责操作所有数据
• V -View（视图）负责所有UI界面
• C -Controller（控制器）负责其他

初始化

yarn init -y //终端
yarn add jquery //终端

import $ from 'jquery' //main.js引入jquery

思想

• 不相同的地方用哈希表对象，然后遍历
• 相同的地方用函数

报错重点

js代码不能以括号开头

总结（需要记住）

MVC的概念

我理解的MVC就是把数据、UI界面、其他分别放在MVC对应的地方，方便以后维护

//m:数据层 ，负责初始化数据
const m = new Model({
    data:{//初始化数据
    n: parseInt(localStorage.getItem("n"))
    },
    update: (data) => {
    Object.assign(m.data, data);
    eventBus.trigger("m:updated");
    localStorage.setItem("n", m.data.n);
  },
})

//视图层View，负责展示的数据
const v = new View({
  el:null,
  html: `
      <div>
        <div class="output">
          <span id="number">{{n}}</span>
          <div class="actions">
            <button id="add1">+1</button>
          </div>
        </div>
      </div>
`,
render(n) {
  if (v.el.children.length === 0) {
  } else {
    v.el.empty();
  }
  v.el = $(v.html.replace("{{n}}", n)).appendTo(v.el);
},
})

//其他，这里有初始化View，重新render，和一些其他的监听事件
const c = {
    init(container) {
    v.init(container);
    v.render(m.data.n);
    c.addBindEvents();
    eventBus.on("m:updated", () => {
      v.render(m.data.n);
    });
  },
  event: {
    "click #add1": "add"
  },
  add() {
    m.update({ n: m.data.n + 1 });
  },
}

eventBus的概念

eventBus作用就是解决不同的层级的组件之间的通信

常用的API有

• on（监听事件）
• off（取消监听）
• trigger（触发事件）

view = render(data)概念

比如说之前要更新html里面css样式，需要改css属性，view = render()意思就是不改变css属性，而是把页面重新渲染

表驱动编程概念

表驱动编程意思就是把不同的地方用一个哈希表对象装起来，然后在遍历，相同的地方用函数装起来，这种方法在越复杂或者说数据越多的时候就更为方便简洁。

模块化编程概念

模块化编程我理解的其实跟表驱动编程的意思差不多，只不过一个是用在局部另一个范围更大，模块化意思就是我吧以后会重复用到的数据或者方法用一个单独的文件装起来，然后到处，以后用到的话就引入这个文件，里面的方法自然就拿到了