oo javascript with properties from server, methods from cache, best practice?

Question

I'm converting procedural JS to OO and would appreciate any help. In a nutshell, what I have is a html-page containing:

<script type="text/javascript">
  var serverTime='11:32:20';  //time generated by server (php)
</script>
<script scr="myProcFuncs.js" type="text/javascript">
  /* which is containing procedural functions such as
  function getServerTime() {return window.serverTime;}
  */
</script>

What I like to do is a clean up, without increasing traffic, more or less...

<script type="text/javascript">
  function myOb() {
    this.serverTime = '11:32:20';
    this.serverDate = '2010-09-24';
  }
  //first question, need/recommended to create a class??
  var myCl = myOb();
</script>
<script scr="myMethods.js" type="text/javascript">
  //second question, how to append methods to initiated class or object?
</script>

What I'm asking for is not only what works, but best practice in the OO-JS. Please also concider delayed loading of external myMethods.js and so on...

Options I'm concidering are:

• §1, as example, add methods to initiated class (or static object if possible), and if so, please post example of appending method.

• §2 (worst case) use two objects, one for properties (server generated), and one for the methods.

Thankful for any light in this matter, all the best

//Tom Joad

Answer 1

function myOb() {
    this.serverTime = '11:32:20';

This doesn't work. this only has meaning in a function if it's being called as a method on an object, or with the new operator.

If you just do myOb() instead of new myOb(), then this will be the global (window) object and assigning this.serverTime is effectively creating global variables, what you were trying to avoid in the first place. (Also without a return value from the function, myCl will be undefined.)

Since you don't really seem to be doing anything that requires multiple instances or prototyping, forget the function and just use an object literal:

var pageValues= {
    serverTime: '11:32:20',
    serverDate: '2010-09-24'
};

you can easily generate code like this using a JSON encoder on the server side. For example if the server-side language you're using were PHP:

<?php
    $pageValues= array('serverTime'=>'11:32:20', 'serverDate'=>'2010-09-24');
?>
<script type="text/javascript">
    var pageValues= <?php echo json_encode($pageValues); ?>;
</script>

how to append methods to initiated class or object?

Use an inline function expression:

pageValues.someMethod= function() {
    ...do something...
};

However I'm not sure this really gets you anything. JavaScript is a mixed scripting language, you don't have to think like Java and try to force everything into objects and classes. (Especially since you don't actually get classes, and have to roll your own using prototyping.)

Answer 2

Solved for now with, (and fixed some typos...):

<script type="text/javascript">
  function myCl() {
    this.serverTime = '11:32:20';
    this.serverDate = '2010-09-24';
  }
  var myOb = new myCl();
</script>
<script scr="myMethods.js" type="text/javascript">
  /* myMethods.js containing methods as..
  myOb.getTime = function() {
    return this.serverTime;
  } 
  */
</script>

Works. If anyone knows a better way, please post.