4
\$\begingroup\$

I'm trying to learn how to structure my jQuery code better. I'm only about a week into jQuery so if something looks way off please tell me. I'm attempting to use object literals and it appears to work ok, but I am wondering if there is possibly a better way to structure my code.

var application = {
    wrapper: $('#wrapper'),
    addButton: $('#add'),
    init: function() {
        this.addButton.click(this.buttonHandlers.clickHandler);
        this.wrapper.on("contextmenu", "#wrapper div", this.buttonHandlers.contextMenuHandler);
    },
    buttonHandlers: {
        clickHandler: function(e) {
            console.log("clickyHandler");
        },
        contextMenuHandler: function(e) {
            console.log("right click");
            return false;
        }
    }
};

application.init();​
\$\endgroup\$
3
\$\begingroup\$

This won't scale if you entire application is one large object.

If you seperated it into multiple objects

var application = []

application.push({
  wrapper: $("#wrapper"),
  init: function () {
    this.wrapper.on(bla, this.foo)
  },
  foo: function () {

  }
})

...

applications.forEach(function (app) { app.init() })

it will becomes significantly more maintainable.

You may also want to look into techniques for spreading application infrastructure across multiple files. For example ncore uses browserify for it's module system, and uses dependency injection and an expected object format to stitch multiple "modules" together.

\$\endgroup\$
  • \$\begingroup\$ Note note that Array.forEach is not going to work in IE8 or lower. Personally I recommend underscore.js for a collection-processing library \$\endgroup\$ – George Mauer Mar 26 '12 at 17:18
  • \$\begingroup\$ Array#forEach is part of ES5, if you want to support legacy browsers use a legacy browser support technique of choice. I recommend using the ES5 shim, as for underscore, it's kind of useless given ES5 \$\endgroup\$ – Raynos Mar 26 '12 at 17:27
  • \$\begingroup\$ Absolutely true (I like modernizr), but common, how many of us are in a position where we can not support IE8? I'm just saying the incompatibility should be mentioned \$\endgroup\$ – George Mauer Mar 26 '12 at 18:25
  • 2
    \$\begingroup\$ I disagree on wasting my time mentioning legacy support techniques on throw away example code. If the question was "how to iterate over an array in a cross browser manner" then sure, if the question is a high level thing, then no \$\endgroup\$ – Raynos Mar 26 '12 at 18:55
3
\$\begingroup\$

I'd use an anonymous function around everything, so you don't have to type this all the time:

(function() {
  var $wrapper = $('#wrapper');
  var $addButton = $('#add');

  function init() {
    $addButton.click(clickHandler);
    $wrapper.on("contextmenu", "#wrapper div", contextMenuHandler);
  }

  function clickHandler(e) {
    console.log("clickyHandler");
  }
  
  function contextMenuHandler(e) {
    console.log("right click");
    return false;
  }

  init();

})();

This way everything is hidden inside the big anonymous function. No code from the outside can access the objects. Depending on whether or not you want such a “black box behavior”, this can be good or not.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.