MVC三个对象

M：model，模型

用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，会通知有关视图。

  1. const m = {
  2.   data: {//数据
  3.     n: xxx
  4.   },
  5.   create() {},//对数据的操作
  6.   delete() {},
  7.   update() {},
  8.   get() {},
  9. };

V：view，视图；

是model在屏幕上的表示，描绘的是model的当前状态。当模型数据生变化时，视图会相应得刷新自己。

  1. const v = {
  2.  container: xxx,//容器元素
  3.  template: yyy,//html内容
  4.   init() {},//初始化
  5.   render(){} //渲染页面
  6. };

C：controller，控制器

定义用户界面对用户输入方式的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，处理用户的行为与model上数据的改变。

  1. const c = {
  2.   events: {},//事件列表
  3.   init(container) {},//初始化
  4.   x(){},//事件函数
  5.   y(){},
  6.   autoBindEvents() {}//绑定鼠标事件
  7.   },
  8. };

eventsBus的API与其作用

可以用jquery获取一个全局对象,当做eventsBus，使用on，trigger，off
同样vue也有eventsBus，$on，$emit，$off

  1. /*
  2. trigger($emit)用于触发事件
  3. on($on)用于绑定事件
  4. off($off)用于解绑事件
  5. */
  6. const m = {
  7.  data:{
  8.  n:1
  9.  }
  10.   update(data){
  11.   Object.assign(m.data, data);
  12.     eventsBus.trigger("m-updated");//初始化的时候
  13.   }
  14. }
  15. x(){
  16. m.updata({n:2})
  17. }
  18. #app1.on('click','#one',x)
  19. eventsBus.on("m-updated", () => {
  20.       v.render();
  21.  /*
  22.  当用户在界面上点击id为one的元素时，最终会冒泡给id为app1的父元素
  23.  此时会触发调用x函数的事件
  24.  x函数又会调用update函数
  25.  update函数会调用 eventsBus.trigger("m-updated")
  26.  就会激活eventsBus.on("m-updated", () => {
  27.       v.render();
  28.  最后调用渲染页面的函数
  29.  */

表驱动编程

这是一种编程思想，在原本需要重复多次的面条式代码中抽离出非共性的数据，组成一个哈希表，遍历这个哈希表，将表中的数据添加到原本那些共性的代码中去。极大的提高了代码的可阅读性，也方便未来增删改查数据。

  1. /*
  2. 这就是用表驱动编程思想调用四个函数了
  3. */
  4. const c ={
  5. fn1(){...}
  6. fn2(){...}
  7. fn3(){...}
  8. fn3(){...}
  10. fn: {
  11.   'a' : 'fn1',
  12.   'b' : 'fn2',
  13.   'c' : 'fn3',
  14.   'd' :    'fn4'
  15.     }
  16. }
  17. for(let key in c.fn){
  18.  c[c.fn[key]]() 
  19. }

模块化思想

将网页里的应用划分为各个独立的模块进行开发，模块间不相互影响，既可以使代码结构清晰，便于阅读，还可以使未来便于维护。
如果我需要在页面里添加两个功能，
我会先创建

  • index.html
  • main.js
  • reset.css
  • global.css(各功能间的共同样式)
  • app1.js(功能一)
  • app1.css
  • app2.js(功能二)
  • app2.css

会做如下操作（export用于导出，import用于导入）

  • 在index.html中引入main.js
  • 在main.js中引入reset.css,global.css,app1.js和app2.js
  • 再在app1.js中引入app1.css，在app2.js中引入app2.css
  • 在app1.js里写HTML的内容，插入到index.html的元素中去
  • 在app2.js里写HTML的内容，插入到index.html的元素中去

这样就尽可能减少了各部分之间的联系，
如index.html只需要管有没有main.js就行了，不需要在乎里面的内容
main.js导入的app1.js和app2.js也不用管他们里面的内容