// 构造app函数
function App(config,$){
this["$"]= $;
for( var i in config ) {
console.log(i);
this[i]= config[i];
}
this["AppInit"]=function(){
// 这里this指向app
let properties = this.data;
for( var i in properties ) {
// +--------------------------------------------------------
// ｜错误的写法,原因匿名函数内部this执行windows
// +--------------------------------------------------------
// ｜(function(){
// ｜ this[ "get" + i ] = function() {
// ｜ return this.data.i;
// ｜ };
// ｜ this[ "set" + i ] = function(val) {
// ｜ this.change(i,val);
// ｜ this.data.i = val;
// ｜ };
// ｜})();
// |console.log(this);
// +--------------------------------------------------------
// +--------------------------------------------------------
// ｜注册getter()和setter()方法
// +--------------------------------------------------------
this.registerGetter(i);
this.registerSetter(i);
};
//挂载mounted到this上
if(this.mounted != undefined){
for( var fun in this.mounted ){
this[fun]= this.mounted[fun];
}
}
};
this["registerGetter"]=function (propertiesName){
this[ "get" +propertiesName ] = function() {
return this.data[propertiesName];
};
};
this["registerSetter"]=function (propertiesName){
this[ "set" + propertiesName ] = function(val) {
this.change(propertiesName,val);
this.data[propertiesName] = val;
};
};
this['change']=function(name,newVale){
// 如果监听这个属性则把两次值传给函数
if(this.watch[name] != undefined){
this.runWatch = this.watch[name].handler;
this.runWatch(newVale,this["get"+name]());
}
// 更新计算属性
// 。。。。
// 更新页面内容
// 。。。。
};
this['runWatch'] =function (){},
this.AppInit();
// 下面可以自定义生命周期函数
if(this['onLoad'] !=undefined ){
this['onLoad']();
}
if(this['run'] != undefined){
this['run']();
}
};
用法
const app = new App({
data:{
"Name":"asd",
"Age":19,
},
watch:{
Group:{
deep:true,
handler:function(newVale,oldValue){
}
}
},
onLoad:function(){
this.setAge(10);
},
mounted:{
},
run:function (){
}, $
});
window.app = app;
