wardbell/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title >Observer Fun</title>
</head>
<body>
<h1>Ta Da!</h1>
<div>
</div>
<script src="observer.js"></script>
<script>

var limit = 1000000;
var isSplicer = true;

for (var i = 0; i < 6; i++) {
    if (isSplicer) {
        runSplicer(limit);
        isSplicer = false;
    } else {
       runNuller(limit);
       isSplicer = true;
    }
}
var doneEl = document.createElement('div');
doneEl.innerHTML = 'done!';
document.body.appendChild(doneEl);
/////////////////////////////////////////
function runSplicer(limit){
    var observer = new Splicer({});
    var firstUnsubscribe = observer.subscribe('first', function() {
            // console.log('first event ');
    });

    var count = 0;
    console.log("==Splicer start");
    for (var i = 0; i<limit; i++){
        doit();
    }
    firstUnsubscribe();
    console.log("==Splicer done, iter="+i);


    function doit() {
        count++;
        var unsubscribe = observer.subscribe('splicer', function() {
            //console.log('splicer event '+count);
        });
        observer.subscription('splicer');
        unsubscribe();
    }
}

function runNuller(limit){
    var observer = new Nuller({});
    var firstUnsubscribe = observer.subscribe('first', function() {
            // console.log('first event ');
    });

    var count = 0;
    console.log("==Nuller start");
    for (var i = 0; i<limit; i++){
        doit();
    }
    firstUnsubscribe();
    console.log("==Nuller done, iter="+i);


    function doit() {
        count++;
        var unsubscribe = observer.subscribe('nuller', function() {
            //console.log('Nuller event '+count);
        });
        observer.subscription('nuller');
        unsubscribe();
    }
}
</script>
</body>
</html>

## observer.js

  function Splicer(obj){
    this.obj = obj;
    this.observers = {};
    this.callbacks = {};
    this.callbackCount = 0;
  }
  Splicer.prototype = {
    constructor: Splicer,
    subscribe: subscribeSplice,
    unsubscribe: unsubscribeSplice
  }

  function subscribeSplice(propertyName, callback){
    var callbacks = this.callbacks[propertyName];
    if (!callbacks) {
      this.callbacks[propertyName] = [callback];
    } else if (callbacks.indexOf(callback) === -1) {
      callbacks.push(callback);
    } else {
      return; // already registered; ignore.
    }

    if (this.callbackCount === 0) {
      //  this.subscription = this.obj.entityAspect.propertyChanged.subscribe(this.handleChanges.bind(this));
      this.subscription = handleChangesSplice.bind(this);
    }

    this.callbackCount += 1;

    return this.unsubscribe.bind(this, propertyName, callback);
  }

  function unsubscribeSplice(propertyName, callback) {
    var callbacks = this.callbacks[propertyName];
    if (!callbacks) { return; }   // no subscriptions for this property; ignore.
    var index = callbacks.indexOf(callback);
    if (index === -1) { return; } // this callback was not found; ignore.
    callbacks.splice(index, 1);
    this.callbackCount -= 1;
    if (this.callbackCount === 0) {
      //      this.obj.entityAspect.propertyChanged.unsubscribe(this.subscription);
      this.subscription = function() {};
      this.callbacks={};
    }
  }

  function handleChangesSplice(propertyName) {
    var callbacks=this.callbacks[propertyName];
    if (!callbacks) return;
    for (var i = 0, ii = callbacks.length; i < ii; i++) {
      callbacks[i]();
    }
  }
 //////////////
  function Nuller(obj){
    this.obj = obj;
    this.observers = {};
    this.callbacks = {};
    this.callbackCount = 0;
  }
  Nuller.prototype = {
    constructor: Nuller,
    subscribe: subscribeNull,
    unsubscribe: unsubscribeNull
  }

  function subscribeNull(propertyName, callback){
    var callbacks = this.callbacks[propertyName];
    if (!callbacks) {
      this.callbacks[propertyName] = [callback];
    } else if (callbacks.indexOf(callback) === -1) {
      var ix = callbacks.indexOf(null);
      if (ix === -1) {
        callbacks.push(callback);
      } else {
        callbacks[ix]=callback;
      }
    } else {
      return; // already registered; ignore.
    }

    if (this.callbackCount === 0) {
      //  this.subscription = this.obj.entityAspect.propertyChanged.subscribe(this.handleChanges.bind(this));
      this.subscription = handleChangesNull.bind(this);
    }

    this.callbackCount += 1;

    return this.unsubscribe.bind(this, propertyName, callback);
  }

  function unsubscribeNull(propertyName, callback) {
    var callbacks = this.callbacks[propertyName];
    if (!callbacks) return;
    var index = callbacks.indexOf(callback);
    if (index === -1) return;
    callbacks[index] = null;
    this.callbackCount -= 1;
    if (this.callbackCount === 0) {
      //      this.obj.entityAspect.propertyChanged.unsubscribe(this.subscription);
      this.subscription = function() {};
      this.callbacks={};
    }
  }

  function handleChangesNull(propertyName) {
    var callbacks=this.callbacks[propertyName];
    if (!callbacks) return;
    for (var i = 0, ii = callbacks.length; i < ii; i++) {
      callbacks[i] && callbacks[i]();
    }
  }

  /////////////////////////
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title >Observer Fun</title>
	</head>
	<body>
	<h1>Ta Da!</h1>
	<div>
	</div>
	<script src="observer.js"></script>
	<script>

	var limit = 1000000;
	var isSplicer = true;

	for (var i = 0; i < 6; i++) {
	if (isSplicer) {
	runSplicer(limit);
	isSplicer = false;
	} else {
	runNuller(limit);
	isSplicer = true;
	}
	}
	var doneEl = document.createElement('div');
	doneEl.innerHTML = 'done!';
	document.body.appendChild(doneEl);
	/////////////////////////////////////////
	function runSplicer(limit){
	var observer = new Splicer({});
	var firstUnsubscribe = observer.subscribe('first', function() {
	// console.log('first event ');
	});

	var count = 0;
	console.log("==Splicer start");
	for (var i = 0; i<limit; i++){
	doit();
	}
	firstUnsubscribe();
	console.log("==Splicer done, iter="+i);


	function doit() {
	count++;
	var unsubscribe = observer.subscribe('splicer', function() {
	//console.log('splicer event '+count);
	});
	observer.subscription('splicer');
	unsubscribe();
	}
	}

	function runNuller(limit){
	var observer = new Nuller({});
	var firstUnsubscribe = observer.subscribe('first', function() {
	// console.log('first event ');
	});

	var count = 0;
	console.log("==Nuller start");
	for (var i = 0; i<limit; i++){
	doit();
	}
	firstUnsubscribe();
	console.log("==Nuller done, iter="+i);


	function doit() {
	count++;
	var unsubscribe = observer.subscribe('nuller', function() {
	//console.log('Nuller event '+count);
	});
	observer.subscription('nuller');
	unsubscribe();
	}
	}
	</script>
	</body>
	</html>

	function Splicer(obj){
	this.obj = obj;
	this.observers = {};
	this.callbacks = {};
	this.callbackCount = 0;
	}
	Splicer.prototype = {
	constructor: Splicer,
	subscribe: subscribeSplice,
	unsubscribe: unsubscribeSplice
	}

	function subscribeSplice(propertyName, callback){
	var callbacks = this.callbacks[propertyName];
	if (!callbacks) {
	this.callbacks[propertyName] = [callback];
	} else if (callbacks.indexOf(callback) === -1) {
	callbacks.push(callback);
	} else {
	return; // already registered; ignore.
	}

	if (this.callbackCount === 0) {
	// this.subscription = this.obj.entityAspect.propertyChanged.subscribe(this.handleChanges.bind(this));
	this.subscription = handleChangesSplice.bind(this);
	}

	this.callbackCount += 1;

	return this.unsubscribe.bind(this, propertyName, callback);
	}

	function unsubscribeSplice(propertyName, callback) {
	var callbacks = this.callbacks[propertyName];
	if (!callbacks) { return; } // no subscriptions for this property; ignore.
	var index = callbacks.indexOf(callback);
	if (index === -1) { return; } // this callback was not found; ignore.
	callbacks.splice(index, 1);
	this.callbackCount -= 1;
	if (this.callbackCount === 0) {
	// this.obj.entityAspect.propertyChanged.unsubscribe(this.subscription);
	this.subscription = function() {};
	this.callbacks={};
	}
	}

	function handleChangesSplice(propertyName) {
	var callbacks=this.callbacks[propertyName];
	if (!callbacks) return;
	for (var i = 0, ii = callbacks.length; i < ii; i++) {
	callbacks[i]();
	}
	}
	//////////////
	function Nuller(obj){
	this.obj = obj;
	this.observers = {};
	this.callbacks = {};
	this.callbackCount = 0;
	}
	Nuller.prototype = {
	constructor: Nuller,
	subscribe: subscribeNull,
	unsubscribe: unsubscribeNull
	}

	function subscribeNull(propertyName, callback){
	var callbacks = this.callbacks[propertyName];
	if (!callbacks) {
	this.callbacks[propertyName] = [callback];
	} else if (callbacks.indexOf(callback) === -1) {
	var ix = callbacks.indexOf(null);
	if (ix === -1) {
	callbacks.push(callback);
	} else {
	callbacks[ix]=callback;
	}
	} else {
	return; // already registered; ignore.
	}

	if (this.callbackCount === 0) {
	// this.subscription = this.obj.entityAspect.propertyChanged.subscribe(this.handleChanges.bind(this));
	this.subscription = handleChangesNull.bind(this);
	}

	this.callbackCount += 1;

	return this.unsubscribe.bind(this, propertyName, callback);
	}

	function unsubscribeNull(propertyName, callback) {
	var callbacks = this.callbacks[propertyName];
	if (!callbacks) return;
	var index = callbacks.indexOf(callback);
	if (index === -1) return;
	callbacks[index] = null;
	this.callbackCount -= 1;
	if (this.callbackCount === 0) {
	// this.obj.entityAspect.propertyChanged.unsubscribe(this.subscription);
	this.subscription = function() {};
	this.callbacks={};
	}
	}

	function handleChangesNull(propertyName) {
	var callbacks=this.callbacks[propertyName];
	if (!callbacks) return;
	for (var i = 0, ii = callbacks.length; i < ii; i++) {
	callbacks[i] && callbacks[i]();
	}
	}

	/////////////////////////