草席两个页面：
<!DOCTYPE html>
<html>
<head>
<title>ideal</title>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{what}}</p>
<p>{{hey}}</p>
</div>
<script>
var bindingMark = ‘data-element-binding‘
function Element (id, initData) {
var self = this,
el = self.el = document.getElementById(id)
bindings = {} //内部暂存绑定数据及dom
data = self.data = {} //存储bingding数据并实现监控
content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)
el.innerHTML = content
for (var variable in bindings) {
bind(variable); //将每个数据的名称比如‘msg‘绑定到data
}
if (initData) {
for (var variable in initData) {
data[variable] = initData[variable]
}
}
function markToken (match, variable) {
bindings[variable] = {} //bindings里存储了数据来源的字段比如bindings[‘msg‘]
return ‘<span ‘ + bindingMark + ‘="‘ + variable +‘"></span>‘
}
function bind (variable) {
bindings[variable].els = el.querySelectorAll(‘[‘ + bindingMark + ‘="‘ + variable + ‘"]‘)//bindings里再存储msg绑定的元素
;[].forEach.call(bindings[variable].els, function (e) { //删除data-element-binding属性
e.removeAttribute(bindingMark)
})
Object.defineProperty(data, variable, { //es5观察属性
set: function (newVal) {
[].forEach.call(bindings[variable].els, function (e) {
bindings[variable].value = e.textContent = newVal //=>这里才是实现的绑定,更新数据到dom并更新内部暂存数据
})
},
get: function () {
return bindings[variable].value //取数据仅仅是内部暂存的数据
}
})
}
}
var app = new Element(‘test‘, {
msg: ‘hello‘,
what: ‘hi‘
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ideal</title>
<meta charset="utf-8">
</head>
<body>
<input class="test" type="text" name="asd" onkeyup ="handleChange()" v-model="hey">
<input class="test" type="" name="" onkeyup ="handleChange()" v-model="msg">
<script>
var bindingMark = ‘data-element-binding‘
function Element (classa, initData) {
var self = this,
el = self.el = document.getElementsByClassName(classa),//多个input改为class
bindings = {}
data = self.data = {}
for (var i = 0; i < el.length; i++) {
content = el[i].outerHTML.replace(/v-model=\"(.*)\"/g, markToken);
el[i].outerHTML = content
}
for (var variable in bindings) {
bind(variable);
}
if (initData) {
for (var variable in initData) {
data[variable] = initData[variable]
}
}
function markToken (match, variable) {
bindings[variable] = {}
return bindingMark + ‘="‘ + variable +‘"‘ //内填一个span变为只改它的元素
}
function bind (variable) {
bindings[variable].els = document.querySelectorAll(‘[‘ + bindingMark + ‘="‘ + variable + ‘"]‘)//document获取binding元素
;
Object.defineProperty(data, variable, {
set: function (newVal) {
[].forEach.call(bindings[variable].els, function (e) {
bindings[variable].value = e.value = newVal //=>textContent改为input的value
})
},
get: function () {
return bindings[variable].value
}
})
}
}
var app = new Element(‘test‘, {
msg: ‘hello‘,
hey:‘aaa‘
})
function handleChange(e){ //增加v=>m的绑定
e = e || window.event
var key = e.target.outerHTML.match(/data-element-binding=\"(.*)\"/)[1];
data[key] = e.target.value
console.log(data.hey,data.msg);
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/luohaonan/p/9964161.html
时间： 2024-08-08 04:14:07