摘要：當(dāng)前前端最火熱的框架當(dāng)屬，在學(xué)習(xí)之前先來看下的內(nèi)部是如何工作的。我們從最基本的頁面操作開始做起。書籍?dāng)?shù)量加減清零把占位符替換成數(shù)據(jù)事件相關(guān)的交給操作，有兩個重要的屬性初始化時需要傳入兩參數(shù)和，后面操作的都是在的都是在身上，而不是直接操作。

當(dāng)前前端最火熱的框架當(dāng)屬 VUE，在學(xué)習(xí) VUE 之前先來看下 VUE 的內(nèi)部是如何工作的。

我們從最基本的頁面操作開始做起。

我們來實現(xiàn)一個頁面，當(dāng)點擊按鈕式，頁面上的數(shù)字增加或減少

  

    書籍：《JavaScript高級程序設(shè)計》
    數(shù)量：2
  
  加1
  減1
  清零

用 jQuery 操作它很容易實現(xiàn)需求

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")
})

我們真實的需求是，當(dāng)點擊按鈕時，操作的時數(shù)據(jù)庫里的數(shù)據(jù)，而不是直接在頁面中操作。

這里引入一個庫axios，可以實現(xiàn)在前端模擬后臺，它有一個重要的 API：interceptors，可以實現(xiàn)在它上面 Mock 數(shù)據(jù)

// 我們要的數(shù)據(jù)
let book = {
  name:"JavaScript高級程序設(shè)計",
  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 是響應(yīng)體
  }else if(url === "/book/1" && method === "put"){
    data = JSON.parse(data)
    Object.assign(book,data)     //請求體 data，assign可實現(xiàn)局部更新
    response.data = book        //響應(yīng)體 data
  }
  return response
})

頁面中的數(shù)據(jù)我們應(yīng)該用占位符代替，數(shù)據(jù)獲取到之后 更新到頁面中

//剛進入頁面后的數(shù)據(jù)加載
axios.get("/book/1").then(({data})=>{
  let oldHtml = $(".app").html()
  let newHtml = oldHtml.replace("__name__",data.name) 
    .replace("__number__",data.number)    //用真實數(shù)據(jù)替換占位符
  $(".app").html(newHtml)
})
$(".app").on("click",".addOne",()=>{
  let oldNumber = $(".number").text()
  let newNumber = oldNumber -0 +1
  axios.put("/book/1",{number:newNumber}).then(({data})=>{    //請求時更新最新數(shù)據(jù)
    $(".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)
  })
})

這樣的意大利面條似的寫法，非常不利于后期維護，我們應(yīng)該用 MVC 優(yōu)化下

獲取數(shù)據(jù)，更新數(shù)據(jù)的事情交個model去做，model里面有三個屬性：data，fetch，updata；分別用來：data負(fù)責(zé)存儲最新數(shù)據(jù)，fetch負(fù)責(zé)頁面加載時向服務(wù)器獲取數(shù)據(jù)，并將數(shù)據(jù)存儲到data中，updata負(fù)責(zé)實時頁面操作時，更新頁面數(shù)據(jù)，并將最新數(shù)據(jù)保存到data中。

let model ={
  data:{    //model 內(nèi)部用來存儲數(shù)據(jù)
    name:"",
    number:0,
    id:""
  },
  fetch(id){
    return axios.get(`/books/${id}`).then((response)=>{
      this.data = response.data        //加載更新向 axios 獲取的數(shù)據(jù)
      return response      
    })
  },
  updata(id,data){
    return axios.put(`/books/${id}`,data).then((response)=>{
      this.data = response.data        //點擊按鈕向 axios 獲取最新數(shù)據(jù)，請求中的 data 是最新數(shù)據(jù)
      return response
    })
  }
}

操作頁面交給view，view有三個屬性，分別是el、template、render；el負(fù)責(zé)視圖部分，也就是你需要操作的 DOM，template是虛擬的html，并通過render去渲染。

let view = {
  el:".app",
  template:`
    

      

        書籍：《__name__》
        數(shù)量：__number__
      
      加1
      減1
      清零
    
`,
  render(data){
    let newHtml = this.template.replace("__name__",data.name)    
      .replace("__number__",data.number)    //把占位符替換成數(shù)據(jù)
    $(this.el).html(newHtml)
  }
}

事件相關(guān)的交給controller操作，有兩個重要的屬性：init、bingEvents；初始化時需要傳入兩參數(shù)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 內(nèi)部的 this 應(yīng)該是點擊的那個元素，所以這里要綁一下 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})

現(xiàn)在是一個頁面，這也寫沒有關(guān)系，但如果有很多頁面，每個頁面中的view、model、controller都重復(fù)了，這里把一些公用的方法寫在原型上。

在頁面中使用model，只需要傳遞兩參數(shù)

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也是，頁面使用時，傳兩個參數(shù)就 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){    //遍歷傳進來的參數(shù)，用循環(huán)替換頁面中的占位符
    html = html.replace(`__${key}__`,data[key])
  }
  $(this.el).html(html)
}
let view = new View({
  el:".app",
  template:`
    

      

        書籍：《__name__》
        數(shù)量：__number__
      
      加1
      減1
      清零
    
`
})

Controller公用的方法比較少，這里就沒有優(yōu)化了

理解了 MVC 之后再來看 VUE 就會很簡單，VUE 簡單來說就是 MVC 中的 V，但它和 MVC 有點區(qū)別，就是它需要model中的數(shù)據(jù)

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

      

        書籍：《{{book.name}}》
        數(shù)量：{{book.number}}
      
      加1
      減1
      清零
    
`
  }

VUE 會把data里的屬性提升為 Vue 的屬性，所以下面操作可以直接用Vue.name操作，而不是寫Vue.data.name，所以我們可以在這些屬性外面套一層book，用Vue.book就可以對這些屬性進行批量操作。

Vue沒有render方法，那你會說它怎么實現(xiàn)渲染頁面呢？

它提供了一個叫created的方法，在里面直接修改Vue的data屬性，它就會自動幫你渲染頁面

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

當(dāng)然 VUE 的野心不止于此 ，它甚至幫你省下controllor,你都不需要進行事件綁定

加1
減1
清零

它在template，v-on:click的一個方法，它會幫你調(diào)用methods中的方法，你只需要將點擊執(zhí)行的函數(shù)寫在上面即可。

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
        })
    }
}    

學(xué)會了 MVC 之后在來看 VUE，就變的很簡單

VUE 還實現(xiàn)另一個雙向綁定的功能，我現(xiàn)在點擊按鈕只能+1或-1，如果我要實現(xiàn)操作+n或減n呢?

這里用input實現(xiàn)，在按鈕上面添加一行

    N的值是{{n}}

當(dāng)然Vue的data中也要添加一個n

當(dāng)你在input中輸入相應(yīng)值時，后面N的值會相應(yīng)變化，這就是 MVVM。