从MVC到MVVM

MVC思想写代码

fakeData()

function Model(options){
  this.data = options.data
  this.resource = options.resource
}
Model.prototype.fetch = function(id){
  return axios.get(`/${this.resource}s/${id}`).then((response) => {
      this.data = response.data
      console.log(this.data)
      return response
    })
}
Model.prototype.update = function(data){
  let id = this.data.id
    
    return axios.put(`/${this.resource}s/${id}`, data).then((response) => {
      this.data = response.data 
      console.log('response')
      console.log(response)
      return response
    })
}

function View({el, template}){
  this.el = el
  this.template = template
}
View.prototype.render = function(data){
  let html = this.template
  for(let key in data){
    html = html.replace(`__${key}__`, data[key])
  }
  $(this.el).html(html)
}


// ----------  上面是 MVC 类，下面是对象
let model = new Model({
  data: {
    name: '',
    number: 0,
    id: ''
  },
  resource: 'book'
})

let view = new View({
  el: '#app',
  template: `
    <div>
    书名：《__name__》
    数量：<span id=number>__number__</span>
    </div>
    <div>
      <button id="addOne">加1</button>
      <button id="minusOne">减1</button>
      <button id="reset">归零</button>
    </div>
  `
})

var controller = {
  init(options) {
    
    let view = options.view
    let model = options.model
    this.view = view
    this.model = model
    
    this.view.render(this.model.data)
    
    this.bindEvents()
    this.model.fetch(1).then(() => {
      console.log('this.model.data')
      console.log(this.model.data)
      this.view.render(this.model.data)
    })
    
  },
  addOne() {
    var oldNumber = $('#number').text() // string
    var newNumber = oldNumber - 0 + 1
    this.model.update({
      number: newNumber
    }).then(() => {
      this.view.render(this.model.data)
    })

  },
  minusOne() {
    var oldNumber = $('#number').text() // string
    var newNumber = oldNumber - 0 - 1
    this.model.update({
      number: newNumber
    }).then(() => {
      this.view.render(this.model.data)
    })
  },
  reset() {
    this.model.update({
      number: 0
    }).then(() => {
      this.view.render(this.model.data)
    })
  },
  bindEvents() {
    // this === controller
    $(this.view.el).on('click', '#addOne', this.addOne.bind(this))
    $(this.view.el).on('click', '#minusOne', this.minusOne.bind(this))
    $(this.view.el).on('click', '#reset', this.reset.bind(this))
  }
}

controller.init({view:view, model: model})

// 自己构造一个假的后台，支持接收请求，发送响应
function fakeData() {
  let book = {
    name: 'JavaScript 高级程序设计',
    number: 2,
    id: 1
  }
  axios.interceptors.response.use(function(response) {
    let {
      config: {
        method, url, data
      }
    } = response

    if (url === '/books/1' && method === 'get') {
      response.data = book
    } else if (url === '/books/1' && method === 'put') {
      data = JSON.parse(data)
      Object.assign(book, data)
      response.data = book
    }
    return response
  })
}

MVVM思想改写代码

fakeData()

function Model(options){
  this.data = options.data
  this.resource = options.resource
}
Model.prototype.fetch = function(id){
  return axios.get(`/${this.resource}s/${id}`).then((response) => {
      this.data = response.data
      console.log(this.data)
      return response
    })
}
Model.prototype.update = function(data){
  let id = this.data.id
    
    return axios.put(`/${this.resource}s/${id}`, data).then((response) => {
      this.data = response.data 
      console.log('response')
      console.log(response)
      return response
    })
}


// ----------  上面是 MVC 类，下面是对象
let model = new Model({
  data: {
    name: '',
    number: 0,
    id: ''
  },
  resource: 'book'
})

let view = new Vue({
  el: '#app',
  data: {
    book:{
      name: '未命名',
      number: 0,
      id: ''
    },
    n: 1
  },
  template: `
  <div>
    <div>
    书名：《{{book.name}}》
    数量：<span id=number>{{book.number}}</span>
    </div>
    <div>
       <input v-model="n" />
      N 的值是 {{n}}
    </div>
    <div>
      <button v-on:click="addOne">加N</button>
      <button v-on:click="minusOne">减N</button>
      <button v-on:click="reset">归零</button>
    </div>
  </div>
  `,
  created(){
    model.fetch(1).then(()=>{
      this.book = model.data
    })
  },
  methods:{
    addOne() {
      model.update({
        number: this.book.number + (this.n-0)
      }).then(() => {
        this.view.book = this.model.data
      })

    },
    minusOne() {
      model.update({
        number: this.book.number - (this.n-0)
      }).then(() => {
        this.view.book = this.model.data
      })
    },
    reset() {
      model.update({
        number: 0
      }).then(() => {
        this.view.book = this.model.data
      })
    },
  }
})

// 自己通过axios构建假的数据后台
function fakeData() {
  let book = {
    name: 'JavaScript 高级程序设计',
    number: 2,
    id: 1
  }
  axios.interceptors.response.use(function(response) {
    let {
      config: {
        method, url, data
      }
    } = response

    if (url === '/books/1' && method === 'get') {
      response.data = book
    } else if (url === '/books/1' && method === 'put') {
      data = JSON.parse(data)
      Object.assign(book, data)
      response.data = book
    }
    return response
  })
}