presentazione
This commit is contained in:
parent
db90563fd9
commit
1077e5ece9
2 changed files with 0 additions and 197 deletions
|
|
@ -1,92 +0,0 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
div{
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Subject: <input type="text" name="subject"> <br>
|
||||
Observer:
|
||||
<div id="observer1"></div>
|
||||
<div id="observer2"></div>
|
||||
<div id="observer3"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function ObserverList(){
|
||||
this.observerlist = [];
|
||||
}
|
||||
|
||||
ObserverList.prototype.add = function(obj){
|
||||
this.observerlist.push(obj);
|
||||
};
|
||||
ObserverList.prototype.count = function(){
|
||||
return this.observerlist.length;
|
||||
};
|
||||
ObserverList.prototype.remove = function(index){
|
||||
this.observerlist.splice(index,1);
|
||||
};
|
||||
ObserverList.prototype.indexOf = function(obj){
|
||||
for (var i = 0; i < this.observerlist.length; i+=1) {
|
||||
if (this.observerlist[i]===obj) {
|
||||
return i;
|
||||
}
|
||||
|
||||
};
|
||||
ObserverList.prototype.getObj = function(index){
|
||||
return this.observerlist[index];
|
||||
};
|
||||
|
||||
/*subject interface*/
|
||||
function ISubject(){
|
||||
this.Observers = new ObserverList();
|
||||
};
|
||||
|
||||
ISubject.prototype.addObserver = function(observer){
|
||||
this.Observers.add(observer);
|
||||
};
|
||||
|
||||
ISubject.prototype.removeObserver = function(observer){
|
||||
this.Observers.remove(this.Observers.indexOf(observer));
|
||||
};
|
||||
|
||||
ISubject.prototype.notify = function(ctx){
|
||||
for (var i = 0; i < this.Observers.count(); i+=1) {
|
||||
this.Observers.getObj(i).update(ctx);
|
||||
}
|
||||
};
|
||||
|
||||
/*observer interface*/
|
||||
function IObserver(){}
|
||||
IObserver.prototype.update = function(val){
|
||||
|
||||
};
|
||||
|
||||
var extend = function (obj,extension){
|
||||
for (var k in extension) {
|
||||
obj[k] = extension[k]
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function(){
|
||||
extend(subject, new IObserver());
|
||||
extend(observer1, new IObserver());
|
||||
extend(observer2, new IObserver());
|
||||
extend(observer3, new IObserver());
|
||||
subject.addEventListener('keyup', function(){
|
||||
this.notify(this.value);
|
||||
},false);
|
||||
sub
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
observerEx.html
105
observerEx.html
|
|
@ -1,105 +0,0 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function ObserverList() {
|
||||
this.observerList = [];
|
||||
}
|
||||
ObserverList.prototype.add = function(observer) {
|
||||
this.observerList.push(observer);
|
||||
}
|
||||
ObserverList.prototype.remove = function(observer){
|
||||
this.observerList.splice(this.indexOf(observer),1);
|
||||
};
|
||||
ObserverList.prototype.count = function() {
|
||||
return this.observerList.length;
|
||||
};
|
||||
ObserverList.prototype.indexOf = function(observer) {
|
||||
var i;
|
||||
for (var i = 0; i < this.observerList.length; i++) {
|
||||
if (this.observerList[i] === observer) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
ObserverList.prototype.getObserver = function(index) {
|
||||
return this.observerList[index];
|
||||
};
|
||||
/*Subject*/
|
||||
function Subject() {
|
||||
this.observers = new ObserverList();
|
||||
}
|
||||
Subject.prototype.addObserver = function(obj) {
|
||||
this.observers.add(obj);
|
||||
};
|
||||
Subject.prototype.removeObserver = function(obj) {
|
||||
this.observers.remove(obj);
|
||||
};
|
||||
Subject.prototype.notify = function(ctx) {
|
||||
var i;
|
||||
for (i = 0; i < this.observers.count(); i++) {
|
||||
this.observers.getObserver(i).update(ctx);
|
||||
}
|
||||
};
|
||||
|
||||
/*Observer*/
|
||||
function Observer(){
|
||||
this.update = function(){
|
||||
/*best implemented in the concrete type*/
|
||||
}
|
||||
}
|
||||
/*estendere gli oggetti con la nuova funzionalita'*/
|
||||
var extend = function(obj, interface){
|
||||
var k;
|
||||
for( k in interface){
|
||||
obj[k] = interface[k];
|
||||
}
|
||||
}
|
||||
window.onload = function() {
|
||||
extend(subject, new Subject());
|
||||
extend(observer1,new Observer());
|
||||
extend(observer2,new Observer());
|
||||
extend(observer3,new Observer());
|
||||
subject.addObserver(observer1);
|
||||
subject.addObserver(observer2);
|
||||
subject.addObserver(observer3);
|
||||
subject.addEventListener('keyup',function(){
|
||||
this.notify(this.value);
|
||||
},false);
|
||||
observer1.update = function(val){
|
||||
this.innerHTML = val;
|
||||
}
|
||||
observer2.update = function(val){
|
||||
this.innerHTML = val;
|
||||
}
|
||||
observer3.update = function(val){
|
||||
this.innerHTML = val;
|
||||
}
|
||||
window.setTimeout(function(){
|
||||
subject.removeObserver(observer3);
|
||||
},4000);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
subject:
|
||||
<input type="text" id="subject">
|
||||
<br> observers:
|
||||
<div id="observer1"></div>
|
||||
<div id="observer2"></div>
|
||||
<div id="observer3"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue