...

View Full Version : Help With Javascript Library



DJCMBear
07-20-2010, 10:41 AM
Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does.

For example jQuery allows you to write a string like this:
$('li').add('p').css('background-color', 'red');

Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions.

Right now its a very small code because I started again to allow better overview of where things are but this is it so far.

This allows the use of both SDK and $ at the start of the function for example.
$.Display({'file':'index.php','id':'divid'});
And
SDK.Display({'file':'index.php','id':'divid'});



(function(window)
{
var $ = {
Display: function(info)
{
this.call(info.file,info.id,'file='+info.file);
},
call: function(file,id,parameters)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",file,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send(parameters)
},
Flash: function(params)
{
if(params.file){alert(params.file);}
if(params.id){alert(params.id);}
}
};

// Expose SDK to the global object
window.SDK = window.$ = $;

})(window);

Dormilich
07-20-2010, 12:09 PM
wouldn’t it be easier to use jQuery and only write some additional plugins?

DJCMBear
07-20-2010, 12:41 PM
No as my library is specific to my site I have contacted John Resig the founder of jQuery as well as posting on here I just want to know how I can create a library which flows where you can call more than one function in the same string like with jQuery you can have this in a string fadeOut('slow').load('file.html').fadeIn('fast'); which consists of more than one library function as in flowing through.

Dormilich
07-20-2010, 12:44 PM
I just want to know how I can create a library which flows where you can call more than one function in the same string like with jQuery you can have this in a string fadeOut('slow').load('file.html').fadeIn('fast'); which consists of more than one library function as in flowing through.

that’s pretty easy. it’s called "chaining" and all you need to do is returning the current instance, i.e. return this; (you could also return the Object by name, if it is already defined)

DJCMBear
07-20-2010, 12:49 PM
so like jQuery I need a function inside the current function which states return new SDK()?

Dormilich
07-20-2010, 12:51 PM
return $;
// or
return this; there is no need to create a new instance (which would contradict your initialization)

DJCMBear
07-20-2010, 12:55 PM
isn't that what this does?


// Expose SDK to the global object
window.SDK = window.$ = $;

Dormilich
07-20-2010, 01:01 PM
we must be talking of something different.

if you want to do chaining, every function that is capable of chaining must return the current object’s instance.

little example:

var x = {
a: function() { alert(1); return this; },
b: function() { alert(2); return this; },
c: function() { alert(3); return this; }
};

x.a().c().b();

DJCMBear
07-20-2010, 01:06 PM
So a little like this?


(function(window)
{
var SDK = {
Display: function(info)
{
this.call(info.file,info.id,'file='+info.file);
return this;
},
call: function(file,id,parameters)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",file,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send(parameters)
return this;
},
Flash: function(params)
{
if(params.file){alert(params.file);}
if(params.id){alert(params.id);}
return this;
}
};

// Expose SDK to the global object
window.SDK = window.$ = SDK;
})(window);

Dormilich
07-20-2010, 01:28 PM
looks promising.

DJCMBear
07-20-2010, 02:06 PM
Yes it's working now Thank you =)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum