不說廢話，上菜!
<!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) {
// 創(chuàng)建一個閉包函數(shù)，讓define中的get set函數(shù)引用的都是每次遍歷到的key,
// 不然當(dāng)get set觸發(fā)時獲取到的就是最外層的proxyKey而此時的proxyKey已經(jīng)變成了遍歷的最后一個值
// 因為js中的for是沒有塊級作用域的
void function () {
var proxyKey = "$$" + key;
// 保存原本的值
store.data[proxyKey] = store.data[key];
// 調(diào)用時才觸發(fā)，但是當(dāng)調(diào)用時proxyKey已經(jīng)變成了data里最后一個參數(shù)
// 注意 ！ 在defineProperty的get set方法里千萬不能調(diào)用this.正在define的key 會死循環(huán)??！
var Pkey = key;
Object.defineProperty(store.data, key, {
get: function () {
bindIvar(Pkey, this[proxyKey]);
return this[proxyKey];
},
set: function (val) {
// 不必擔(dān)心每次修改(調(diào)用set)只給proxyKey修改值而沒有給原本key修改值
// key的值是根據(jù)get來定的，也就是說修改了proxyKey的值后原本key調(diào)用get方法時
// 獲取的就是proxyKey,那key的值也就是proxyKey的值了！
// 千萬不能給原本key修改值，那樣就會進行死循環(huán)
this[proxyKey] = val;
bindIvar(Pkey, this[proxyKey]);
}
});
// 觸發(fā)所有屬性的get方法 刷新頁面數(shù)據(jù)
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 = "";
// 捕獲函數(shù)傳入內(nèi)容(實際要考慮兩個括號的情況)
// var regExp = /\(([^\(\)]*)\)/;
var regExp = /\((.*)\)/;
var result = regExp.exec(funcStr);
if (result) {
var param = eval(result[1]);
// 判斷字符串是否為數(shù)字字符串(實際需要判斷是否對象，數(shù)組等等)
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>
如有獻丑,多多包涵,成長的道路一起加油??！
