hytzgroup
commented
4 years ago Open hytzgroup opened 4 years ago
hytzgroup
commented
4 years ago hytzgroup
commented
4 years ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Demo</title>
</head>
<body>
<div id="test">
<example></example>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
Vue.component('example', {
template: '<span>{{ message }}{{age}}</span>',
data: function(){
return {
message: '未更新',
age:18
}
}
})
new Vue({ el: '#test' });
/**
watcher 观察者 observer
class Watcher{
update(data){
return "<span>"+data.message+"</span>"
}
}
class Subject{
messageState = new WatcherList();
addMessage(watcher){
this.messageState.add(watcher);
}
notifyMessage(data){
this.messageState.notify(data);
}
removeMessage(watcher){
this.messageState.remove(watcher);
}
ageState = new WatcherList();
addAgeState(watcher){
this.ageState.add(watcher);
}
notifyAgeState(data){
this.ageState.notify(data)
}
removeAgeState(watcher){
this.ageState.remove(watcher);
}
}
class WatcherList{
state = [];
add(watcher){
this.state.push(watcher)
}
remove(watcher){
this.state.splice(index,1);
}
notify(data){
oneItem.update(data)
}
}
function DataBinder(obj,watcher){
var messageWatcher = new WatcherList();
var ageWatcher = new WatcherList();
var cache = {
message:'未更新',
watchMessage:function(watcher){
messageWatcher.add(watcher);
},
getMessage:function(){
return this.message;
},
setMessage:function(newValue){
this.message = newValue;
messageWatcher.notify(newValue);
},
age:18,
watcheAge:function(watcher){
ageWatcher.add(watcher);
},
getAge:function(){
return this.age;
},
setAge:function(newValue){
this.age = newValue;
ageWatcher.notify(newValue);
}
};
return cache;
function WatcherList(){
this.state = [];
this.add = function(){}
this.remove = function(){}
this.notify = function(){}
}
}
var vm = new DataBinder({messag:'未更新',age:18});
vm.message = "已更新！！！";
*/
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Demo</title>
</head>
<body>
<div id="test">
<example></example>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
Vue.component('example', {
template: '<span>{{ message }}{{age}}</span>',
data: function(){
return {
message: '未更新',
age:18
}
}
})
new Vue({ el: '#test' });
/**
watcher 观察者 observer
class Watcher{
update(data){
return "<span>"+data.message+"</span>"
}
}
class Subject{
messageState = new WatcherList();
addMessage(watcher){
this.messageState.add(watcher);
}
notifyMessage(data){
this.messageState.notify(data);
}
removeMessage(watcher){
this.messageState.remove(watcher);
}
ageState = new WatcherList();
addAgeState(watcher){
this.ageState.add(watcher);
}
notifyAgeState(data){
this.ageState.notify(data)
}
removeAgeState(watcher){
this.ageState.remove(watcher);
}
}
class WatcherList{
state = [];
add(watcher){
this.state.push(watcher)
}
remove(watcher){
this.state.splice(index,1);
}
notify(data){
oneItem.update(data)
}
}
function DataBinder(obj){
var wathers = {};
var cache = {
watch:watcher,
get:function(name){
return this[name]
},
set:function(name,value){
var oldValue = this[name];
this[name] = value;
wathers[name].notify(name,oldValue,value);
}
};
extend(cache,obj);
return cache;
function extend(target,dest){
for(var m in dest){
if(!target[m]){
target[m] = dest[m];
}
}
}
function watcher(type,watcher){
if(!wathers[type]){
wathers[type] = new WatcherList();
}
wathers[type].push(watcher);
}
function WatcherList(){
this.state = [];
this.add = function(){}
this.remove = function(){}
this.notify = function(){}
}
}
var vm = new DataBinder({message:'未更新',age:18});
var unwatchMsg = vm.watch('message',function(newValue,oldValue){});
var unwatchAge = vm.watch('age',function(newValue,oldValue){});
vm.setMessage('message','xxxxx');
vm.setAge('age',18)
unwatchMsg();
unwatchAge();
*/
</script>
<script type="text/javascript">
function DataBinder(obj){
var wathers = {};
var cache = {
watch:watcher,
get:function(name){
return this[name]
},
set:function(name,value){
var oldValue = this[name];
this[name] = value;
wathers[name].notify(name,oldValue,value);
}
};
extend(cache,obj);
return cache;
function extend(target,dest){
for(var m in dest){
if(!target[m]){
target[m] = dest[m];
}
}
}
function watcher(type,watcher){
if(!wathers[type]){
wathers[type] = new WatcherList();
}
wathers[type].state.push(watcher);
}
function WatcherList(){
this.state = [];
this.add = function(){}
this.remove = function(){}
this.notify = function(name,oldValue,value){
var list = wathers[name]?wathers[name].state:[];
for(var i = 0, len = list.length; i < len; i++){
list[i](name,oldValue,value);
}
}
}
}
var s = new DataBinder({message:'xxx',age:18});
var unwatch = s.watch('message',function(name,oldValue,newValue){
console.log('xxxx--->>>',name,oldValue,newValue);
});
s.set('message','aaaa');
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Demo</title>
</head>
<body>
<div id="test">
<example></example>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
Vue.component('example', {
template: '<span>{{ message }}{{age}}</span>',
data: function(){
return {
message: '未更新',
age:18
}
}
})
new Vue({ el: '#test' });
/**
watcher 观察者 observer
class Watcher{
update(data){
return "<span>"+data.message+"</span>"
}
}
class Subject{
messageState = new WatcherList();
addMessage(watcher){
this.messageState.add(watcher);
}
notifyMessage(data){
this.messageState.notify(data);
}
removeMessage(watcher){
this.messageState.remove(watcher);
}
ageState = new WatcherList();
addAgeState(watcher){
this.ageState.add(watcher);
}
notifyAgeState(data){
this.ageState.notify(data)
}
removeAgeState(watcher){
this.ageState.remove(watcher);
}
}
class WatcherList{
state = [];
add(watcher){
this.state.push(watcher)
}
remove(watcher){
this.state.splice(index,1);
}
notify(data){
oneItem.update(data)
}
}
function DataBinder(obj){
var wathers = {};
var cache = {
watch:watcher,
get:function(name){
return this[name]
},
set:function(name,value){
var oldValue = this[name];
this[name] = value;
wathers[name].notify(name,oldValue,value);
}
};
extend(cache,obj);
return cache;
function extend(target,dest){
for(var m in dest){
if(!target[m]){
target[m] = dest[m];
}
}
}
function watcher(type,watcher){
if(!wathers[type]){
wathers[type] = new WatcherList();
}
wathers[type].push(watcher);
}
function WatcherList(){
this.state = [];
this.add = function(){}
this.remove = function(){}
this.notify = function(){}
}
}
var vm = new DataBinder({message:'未更新',age:18});
var unwatchMsg = vm.watch('message',function(newValue,oldValue){});
var unwatchAge = vm.watch('age',function(newValue,oldValue){});
vm.setMessage('message','xxxxx');
vm.setAge('age',18)
unwatchMsg();
unwatchAge();
*/
</script>
<script type="text/javascript">
function DataBinder(obj){
var wathers = {};
var cache = {
watch:watcher2,
// watch:watcher,
get:function(name){
return this[name]
},
set:function(name,value){
var oldValue = this[name];
this[name] = value;
//wathers[name].notify(name,oldValue,value);
if(this._watchCallbacks){
this._watchCallbacks(name,oldValue,value);
}
}
};
extend(cache,obj);
return cache;
function extend(target,dest){
for(var m in dest){
if(!target[m]){
target[m] = dest[m];
}
}
}
function watcher2(name,wcb){
var callbacks = this._watchCallbacks = function(n,ov,nv){
var execute = function(cbs){
if(cbs&&cbs.length > 0){
for(var i = 0, len = cbs.length; i < len; i++){
cbs[i](n,ov,nv)
}
}
}
execute(callbacks[name]);
}
callbacks[name] = callbacks[name]? callbacks[name]:[];
callbacks[name].push(wcb);
return function remove(){
var index = callbacks[name].indexof(wcb);
if(index > -1){
callbacks[name].splice(index,1);
}
}
}
function watcher(type,watcher){
if(!wathers[type]){
wathers[type] = new WatcherList();
}
wathers[type].state.push(watcher);
}
function WatcherList(){
this.state = [];
this.add = function(){}
this.remove = function(){}
this.notify = function(name,oldValue,value){
var list = wathers[name]?wathers[name].state:[];
for(var i = 0, len = list.length; i < len; i++){
list[i](name,oldValue,value);
}
}
}
}
var s = new DataBinder({message:'xxx',age:18});
var unwatch = s.watch('message',function(name,oldValue,newValue){
console.log('xxxx--->>>',name,oldValue,newValue);
});
s.set('message','aaaa');
</script>
</body>
</html>