Object.defineProperty Introduction -
the let obj = {};
Object.defineProperty(obj,'school',{
the Configurable: to true , // attributes can be deleted
// Writable: to true, // attributes can be modified
Enumerable: to true , // property can enumerate
// value: 'zfpx', // set property values
set: function (value) {
the console.log (value); // time obj.school assignment, call set () method
},
GET: function () {
return 'zfpx'; // get values obj.school, call the get () method
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<p>{{a.a}}</p>
<div>{{b}}
<div>{{b}}</div>
</div>
</div>
</body>
<-! MVVM two-way data binding
vue data hijacking + publish and subscribe model
It is not compatible with earlier versions Object.defineProperty ->
<script>
( Function (window, Document) {
function the ZF (Options = {}) {
the this $ = Options Options;. // all attributes mount the Options $
the let Data = the this ._data = the this $ options.data.;
the this .observe (data);
for (the let Key in data) { // the attribute data is defined by way Object.defineProperty attribute
// data agent
// the this agent the this._data
Object.defineProperty ( the this , Key, {
enumerable : true, // 可枚举
get: function(){
return this._data[key];
},
SET: function (newVal) { // when value changes
the this ._data [Key] = newVal;
}
});
}
this.Compile(options.el,this);
}
// 编译
ZF.prototype.Compile = function(el,vm){
$ vm the. = document.querySelector (the);
the fragment the let = document.createDocumentFragment ();
the while (. Child = $ el.firstChild VM) { // content of the app into memory
fragment.appendChild (child);
}
// cycle each layer
Array.from (fragment.childNodes) .forEach ( function (Node) {
let text = node.textContent;
let reg = /\{\{(.*)\}\}/;
if( reg.test(text)){
let arr = RegExp.$1.split('.');
let val = vm;
console.log(node.childNodes)
console.log(arr)
arr.forEach(function(k){
val = val[k];
})
// Alternatively
node.textContent = text.replace (/\{\{(.*)\}\}/ , Val)
}
//node.textContent.textContent(12)
})
vm.$el.appendChild(fragment);
}
// observation object to the object increases ObjectDefineProperty;
ZF.prototype.observe = function (Data) {
// the console.log (Data)
return new new Observe (Data);
}
function Observe (data) {
for (the let Key in data) { // the attribute data attributes defined by way Object.defineProperty
the let Val = data [Key];
// recursive
IF ( typeof Val === 'Object' ) {
Observe(val);
}
Object.defineProperty(data,key,{
Enumerable: to true , // enumerable
GET: function () {
return Val;
},
// data hijacking
SET: function (newVal) { // when the change in value
IF (newVal === Val) {
return ;
}
if(typeof newVal === 'object'){
Observe(newVal);
}
val = newVal; //
}
});
}
}
window.ZF = ZF;
})(window,document);
let zf = new ZF({
el : "#app",
Data: {A: {A: 'is a'}, b: 'is B' },
})
</script>
</html>