从MVC到MVVM
2019-05-16 本文已影响0人
kiterumer
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
})
}