ZhangYang's Blog

前端MVC设计模式

发表于 | 分类于

前后端分离

一个页面分为两部分，浏览器上面的工作交给前端做，服务器上面的工作交给后端做

页面开发流程

浏览器第一次加载的页面只是一个占位符

1
2
3
<body>
  <div id=app></div>
</body>

前端将其他 HTML 和从服务器获取的数据填到占位符里

1
2
3
4
5
6
7
$.get('/user/1').then(function(user){
  template = (
    <h1>{{ name }}</h1>
  )
  content = template.replace('{{ name }}', user.name)
  $app.html(content)
})

用户提交数据时，前端用 AJAX 提交异步请求

1
2
3
4
5
$form.on('submit', function(){
  $.post('/user/1', $form.serialize()).then(function(){
    alert('提交成功')
  })
})

前端MVC模式

Model-封装数据操作

对用户的增删改成其实都是异步请求,数据相关的操作就都放到这个 model 上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var userModel = {
  find: function(id){
    return $.get('/user/'+id).then(function(user){
      $.extend(userModel, user)
    })
  },
  save: function(id, data){
    return $.post('/user/'+id, data)
  }
}
// 用户数据的校验
userModel.validate = function(){
  if(this.name === '') return false
  if(this.password === '') return false
  return true
}

View-视图渲染

前端的视图也是 HTML,将数据与 HTML 混合起来

1
content = template.replace('{{ name }}', user.name)

前端们模板引擎，如 Handlebars.js、React

1
content = templateEngine( template, user )

Controller-控制器

将 content 塞到页面里

浏览器事件监听 - 用户点击视图后去更新数据

数据事件监听 - user 数据更新后去更新视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
controller = {
  model: userModel,
  element: $app,
  template: '<h1>{{ name }} </h1>........',
  events: {
    'click button': 'onButtonClick',
    'submit form' : 'onSubmitForm'
  },
  modelEvents: {
    'update': 'onModelUpdate',
    'remove': 'onModelRemove'
  },
  init: function(){
    var content = templateEngine(this.template, userModel)
    this.element.append($app)
    
    // 遍历 events 并绑定对应的方法
    // 遍历 modelEvents 并绑定对应的方法
  },
  onButtonClick: function(){...},
  onSubmitForm: function(){...},
  onModelUpdate: function(){...},
  onModelRemove: function(){...}
}

控制器作用

  • Controller 监听 Model 变化，Model 一变，Controller 就会去更新 View

  • Controller 监听用户交互，用户点了提交或修改按钮，Controller 就要去更新 Model

Router-路由

只是在每个页面局部使用 MVC，那么就不需要路由

整站是一个单页面，那么就要处理 URL 的变化