不说废话，上菜!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div v-bind="name" v-click="changeName(Math.max.apply(null,[1,2,3]))" style="padding: 100px"></div>
<div v-bind="age" v-click="changeAge" style="padding: 100px"></div>
</body>
<script>
var store = {
data: {
name: "abc",
age: 0
},
methods: {
changeName: function (val) {
this.data.name = val;
console.log(this.data.name);
},
changeAge: function () {
this.data.age = 10;
console.log(this.data.age);
}
}
};
void function () {
function bindIvar(key, val) {
var eleList = document.querySelectorAll('[v-bind="' + key + '"]');
for (var i = 0; i < eleList.length; i++) {
eleList[i].innerText = val;
}
}
function bindProperty() {
for (var key in store.data) {
// 创建一个闭包函数，让define中的get set函数引用的都是每次遍历到的key,
// 不然当get set触发时获取到的就是最外层的proxyKey而此时的proxyKey已经变成了遍历的最后一个值
// 因为js中的for是没有块级作用域的
void function () {
var proxyKey = "$$" + key;
// 保存原本的值
store.data[proxyKey] = store.data[key];
// 调用时才触发，但是当调用时proxyKey已经变成了data里最后一个参数
// 注意 ！ 在defineProperty的get set方法里千万不能调用this.正在define的key 会死循环！！
var Pkey = key;
Object.defineProperty(store.data, key, {
get: function () {
bindIvar(Pkey, this[proxyKey]);
return this[proxyKey];
},
set: function (val) {
// 不必担心每次修改(调用set)只给proxyKey修改值而没有给原本key修改值
// key的值是根据get来定的，也就是说修改了proxyKey的值后原本key调用get方法时
// 获取的就是proxyKey,那key的值也就是proxyKey的值了！
// 千万不能给原本key修改值，那样就会进行死循环
this[proxyKey] = val;
bindIvar(Pkey, this[proxyKey]);
}
});
// 触发所有属性的get方法 刷新页面数据
store.data[key];
}();
}
}
// 获取绑定的事件方法
function bindEvent(){
var funcNodeList = document.querySelectorAll("[v-click]");
for (var i = 0; i < funcNodeList.length; i++) {
void function () {
var node = funcNodeList[i];
var funcStr = node.getAttribute("v-click");
param = "";
// 捕获函数传入内容(实际要考虑两个括号的情况)
// var regExp = /\(([^\(\)]*)\)/;
var regExp = /\((.*)\)/;
var result = regExp.exec(funcStr);
if (result) {
var param = eval(result[1]);
// 判断字符串是否为数字字符串(实际需要判断是否对象，数组等等)
param = isNaN(+param) ? param : +param;
funcStr = funcStr.substring(0, result.index);
}
var method = store.methods[funcStr];
node.addEventListener("click", function () {
method.call(store, param);
}, false);
}();
}}
bindProperty();
bindEvent();
}();
</script>
</html>
如有献丑,多多包涵,成长的道路一起加油🍻！
网友评论