1

How do you package up modules and related functionality, as in what's the smallest piece that you consider a "widget" or a metaclass?

For example, usually I create a Modal class/widget and reuse that as needed. But I've been thinking of breaking that up to even smaller pieces, and create an Overlay metaclass, which can be reused in Modal, or Tooltip, or anything with an absolute div overlaying the page.

Another example might be, maybe a Content metaclass (the name of this metaclass would need to be revised lol) but this metaclass would be in charge of showing/hiding itself, either via slide up/down, fade in/out, update itself via ajax or what not. This Content metaclass could then be reused in an Accordion widget (each panel sliding up and down could be a Content instance), or in a Tabs widget, etc.

Or a Rotator metaclass that could be reused for a Carousel widget, or anything that cycles through a list of things.

Hopefully I'm being clear with my question. I'm interested to know how small you guys break out your functionality. Also, writing metaclasses in this way is kind of foreign to me, any tips on how to achieve this type of pattern would be appreciated (in essence, a generic metaclass that can be applied to multiple scenarios, but with a way to appropriately augment itself with the right functionality).

Thanks!

EDIT: this would effectively relegate most widgets to simply being containers that bind all of these smaller metaclasses together. In a sense the Decorator pattern (or maybe Composite?) but most examples of the Decorator pattern I found were either too simple and didn't illustrate a real life scenario for me or I'm missing something.

1 Answer 1

1

there's absolutely no reason why your Widget's can not be build from Component's.

Now I don't know what framework you have in place so lets go with something generic.

function HideableComponent(el) {
    this.show = function() {
         $(el).show();
    }

    this.hide = function() {
        $(el).hide();
    }
}

function LoadableComponent(el) {
    this.load = function(url) {
        $(el).load(url);
    }
}

var Components = {
    "Loadable": LoadableComponent,
    "Hideable": HideableComponent
}

function SomeUIWidget(el) {
    var hide = new Component.Hideable(el),
        load = new Component.Loadable(el);

    $.extend(true, this, hide, load);

    ...
}

Now the examples are trivial. presumably the components would be more then very thin wrappers around jQuery functions and have inbuild configs, customability, automation and validation.

The point is there is no reason why you can't have your widgets draw upon components no matter how trivial they are.

As long as the components make your code more DRY and more readable / maintainable then you can make them as small and trivial as you want.

One reason you may even want to do this is to abstract away the use of jQuery as your DOM manipulation library and allow a generic set of Components that can be loaded as jQueryComponents, MooToolsComponents etc whilst keeping a common API.

Now this may start to border on over-engineering. You need to find a good balance for your own project.

As for a rotator meta class maybe something like this

function RotatorComponent(container) {
    var children = $(container).children(),
        curr = children.first();

    this.rotate = function(draw) {
         curr = curr.next();
         draw(curr);
    }
}
Sign up to request clarification or add additional context in comments.

1 Comment

Sorry, I never realized I didn't accept this as an answer. Thanks, it helped with what I was thinking about at the time

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.