从 jQuery 到 VUE 技术栈

摘要：当前前端最火热的框架当属，在学习之前先来看下的内部是如何工作的。我们从最基本的页面操作开始做起。书籍数量加减清零把占位符替换成数据事件相关的交给操作，有两个重要的属性初始化时需要传入两参数和，后面操作的都是在的都是在身上，而不是直接操作。

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

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

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

  

    书籍：《JavaScript高级程序设计》
    数量：2
  
  加1
  减1
  清零

用 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，可以实现在前端模拟后台，它有一个重要的 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 优化下

获取数据，更新数据的事情交个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:`
    

      

        书籍：《__name__》
        数量：__number__
      
      加1
      减1
      清零
    
`,
  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})

现在是一个页面，这也写没有关系，但如果有很多页面，每个页面中的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:`
    

      

        书籍：《__name__》
        数量：__number__
      
      加1
      减1
      清零
    
`
})

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

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

let view = new Vue({
  el:".app",
  data:{
    book:{
       name:"我是书籍",
       number:0,
       id:"" 
     },
    n:1
  },
  template:`
    

      

        书籍：《{{book.name}}》
        数量：{{book.number}}
      
      加1
      减1
      清零
    
`
  }

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,你都不需要进行事件绑定

加1
减1
清零

它在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，就变的很简单

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

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

    N的值是{{n}}

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

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