MVVM

axois

1. 比jQuery.ajax功能更多
2. 除了ajax功能之外，没有其他功能(更专注ajax)

   let book={
       name:'javascript 高级程序设计'
       number:2,
       id:1
       }
       //interceptors:在真正返回response之前使用
   axios.interceptors.response.use(function(response){
       let config=response.config
       let {method,url,data}=config //data是请求的data
       if(url==='/book/1'&&method==='get'){
       response.data=book
       }else if(url==='/book/1'&&method==='put'){
       Object.assign(book,data)
       /*Object.assign(obj,{}) Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。*/
       response.data=book
       }
       return response
   })
   /*上面是假的后台*/
   axios.get('/book/1').then((data)=>{
       let originalHtml=$('#app').html()
       let newHtml=originalHtml.replace('__name__',data.name).replace('__number__',data.number)
       $('#app').html(newHtml)
   })
   
   $('#app').on('click','#addOne',function(){
       var oldNumber=$('#number').text()
       var newNumber=oldNumber-0+1
       axios.put('/book/1',{
       number:newNumber
       }).then(function(){
       $('#number').text(newNumber)
       })
   })

意大利面条式代码，是软件工程中反面模式的一种，是指一个源代码的控制流程复杂、混乱而难以理解，尤其是用了很多GOTO、例外、线程、或其他无组织的分支。

fakeData()
/*上面是假的后台*/

let model={
    data:{
    name:'',
    number:0,
    id:''
    },
    fetch(id){
    return axios.axios.get(`/book/${id}`).then((response)=>{
    this.data=response.data
    return response
    })
    },
    updata(data){
    let id=this.data.id
    return axios.put(`/book/${id}`,data).then((response)=>{
    this.data=response.data
    return response
    })
    }
}

let view={
    el:'#app',
    template:
    <div>
    书名：《__name__》
    数量：<span id=number>__number__</span>
    </div>
    <div>
        <button id="addOne">加1</button>
    </div>
    ,
    render:(data)=>{
    let html=this.template.replace('__name__',data.name).replace('__number__',data.number)
    $(this.el).html(html)
    }
}

let 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(()=>{this.view.render(this.model.data)})
    },
    addOne(){
    var oldNumber=$('#number').text()
    var newNumber=oldNumber-0+1
    this.model.updata({
    number:newNumber
    }).then(function(){
    this.view.render(this.model.data)
        })
    }
    bindEvents:()=>{
    $(this.view.el).on('click','#addOne',this.addOne.bind(this))
  }
}
controller.init({view:view,model:model})

function fakeData(){
let book={
    name:'javascript 高级程序设计'
    number:2,
    id:1
    }
    //interceptors:在真正返回response之前使用
axios.interceptors.response.use(function(response){
    let config=response.config
    let {method,url,data}=config //data是请求的data
    if(url==='/book/1'&&method==='get'){
    response.data=book
    }else if(url==='/book/1'&&method==='put'){
    data=JSON.parse(data)
    Object.assign(book,data)
    /*Object.assign(obj,{}) Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。*/
    response.data=book
    }
    return response
})
}

用MVC改写代码

```
function Model(options){
    this.data=options.data
    this.resource=options.resource
}
Model.prototype.fetch=function(id){
    return axios.axios.get(`/book/${id}`).then((response)=>{
    this.data=response.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
    return response
    })
}

function View({el,template}){
    this.el=el
    thie.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类，下面是MVC对象------------//
let bookModel=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>
    </div>
})

用构造函数重写Model和view

function Model(options){
    this.data=options.data
    this.resource=options.resource
}
Model.prototype.fetch=function(id){
    return axios.axios.get(`/book/${id}`).then((response)=>{
    this.data=response.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
    return response
    })
}

//--------上面是MVC类，下面是MVC对象------------//

let bookModel=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"/>
        </div>
        <div>
            <button v-on:click="addOne">加1</button>
        </div>
    </div>
    ,
    created(){
    model.fetch(1).then(()=>{
      this.book=model.data
    })
 },
    method:{
    addOne(){
        model.updata({
        number:this.book.number+(this.n-0)
        }).then(function(){
        this.view.book=this.model.data
            })
        }
   }
})

用VUE代替view,去除controller

双向绑定

//ES6技巧
let config=response.config
let {method,url,data}=config //data是请求的data
let {config:{method,url,data}}=response

$('#app').on('click','#addOne',function(){})
委托：如果你点击app里面任何一个元素，只要符合#addOne这个选择器，就执行function