JQuery\Javascript - Passing a function as a variable

I was just curious if I could pass a function as a variable. For example: I have a function

$('#validate').makeFloat({x:671,y:70,limitY:700});

I would like to do something like this:

$('#validate').makeFloat({x:f开发者_如何转开发unction(){ return $("#tabs").offset().left+$("#tabs").width();},y:70,limitY:700});

This does not work, but ideally every time the variable was accessed it would compute the new value. So if the window was resized it would automatically adjust as opposed to a variable passed in being static. I realize I can implement this directly inside the function\widget, but I was wondering if there was some way to do something like the above.

The concept of this is independent of the plugin. I am talking about the function being "cast" as a variable.

---

Yes, you can pass an object which will invoke some function when its property is read (this is called a getter), but it is not cross-browser compatible. For example, this will (probably) work in IE9:

var o = {y:70, limitY:700};
Object.defineProperty(o, 'x', {get: function() {return 671;}});
$('#validate').makeFloat(o);

There are other syntaxes for other browsers such as __defineGetter__ for Firefox, and some browsers don't have this functionality at all. So it is practically useless unless you can fully control the environment where your code runs.

---

This won't work unless x is invoked (obj.x(), instead of just obj.x).

To make it work, the makeFloat() code must check the type of x, and if it's a function, invoke it.

---

I see what you're trying to do, but it won't work. Why? makeFloat expects the value to be non-function type. It probably uses that value directly. To actually execute the function, makeFloat needs to do x() or even x.call(...) or x.apply(...), which it most certainly isn't doing.

To answer your other question i.e., can you pass functions as variables, the answer is yes. In fact, this is the way callbacks and closures are handled in Javascript. For example, in jQuery when you bind an event handler you are passing in a function as a parameter:

jQuery("#myInputId").click(function() {
 ...
 ...
});

Another way that parameters are passed in are as object attributes, for example in jQuery.ajax:

jQuery.ajax({
   ...
   success: function(data) {
   },
   ...
});

In both cases, click and ajax both understand and expect the parameter to be a function and not just a regular variable. For example, assuming you had an object that maintained a list of integers and you had a method called addElement(int), which expected an int parameter, you wouldn't pass in a String. It works the same way in Javascript, except for the fact that the language is not strongly typed. This is why you don't really get a type-mismatch error unless the function explicitly checks the type and throws an exception. This is generally a good practice in such language; I try to do this in the Javascript code that I write.

---

I've done this with string variables. You'll need to exploit the toString function.

function RefString(fn) { this.toString = function() { return String(fn()); }; }

You can use it like so:

$("#someDiv").somePlugin({optionValue: new RefString(MyFunc), ... });

function MyFunc() {
  return new Date().getYear().toString();
}

It works by setting optionValue to a new OBJECT, not necessarily a function. Then anything that reads this object will ask for a value, which by default is the result of the toString function. We simply override the default behavior by executing a function that is specified when the object is constructed.

I'm not sure how it will work for EVERY plugin, but it works when a string or number is expected.

---

How do you mean "doesn't work"?

It looks like it should compile and run. But what happens is it executes the function and sets the value no different than if you used a constant, or called a function that wasn't inline.

What you need to do is put this line of code in an event that fires when the window is re-sized.

---

It looks like makeFloat is from a jQuery plugin - are you sure that the plugin is aware that 'x' can be a function and will execute it properly? From the jQuery site, it looks like it only is able to comprehend a number value or 'current' as a string, not a function.

---

You can pass functions as variables, yes - but that's not actually what you're asking.

What it looks like your asking is "can I set a DOM property to the result of an expression?" to which the answer is "no". (Note - not outside of browser-specific behavior such as IE's CSS Expressions - which have been deprecated in IE8 anyway)

You'll need to bind an event handler to window.onresize and use a function to update the sizing yourself.

---

In order for a function to be executed from a variable, it has to be called, like so:

$.option.callback.call();

Where option is the containing variable, callback is the function and call executes the function.

It's not like you don't have options though. You can set it up so that the returned value of that function is executed from the line itself. Or you can set it up in the alternative manner that you described.

---

You need to invoke that function so that it returns the actual value you're looking for. So you're not actually passing in a function, you're invoking it and it's immediately returning a value. For example:

$('#validate').makeFloat({
  x:function(){ 
    return $("#tabs").offset().left+$("#tabs").width();
  }(),
  y:70,
  limitY:700
});

Notice the extra () after the function call. This invokes the function immediately, thus returning the value you're looking for.

---

Note that x doesn't "compute new value" when is accessed (read), but when the function is called, i.e. x(). As Chad mentioned, this is how you can automatically execute a function when windows is resized:

$(window).resize(function() {
    // do something
});

[Update] After re-reading your question, I think you may be thinking overcomplicated – isn't this what you are looking for?

$('#validate').makeFloat({
    x: $("#tabs").offset().left + $("#tabs").width(),
    y: 70,
    limitY: 700
});