MVVM框架
MVVM框架
Vue.js
React.js
Angular.js
对MVVM的认识
MVC
Model
View
Controller
MVVM
Model 服务端，数据来源
View 页面
ViewModel 框架，如vue.js，核心
对比
双向绑定
定义
数据驱动页面(data->view)，页面变了也能将js中保存的变量做相应的改变(view->data)，这个过程是自动的。
原理
（data->view）：Object.defineProperty（核心API，目前最新的框架）,可以监听data的变化，然后有个回调函数，在回调函数中做处理
（view->data）：通过input事件，只不过框架执行了我们看不到
Object.defineProperty
MDN
用法
defineProperty.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object.defineProperty</title>
</head>
<body>
<script type="text/javascript">
var obj1 = {};
var descriptor = Object.create(null); // 没有继承的属性
// 默认没有 enumerable，没有 configurable，没有 writable
descriptor.value = 'static';
Object.defineProperty(obj1, 'key', descriptor);
console.log(obj1);
</script>
<script type="text/javascript">
// 显式
var obj2 = {};
Object.defineProperty(obj2, 'key', {
enumerable: true,
configurable: false,
writable: false,
value: 'static',
});
console.log(obj2);
</script>
</body>
</html>
与Reflect.defineProperty的区别
Reflect.defineProperty返回Bool值 ES6
Object.defineProperty返回对象 ES5
手写
useObjectdefineProperty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>双向绑定</title>
</head>
<body>
手写一个简单的双向绑定<br/>
<input type="text" id="model"><br/>
<div id="modelText"></div>
</body>
<script type="text/javascript">
var model = document.querySelector("#model");
var modelText = document.querySelector("#modelText");
var defaultName = "defaultName";
var userInfo = {}
model.value = defaultName;
Object.defineProperty(userInfo, "name", {
get: function () {
return defaultName;
},
set: function (value) {
defaultName = value;
model.value = value;
console.log("-----value");
console.log(value);
modelText.textContent = value;
}
})
userInfo.name = "new value";
var isEnd = true;
model.addEventListener("keyup", function () {
if (isEnd) {
userInfo.name = this.value;
}}, false)
//加入监听中文输入事件
model.addEventListener("compositionstart", function () {
console.log("开始输入中文");
isEnd = false;
})
model.addEventListener("compositionend", function () {
isEnd = true;
console.log("结束输入中文");
})
</script>
</html>
设计模式
即观察者模式
有一个监听者，监听data的变化，通知观察者列表，watcher会更新view
声明周期
Vue生命周期
React生命周期：实例化Mounting、存在期Updating和销毁时Unmounting
