标签：sof dde 包含 put des define 对象 children attribute
<body>
<input type="text" id="txt">
<p id="msg"></p>
</body>
var obj = {message:"mvvm-demo"}
var oTxt = document.getElementById("txt");
var oMsg = document.getElementById("msg");
Object.defineProperty(obj,"message",{
configurable:true,
enumerable:true,
set:function(newStr){
oMsg.innerText = newStr;
}
})
oTxt.addEventListener("input",function(){
obj.message = oTxt.value;
})
实现效果图如下
接下来我们来模拟一下vue中MVVM底层原理
结构层代码
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
<input type="text" v-model="name">
<p>{{name}}</p>
</div>
</body>
行为层代码
function Vue(options){
this.el = document.querySelector(options.el);
this.data = options.data;
//是数据层和view之间的一个映射关系这里面存放这个需要双数据绑定的元素和当前元素的一些特征
this.viewModel = {};
this.init(this.data);
this.eventType(this.el);
}
Vue.prototype = {
constructor:Vue,
init:function(obj){
var _this = this;
Object.keys(obj).forEach(function(key){
var value = obj[key];
//将当前key值作用的元素一些特征保存在这个数组里面
_this.viewModel[key] = {
_directive:[]
}
console.log(_this.viewModel)
Object.defineProperty(obj,key,{
configurable:true,
enumerable:true,
get:function(){
return value;
},
set:function(newValue){
if(newValue!=value){
value = newValue;
//数据更新
_this.viewModel[key]._directive.forEach(function(item){
item.update();
})
}
}
})
})
},
eventType:function(root){
var childs = root.children;
var _this = this;
for(var i=0;i<childs.length;i++){
if(childs[i].hasAttribute("v-model") && childs[i].tagName == "INPUT"){
childs[i].addEventListener("input",(function(i){
var attr = childs[i].getAttribute("v-model");
_this.viewModel[attr]._directive.push(new watch(
childs[i].tagName,
"value",
childs[i],
_this,
attr
))
return function(){
//vm.data.message =
_this.data[attr] = childs[i].value;
}
})(i))
}
if(childs[i].innerText.replace(/\{\{|\}\}/g,"")){
var dataAttr = childs[i].innerText.replace(/\{\{|\}\}/g,"");
_this.viewModel[dataAttr]._directive.push(new watch(
childs[i].tagName,
"innerText",
childs[i],
_this,
dataAttr
))
}
}
}
}
//更新数据的方法 标签的名称 当前元素 当前元素的属性 vue的实例 data属性
function watch(name,exp,el,vm,attr){
this.name = name;
this.exp = exp;
this.el = el;
this.vm = vm;
this.attr = attr;
this.update();
}
watch.prototype.update = function(){
this.el[this.exp] = this.vm.data[this.attr];
}
var vm = new Vue({
el:"#app",
data:{
message:"demo",
name:"mvvm"
}
})
效果实现图如下
Object.defineProperty（） 以及 vue 中双数据绑定的底层原理
标签：sof dde 包含 put des define 对象 children attribute
原文地址：https://www.cnblogs.com/w-819/p/9747314.html
