Question

I’ve got this page I’m doing some tests in Javascript and jQuery: JS Tests

I’ve got a few questions on how to create, not sure if this is right term, but compound controls via Javascript. In something like Flash, you’d create the Object class, have the getters and setters, draw your images, etc. In JS, it seems to be a very different thought process. My main question is How do you create multiple elements with getters and setters to be rendered, filtered, and interacted with in Javascript?

The main code regarding this example sits with:

var html = (function(){
    // var FRAG = $(document.createDocumentFragment());
    htmlBox = $(document.createElement("div"));
    var eTitle = $(document.createElement("h4"));
    var ePrice = $(document.createElement("p"));

    // set class first
    htmlBox.addClass("box")
    htmlBox.css({
        backgroundColor : color
    })

    // set text values
    eTitle.text(title);
    ePrice.text("$" + price);

    htmlBox.append(eTitle)
    htmlBox.append(ePrice)

    return htmlBox;
})();

… inside the Box() class. If someone could take a look at the source and let me know what isn’t quite right, that’d be great.

EDIT

Here’s the final result for this example. Some logistics to work out, but what I’m after.

http://geerswitch.in/tests/obj/

As for the jQuery creating nodes, the built in JS version works fine for this, and some research on Google shows that the non-jquery way is faster in most cases anyway (and looks worse, imo)

Answer 1

You’re doing it almost right. You’ve created a Box class to represent your higher-order UI element, you’re instantiating it for each element, and your main program is manipulating the elements through its interface. The only thing you’re missing is the split between the public interface and the private implementation. There’s nothing to prevent me from doing myBox.price += 10 right now, even though the Box interface clearly implies that price should be set at construction and never modified.

JavaScript doesn’t have visibility modifiers like “private” and “public”, but you can create the same effect yourself. Check out Douglas Crockford’s explanation for the details. Crockford is an opinionated genius when it comes to JavaScript, and he’s the brains behind JSLint and JSON.