Structuring javascript / jQuery

Question

I work in a lot of ASP.NET webforms projects. Since im not a big fan of postbacks, i tend to write a lot of jquery ajax calls to handle the cilent -> server calls.

But keeping most of the logic in script tags / javascript files usually gets messy pretty fast, even though im trying to use a lot of functions and also simulating classes. I should add that 99% of the code is jquery, not "pure" javascript.

So i would like to know how you guys deal with this issue. I cant be the only one :-) Thanks in advance

I use Coffeescript with the Mindscape VS plugin. It forces you to keep your could in separate client cachable files, finally breaking me of the bad habit your worried about here. Check it out, it's free, and Coffeescript is alot of fun. — asawyer
– asawyer, Commented Feb 28, 2012 at 21:20
I'm currently intrigued with Backbone JS. One nice thing about it is you can kind of pick and choose what you use from it. It's not an "all or nothing" type of thing. There was also a recent Herding Code podcast episode about it, which was pretty interesting. — Colin Brock
– Colin Brock, Commented Feb 28, 2012 at 21:24

StriplingWarrior · Accepted Answer · 2012-02-28 21:22:07Z

2

I really like the "unobtrusive javascript" approach, where you load pretty much all your static javascript/jQuery code in a bundled, minified, cached javascript file, and then you use class and "data-" annotations on your HTML elements to flag them for certain actions. The javascript is written to scan your DOM for these flags and set up its logical behavior accordingly.

This approach helps to force you to organize your javascript into logical modules, which tends to help reduce repetitive code. It separates the javascript from the HTML.

The only thing to be careful of is that dynamically-loaded content also needs to be scanned, so any time you add AJAX-provided content to the DOM, be sure you invoke your scanning method on the added elements.

answered Feb 28, 2012 at 21:22

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tuan · Accepted Answer · 2012-02-28 22:00:24Z

0

I like to define JS classes for each form or use case. The class wires up event handlers and behaviors for the page. Then when the page loads, it instantiates or calls an init() method on the JS class to progressively enhance it.

For example, a logon page might reference a JS file called Account_LogOn.js. At the bottom of the page, you can have it call myApp.logon.init(), where myapp is the "namespace" of the logon class.

The init() call then adds a handler for the form submit event to perform client-side validation or whatever else you want.

answered Feb 28, 2012 at 22:00

Tuan

5,4221 gold badge24 silver badges17 bronze badges

Collectives™ on Stack Overflow

Structuring javascript / jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related