javascript - Defining objects when using Jaxer

Question

I've been playing with Jaxer and while the concept is very cool I cannot figure out how to define objects that are available on both the client and the server. None of the examples I can find define objects at all.

I'd like to be able to define an object and specify which methods will be available on the server, which will be available on the client, and which will be available on the client but executed on the server (server-proxy). Can this be done without using three separate <script> tags with different runat attributes? I would like to be able to define all of my methods in the same js file if possible, and it is not practical to define my objects inline in the html with three separate tags...

Basically I'd like to be able to do this in one js file:

function Person(name) {
    this.name = name || 'default';
}
Person.runat = 'both';

Person.clientStaticMethod = function () {
    log('client static method');
}
Person.clientStaticMethod.runat = 'client';

Person.serverStaticMethod = function() {
    log('server static method');
}
Person.serverStaticMethod.runat = 'server';

Person.proxyStaticMethod = function() {
    log('proxy static method');
}
Person.proxyStaticMethod.runat = 'server-proxy';

Person.prototype.clientMethod = function() {
    log('client method');
};
Person.prototype.clientMethod.runat = 'client';

Person.prototype.serverMethod = function() {
    log('server method');
};
Person.prototype.serverMethod.runat = 'server';

Person.prototype.proxyMethod = function() {
    log('proxy method');
}
Person.prototype.proxyMethod.runat = 'server-proxy';

Also, assuming I was able to do that, how would I include it into html pages correctly?

Answer 1

I found a post on the Aptana forums (that no longer exists on the web) that states that only global functions can be proxied... Bummer.

However, I've been playing around, and you can control which methods will be available on the client and the server by placing your code in an include file and using <script> tags with runat attributes.

For example, I can create this file named Person.js.inc:

<script runat="both">

    function Person(name) {
        this.name = name || 'default';
    }

</script>

<script runat="server">

    Person.prototype.serverMethod = function() {
        return 'server method (' + this.name + ')';
    };

    Person.serverStaticMethod = function(person) {
        return 'server static method (' + person.name + ')';
    }

    // This is a proxied function.  It will be available on the server and
    // a proxy function will be set up on the client.  Note that it must be 
    // declared globally.
    function SavePerson(person) {
        return 'proxied method (' + person.name + ')';
    }
    SavePerson.proxy = true;

</script>

<script runat="client">

    Person.prototype.clientMethod = function() {
        return 'client method (' + this.name + ')';
    };

    Person.clientStaticMethod = function (person) {
        return 'client static method (' + person.name + ')';
    }

</script>

And I can include it on a page using:

<jaxer:include src="People.js.inc"></jaxer:include>

Unfortunately with this method I lose the advantage of browser caching for client-side scripts because all the scripts get inlined. The only technique I can find to avoid that problem is to split the client methods, server methods and shared methods into their own js files:

<script src="Person.shared.js" runat="both" autoload="true"></script>
<script src="Person.server.js" runat="server" autoload="true"></script>
<script src="Person.client.js" runat="client"></script>

And, at that point I might as well split the proxied functions out into their own file as well...

<script src="Person.proxies.js" runat="server-proxy"></script>

Note that I used autoload="true" on the shared and server scripts so that they would be available to the proxied functions.