How do I implement a "remove" method into my script?
I have the JavaScript script / library which is almost working great, except I can't seem to be able to wrap my head around how to add a remove method. For example you'd do something like (jQuery was added just got cleaner, and easier to understand example, but my script doesn't require jQuery):
//Adds a "widget" to the memory
Core.extend('widget',function(m){
$(window).click(function(){ alert(m); });
});
//Actually loads widget, and will alert "hello world" each click on the body
Core.load('widget', 'hello world');
//*SHOULD* make it so that when I click on the window the alert no longer shows
Core.remove('widget');
Here's the code I'm writing
var Core = function(){
var debug = function(m){
console.log(m);
}
var errors = false;
var extensions = {};
var listeners = {};
var extend = function(name,func){
name = name || '';
func = func || function(){};
if(typeof extensions[name] == 'undefined'){
extensions[name] = func;
}
else{
if(errors){
throw new Error('Core extend() error: the extension "'+name+'" already exists');
}
}
}
var load = function(name,params){
nam开发者_运维问答e = name || '';
params = params || '';
if(typeof extensions[name] !== 'undefined'){
extensions[name](params);
}
else{
if(errors){
throw new Error('Core load() error: the extension "'+name+'" doesn\'t exist');
}
}
}
//Sends out a notification to every listener set with this name
var push = function(name, value){
name = name || '';
value = value || '';
if(typeof listeners[name] !== 'undefined'){
listeners[name].call(this,value);
}
else{
if(errors){
throw new Error('Core push() error: the extension "'+name+'" doesn\'t exist');
}
}
}
//Saves a function to the listeners object to be called by push()
var listen = function(name, callback){
name = name || '';
callback = callback || function(){};
listeners[name] = callback;
}
//Removes an extension from being called
var remove = function(name){
name = name || '';
if(typeof extensions[name] !== 'undefined'){
delete extensions[name];
}
else{
if(errors){
throw new Error('Core remove() error: the extension "'+name+'" doesn\'t exist');
}
}
}
return {
extend:extend,
load:load,
remove:remove,
push:push,
listen:listen
}
}();
Example use case:
http://jsbin.com/enopupIn your example, your widget actually attach an event handler for the click event.
Removing your widget from your library object is not enough, since you attached an event listener, you have to remove it.
Unbind
With jQuery you can use the .unbind()
method to remove every event handler attached to a specific element.
This way when you click again it won't do anything.
your problem is that are removing the function from Core but not unbinding the onClick call. I suspect this is being cached in the browser. You can quickly confirm this by adding $(window).unbind('click') after your remove call.
The JS is beyond me but what I would recommend is perhaps a descructor method to unbind any such actions that may be taken.
精彩评论