Decoupling too complex javascript modules

Question

Right now I'm developing pretty huge and complex webapp and have to deal with a huge amount of client-side js code, and to make my life easier I'm trying to decouple this code as much as I can.

I was hugely inspired by Nicholas Zakas (http://www.youtube.com/watch?v=vXjVFPosQHw) and Addy Osmani (http://addyosmani.com/largescalejavascript) talk about scalable js architecture and was trying to apply some of their ideas to my work.

I've separated all my code across the multiple independent modules, and handle all intercommunications with some sort of mediator. This approach worked great in most cases. But there are some cases where I think its not enough.

One of the modules I'm working on represents a pretty complex list-alike structure. Here some simplified example:

Besides some rendering logic, module responsible for this piece of page should handle:

• pagination
• toggling groups
• moving elems and groups around with dnd
• cutting / copying / pasting elems and groups
• refreshing certaing groups / elems
• some logic within elems
• may be more stuff in nearest future

I had carried out all the unrelated logic that I could (for example editing and deleting logic is carried out to another module via events), but module size is still large (over 1K lines of code), and I dont know how reduce it. Moreover I'm using module pattern for my modules so it's even harder to separate logic between multiple files.

So I came here to ask is there any way to decouple complex logic within a single module?

UPDATE:

I want to clarify something. I'm pretty aware of how I can separate modules("module" from a module pattern) across multiple files in my code.

But what I really searching for is the new logical way to separate concerns within a single module ("module" from NKZ presentation).

Answer 1

To decouple a single module into multiple files I would recommend using the Augmentation pattern found on this page http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Additionally, here are some more resources on creating scalable JS applications:

Here is a video of a presentation given by Nicholas Zakas on "Creating A Scalable JavaScript Application Architecture." http://www.youtube.com/watch?v=7BGvy-S-Iag

Another good resource http://addyosmani.com/largescalejavascript/

Knowing these concepts will allow you to build an application that is capable of dropping modules in and out seamlessly. You will be able to change a module without affecting any other module because your program will be loosely coupled. Additionally, should you choose to switch a base library, for example KnockoutJS to Angular, this framework will allow you to swap the base library easily and without breaking very much of your code.

Also, using modules and a mediator or sandbox will make your code easier to test. Testing is important in any non-trivial application. I hope this helps!