建一个下载网站要什么cms系统,怎么用.net做网站,apache网站开启gzip,李江seoMVVM
MVVM 由以下三个内容组成 View #xff1a;界⾯ Model #xff1a;数据模型 ViewModel #xff1a;作为桥梁负责沟通 View 和 Model 在 JQuery 时期#xff0c;如果需要刷新 UI 时#xff0c;需要先取到对应的 DOM 再更新UI #xff0c;这样数据和业务的逻辑就和…MVVM
MVVM 由以下三个内容组成 View 界⾯ Model 数据模型 ViewModel 作为桥梁负责沟通 View 和 Model 在 JQuery 时期如果需要刷新 UI 时需要先取到对应的 DOM 再更新UI 这样数据和业务的逻辑就和⻚⾯有强 耦合。MVVM
在 MVVM 中 UI 是通过数据驱动的数据⼀旦改变就会相应的刷新对应的UI UI 如果改变也会改变对应的数据。这种⽅式
就可以在业务处理中只关⼼数据的流转⽽⽆需直接和⻚⾯打交道。 ViewModel 只关⼼数据和业务的处理不关⼼ View 如何处
理数据在这种情况下 View 和 Model 都可以独⽴出来任何⼀⽅改变了也不⼀定需要改变另⼀⽅并且可以将⼀些可复⽤的逻
辑放在⼀个ViewModel 中让多个 View 复⽤这个 ViewModel 。在 MVVM 中最核⼼的也就是数据双向绑定例如 Angluar 的脏数据检测 Vue 中的数据劫持。
脏数据检测
当触发了指定事件后会进⼊脏数据检测这时会调⽤ $digest 循环遍历所有的数据观察者判断当前值是否和先前的值有区别如果检测到变化的话会调⽤ $watch 函数然后再次调⽤ $digest 循环直到发现没有变化。循环⾄少为⼆次 ⾄多为⼗次。脏数据检测虽然存在低效的问题但是不关⼼数据是通过什么⽅式改变的都可以完成任务但是这在 Vue 中的双向绑定是存在问题的。并且脏数据检测可以实现批量检测出更新的值再去统⼀更新 UI ⼤⼤减少了操作 DOM的次数。所以低效也是相对的这就仁者⻅仁智者⻅智了。
数据劫持
Vue 内部使⽤了 Object.defineProperty() 来实现双向绑定通过这个函数可以监听到 set 和 get 的事件。
var data { name: yck }
observe(data)
let name data.name // - get value
data.name yyy // - change value
function observe(obj) {
// 判断类型
if (!obj || typeof obj ! object) {
return
}
Object.keys(obj).forEach(key {defineReactive(obj, key, obj[key])
})
}
function defineReactive(obj, key, val) {
// 递归⼦属性
observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log(get value)
return val
},
set: function reactiveSetter(newVal) {
console.log(change value)
val newVal
}
})
}以上代码简单的实现了如何监听数据的 set 和 get 的事件但是仅仅如此是不够的还需要在适当的时候给属性添加发布订阅
div
{{name}}
/div在解析如上模板代码时遇到 就会给属性 name 添加发布订阅。
// 通过 Dep 解耦
class Dep {
constructor() {
this.subs []
}
addSub(sub) {
// sub 是 Watcher 实例
this.subs.push(sub)
}
notify() {
this.subs.forEach(sub {sub.update()
})
}
}
// 全局属性通过该属性配置 Watcher
Dep.target null
function update(value) {
document.querySelector(div).innerText value
}
class Watcher {
constructor(obj, key, cb) {
// 将 Dep.target 指向⾃⼰
// 然后触发属性的 getter 添加监听
// 最后将 Dep.target 置空
Dep.target this
this.cb cb
this.obj obj
this.key key
this.value obj[key]
Dep.target null
}
update() {
// 获得新值
this.value this.obj[this.key]
// 调⽤ update ⽅法更新 Dom
this.cb(this.value)
}
}
var data { name: yck }
observe(data)
// 模拟解析到 {{name}} 触发的操作
new Watcher(data, name, update)
// update Dom innerText
data.name yyy接下来,对 defineReactive 函数进⾏改造
function defineReactive(obj, key, val) {
// 递归⼦属性
observe(val)
let dp new Dep()
Object.defineProperty(obj, key, {enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log(get value)
// 将 Watcher 添加到订阅
if (Dep.target) {
dp.addSub(Dep.target)
}
return val
},
set: function reactiveSetter(newVal) {
console.log(change value)
val newVal
// 执⾏ watcher 的 update ⽅法
dp.notify()
}
})
}以上实现了⼀个简易的双向绑定核⼼思路就是⼿动触发⼀次属性的getter 来实现发布订阅的添加
Proxy 与 Object.defineProperty 对⽐
Object.defineProperty 虽然已经能够实现双向绑定了但是他还是有缺陷的。只能对属性进⾏数据劫持所以需要深度遍历整个对象 对于数组不能监听到数据的变化虽然 Vue 中确实能检测到数组数据的变化但是其实是使⽤了 hack 的办法并且也是有缺陷的。
const arrayProto Array.prototype
export const arrayMethods Object.create(arrayProto)
// hack 以下⼏个函数
const methodsToPatch [
push,
pop,
shift,
unshift,
splice,
sort,
reverse
]
methodsToPatch.forEach(function (method) {
// 获得原⽣函数
const original arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
// 调⽤原⽣函数
const result original.apply(this, args)
const ob this.__ob__
let inserted
switch (method) {
case push:
case unshift:
inserted args
break
case splice:
inserted args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// 触发更新
ob.dep.notify()
return result
})
})反观 Proxy 就没以上的问题原⽣⽀持监听数组变化并且可以直接对整个对象进⾏拦截所以 Vue 也将在下个⼤版本中使⽤ Proxy 替换Object.defineProperty
let onWatch (obj, setBind, getLogger) {
let handler {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {
setBind(value);
return Reflect.set(target, property, value);
}
};
return new Proxy(obj, handler);
};
let obj { a: 1 }
let value
let p onWatch(obj, (v) {
value v
}, (target, property) {
console.log(Get ${property} ${target[property]});
})
p.a 2 // bind value to 2
p.a // - Get a 2
