ansaurus

Question

passing javascript object to function in a jquery way?

Answer 1

+1 A:

You need to create a Prototype in javascript. This is what allows you to add a function to an object that's already defined (i.e. the .click() function that you gave as an example).

You can have a look at the jQuery code, it's open source. It's not the simplest code, but you can still see how it works and how they do it.

Hugo Migneron 2010-06-23 19:51:23

Answer 2

+1 A:

Mike's comment is a good answer: Look at jquery or Ext-Core's sources.

Maybe what you're missing is that, in jquery, for instance $() returns a jquery object, which wraps the plain vanilla DOM node, providing extended functionality.

timdev 2010-06-23 19:52:46

Yes, and the `click` and other jQuery functions are part of the jQuery object, rather than the HTML element object. Use a debugger like Firebug or Web Inspector, and look at what the `$()` function returns, if youre interested.

digitalFresh 2010-06-23 19:55:41

Answer 3

+1 A:

jQuery and other libraries define a function called $ that takes several optional parameters. The object returned by calling $ is not a DOM element, but a jQuery object wrapping a DOM element up with a set of convenient functions.

You can do something similar yourself:

<html>
   <body>
      <input id="derp" type="text"/>
<script type="text/javascript">

function $(id)
{
   return new myLibrary(id);
};

function myLibrary(id)
{
   this.el = document.getElementById(id);
};

myLibrary.prototype.help = function()
{
   alert(this.el.id);
   return this;
};

// Woah! My own fake jquery!
$("derp").help();
</script>

   </body>
</html>

jQuery is far more sophisticated, of course. For example, it will use apply and call to set this correctly in calls like jQuery.each.

Jonathon 2010-06-23 19:52:52

Answer 4

A:

In jQuery, $ is just an alias to the jQuery object. So when you call $('#mydiv'); you're really calling a function like jQuery('#mydiv'); So part of what makes jQuery so cool is that every the $() function returns this, which means when you call the $() you're getting a handle to the jQuery object and all of the methods it has on it. That is what allows you to do something like this:

var a = $('#mydiv');
a.click(function() { // etc etc etc });

So to pull off your example:

var mydiv = document.querySelector('mydiv');
mydiv.neph(args,args);

You'd have to create an object that has a function called neph on it and return that object in the context of mydiv when you call querySelector.

var myFramework = function() {
  this.context = undefined;
  this.neph = function(arg, args) {
    console.log(arg, args);
  }
};

var myCuteFunction = function(element) {
  var f = new myFramework();
  f.context = element;
  return f;
}

// ...

var x = myCuteFunction('#mydiv');
x.neph(arg, args);

Hooray Im Helping 2010-06-23 19:59:07

Ah yeah that makes sense, actually quite easy once you see it clearly :D but the jquery code has a bunch of stuff not exactly easy felt like searching for a needle in a haystack

neph 2010-06-23 20:44:16

Answer 5

A:

Since nobody has really answered about Ext, you can easily extend the element wrapper prototype:

Ext.override(Ext.Element, {
    myMethod: function(a, b){
        console.log(a, b, this);
    }

});

"this" will refer to the Ext.Element object.

Evan Trimboli 2010-06-24 02:51:00

ansaurus

tags:

views:

answers:

passing javascript object to function in a jquery way?

related questions