What is the proper way to control related objects in javascript?

Question

I'm new to object oriented programming and am slowly learning how to apply it to javascript. So please bear with me. :)

I have two basic objects:

1. "record" which contains methods for editing a single record from a recordset. (create, save, load, etc.)

2. "recordList" which contains methods for outputting a paginated list of record titles.

I would like for these objects to be able to work together. For example, if record.save() is called, recordList.refresh() is also called, so that the paginated list reflects the updated data.

To accomplish this, I have created a third object "control" which contains instances of both "record" and "recordList". I am using "control" in the following fashion:

control = {}

    control.record = object.create("record");
    control.recordList = object.create("recordList");

    control.save = function() {

        this.record.save();
        this.recordList.refresh();

    };

This works. But I am wondering, is it proper? (I want to be sure I am not violating any of the rules of OO design in doing this.) Is there a better way?

Thanks in advance for your help.

Answer 1

If it's one thing I've learned over time, it is that following any paradigm to the letter will result in more frustration and difficulty than taking the concept as far as you can go and using common sense to dictate your deviations.

That said, your solution will work fine and it's normal to create a container class for multiple objects of varying types that are coupled. If you want a different way to handle it, check out Client Event Pooling. The only thing that I can say about what you've done is to be sure you're using object.create the way it was intended.

Using this method you can create an event, which when triggered will perform a series of other commands that are associated with your event. I have used this with great success in all sorts of applications, from the intended event hooking to simplifying inline javascript injections after a postback.

Good luck.

Answer 2

why don't you provide your recordList into record?

var record = object.create("record");
record.recordList = object.create('recordList');
record.save = function(){
    /*
        do something 
    */
    this.recordList.refresh();
}

Answer 3

Your solution is fine. Two minor suggestions for improvement

1. Use a more specific name than control (even 'recordControl' is ok). You may end up with lots of controls for different feature sets.

2. Use an object literal to create the entire object. Keeps your code tidier and more readable (and saves a few bytes)

(apologies for lack of spacing - editor not doing what I want it to do!)

    recordControl = {
        record : object.create("record"),
        recordList : object.create("recordList"),
        save : function() {
            this.record.save();
            this.recordList.refresh();
        }
    }

Answer 4

Speaking from an OOP perspective, I don't think a record would save itself. A record in a database is simply data, and the database itself is what does things with that data, whether it's saving or loading or etc. That being said I'd make record be simply an object that holds data and would create a recordset object for interacting with the data. Within that recordset object you could put your recordList and update it accordingly. Something like:

var recordset = function() {
    var me = this;
    var currentRecord = object.create("record");
    var recordList = object.create("recordList");
    me.save = function() {
            //Insert record.save code here
            recordList.refresh();
    };
};

Something to note about that code. In that setup currentRecord and recordList can't be accessed from outside the function and therefore you have encapsulation, one of the hallmarks of OOP. This is because the recordset function is a closure that "closes over" all variables within, meaning that every function within has access to the variables within the scope of recordset.

You could let the outside world get access through get or set functions:

    me.getRecordList = function() {
        return recordList.getArray(); //Not generally a good idea to simply return your internal object
    };