从 jQuery 到 VUE 技术栈

当前前端最火热的框架当属 VUE，在学习 VUE 之前先来看下 VUE 的内部是如何工作的。

我们从最基本的页面操作开始做起。

用 jQuery 操作页面

我们来实现一个页面，当点击按钮式，页面上的数字增加或减少

<div class="app">
  <div class="book">
    书籍：《JavaScript高级程序设计》
    数量：<span class='number'>2</span>
  </div>
  <button class='addOne'>加1</button>
  <button class='minusOne'>减1</button>
  <button class='reset'>清零</button>
</div>

用 jQuery 操作它很容易实现需求

let log = console.log.bind(console)     //把console.log 替换成 log 少打点代码
$('.addOne').on('click',()=>{
  let oldHtml = $('.number').text()
  let newHtml = oldHtml -0 +1
  $('.number').html(newHtml)
})
$('.minusOne').on('click',()=>{
  let oldHtml = $('.number').text()
  let newHtml = oldHtml -0 -1
  $('.number').html(newHtml)
})
$('.reset').on('click',()=>{
  $('.number').text('0')
})

axios 实现 ajax

我们真实的需求是，当点击按钮时，操作的时数据库里的数据，而不是直接在页面中操作。

这里引入一个库axios，可以实现在前端模拟后台，它有一个重要的 API：interceptors，可以实现在它上面 Mock 数据

// 我们要的数据
let book = {
  name:'JavaScript高级程序设计',
  number:2,
  id:''
}
axios.interceptors.response.use((response)=>{
  //下面这句等价于 let {url,method,data} = response.config
  let {config:{url,method,data}} = response        // 这里的 data 是请求体
  if(url === '/book/1' && method === 'get'){
     response.data = book    //这里的 data 是响应体
  }else if(url === '/book/1' && method === 'put'){
    data = JSON.parse(data)
    Object.assign(book,data)     //请求体 data，assign可实现局部更新
    response.data = book        //响应体 data
  }
  return response
})

页面中的数据我们应该用占位符代替，数据获取到之后 更新到页面中

//刚进入页面后的数据加载
axios.get('/book/1').then(({data})=>{
  let oldHtml = $('.app').html()
  let newHtml = oldHtml.replace('__name__',data.name) 
    .replace('__number__',data.number)    //用真实数据替换占位符
  $('.app').html(newHtml)
})
$('.app').on('click','.addOne',()=>{
  let oldNumber = $('.number').text()
  let newNumber = oldNumber -0 +1
  axios.put('/book/1',{number:newNumber}).then(({data})=>{    //请求时更新最新数据
    $('.number').html(data.number)
  })
})
$('.app').on('click','.minusOne',()=>{
  let oldNumber = $('.number').text()
  let newNumber = oldNumber -0 -1
  axios.put('/book/1',{number:newNumber}).then(({data})=>{
    $('.number').html(data.number)
  })
})
$('.app').on('click','.reset',()=>{
  axios.put('/book/1',{number:0}).then(({data})=>{
    $('.number').html(data.number)
  })
})

这样的意大利面条似的写法，非常不利于后期维护，我们应该用 MVC 优化下

用 MVC 优化

获取数据，更新数据的事情交个model去做，model里面有三个属性：data，fetch，updata；分别用来：data负责存储最新数据，fetch负责页面加载时向服务器获取数据，并将数据存储到data中，updata负责实时页面操作时，更新页面数据，并将最新数据保存到data中。

let model ={
  data:{    //model 内部用来存储数据
    name:'',
    number:0,
    id:''
  },
  fetch(id){
    return axios.get(`/books/${id}`).then((response)=>{
      this.data = response.data        //加载更新向 axios 获取的数据
      return response      
    })
  },
  updata(id,data){
    return axios.put(`/books/${id}`,data).then((response)=>{
      this.data = response.data        //点击按钮向 axios 获取最新数据，请求中的 data 是最新数据
      return response
    })
  }
}

操作页面交给view，view有三个属性，分别是el、template、render；el负责视图部分，也就是你需要操作的 DOM，template是虚拟的html，并通过render去渲染。

let view = {
  el:'.app',
  template:`
    <div>
      <div class="book">
        书籍：《__name__》
        数量：<span class='number'>__number__</span>
      </div>
      <button class='addOne'>加1</button>
      <button class='minusOne'>减1</button>
      <button class='reset'>清零</button>
    </div>`,
  render(data){
    let newHtml = this.template.replace('__name__',data.name)    
      .replace('__number__',data.number)    //把占位符替换成数据
    $(this.el).html(newHtml)
  }
}

事件相关的交给controller操作，有两个重要的属性：init、bingEvents；初始化时需要传入两参数view和model，后面操作的都是在的view、model都是在controller身上，而不是直接操作model。

let controller = {
  init({view,model}){
    this.view = view
    this.model = model
    this.bindEvents()
    this.model.fetch(1).then(()=>{  
      view.render(this.model.data)
    })
  },
  bindEvents(){
    $(this.view.el).on('click','.addOne',this.addOne.bind(this)) //这里 addOne 内部的 this 应该是点击的那个元素，所以这里要绑一下 this
    $(this.view.el).on('click','.minusOne',this.minusOne.bind(this))
    $(this.view.el).on('click','.reset',this.reset.bind(this))
  },
  addOne(){
    console.log(1)
    let oldNumber = $('.number').text()
    console.log(2)
    let newNumber = oldNumber -0 +1
    console.log(3)
    this.model.updata(1,{number:newNumber}).then(()=>{
        $('.number').html(this.model.data.number)
    })
    console.log(4)
  },
  minusOne(){
    let oldNumber = $('.number').text()
    let newNumber = oldNumber -0 -1
    this.model.updata(1,{number:newNumber}).then(()=>{
      $('.number').html(this.model.data.number)
    })
  },
  reset(){
    this.model.updata(1,{number:0}).then(()=>{
      $('.number').html(this.model.data.number)
    })
  }    
}
controller.init({view:view,model:model})

优化 MVC

现在是一个页面，这也写没有关系，但如果有很多页面，每个页面中的view、model、controller都重复了，这里把一些公用的方法写在原型上。

在页面中使用model，只需要传递两参数

function Model({data,resouce}){
  this.data = data
  this.resouce = resouce
}

Model.prototype.updata = function(id,data){
  return axios.put(`/${this.resouce}s/${id}`,data).then((response)=>{
    this.data = response.data
    return response
  })
}

Model.prototype.fetch = function(id){
    return axios.get(`/${this.resouce}s/${id}`).then((response)=>{
      this.data = response.data
      return response      
    })
}
let model = new Model({
  data:{
    name:'',
    number:0,
    id:''
  },
  resouce:'book'  
})

view也是，页面使用时，传两个参数就 ok 了

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)
}
let view = new View({
  el:'.app',
  template:`
    <div>
      <div class="book">
        书籍：《__name__》
        数量：<span class='number'>__number__</span>
      </div>
      <button class='addOne'>加1</button>
      <button class='minusOne'>减1</button>
      <button class='reset'>清零</button>
    </div>`
})

controller公用的方法比较少，这里就没有优化了

VUE

理解了 MVC 之后再来看 VUE 就会很简单，VUE 简单来说就是 MVC 中的 V，但它和 MVC 有点区别，就是它需要model中的数据

let view = new Vue({
  el:'.app',
  data:{
    book:{
       name:'我是书籍',
       number:0,
       id:'' 
     },
    n:1
  },
  template:`
    <div>
      <div class="book">
        书籍：《{{book.name}}》
        数量：<span class='number'>{{book.number}}</span>
      </div>
      <button class='addOne'>加1</button>
      <button class='minusOne'>减1</button>
      <button class='reset'>清零</button>
    </div>`
  }

VUE 会把data里的属性提升为 Vue 的属性，所以下面操作可以直接用Vue.name操作，而不是写Vue.data.name，所以我们可以在这些属性外面套一层book，用Vue.book就可以对这些属性进行批量操作。

Vue没有render方法，那你会说它怎么实现渲染页面呢？

它提供了一个叫created的方法，在里面直接修改Vue的data属性，它就会自动帮你渲染页面

created(){
    model.fetch(1).then(()=>{
      this.book = model.data
    })

当然 VUE 的野心不止于此 ，它甚至帮你省下controllor,你都不需要进行事件绑定

<button class='addOne' v-on:click="addOne">加1</button>
<button class='minusOne' v-on:click="minusOne">减1</button>
<button class='reset' v-on:click="reset">清零</button>

它在template，v-on:click的一个方法，它会帮你调用methods中的方法，你只需要将点击执行的函数写在上面即可。

methods:{
    addOne(){
      model.updata(1,{number:this.book.number + (this.n-0)})
        .then(()=>{
          this.book = model.data
        })
    },
    minusOne(){
      model.updata(1,{number:this.book.number - (this.n-0)})
        .then(()=>{
          this.book = model.data
        })
    },
    reset(){
      model.updata(1,{number:0})
        .then(()=>{
          this.book = model.data
        })
    }
}

学会了 MVC 之后在来看 VUE，就变的很简单

MVVM

VUE 还实现另一个双向绑定的功能，我现在点击按钮只能+1或-1，如果我要实现操作+n或减n呢?

这里用input实现，在按钮上面添加一行

<div>
    <input v-model='n'>N的值是<span>{{n}}</span>
</div>

当然Vue的data中也要添加一个n

当你在input中输入相应值时，后面N的值会相应变化，这就是 MVVM。