jquery - Need help refactoring JavaScript code to be easier to modify, maintain, and to be more robust -

the search page has lots of facets tracked breadcrumbs, additional sections can added narrow searches, saving of searches, result counts update in real-time, lots of stuff. i'm using javascript , jquery ui stuff, , code mash of functions , big ol' document ready function. when search triggered, criteria gathered based on shown in ui. example of facets, literally @ crumbs shown , @ data()/text/class/etc. determine criteria.

what need how organize , design code type of application. don't have 1 coherent question, i'll make attempt @ few.

• is okay practice treat dom element object in say, java? example have breadcrumb, div. have functions creating crumbs, removing them, etc. treat text , data() fields of object.

• continuing off previous example, don't have crumb javascript object. should i? best way keep association between object , element, since these being created , deleted.

• slightly tangential, suggestions testing? nothing i've done unit tested doesn't sit right me...

tl;dr had build complicated search ui possible while learning javascript , became mess. need best practices , how organize code.

since you're using jquery, have these options take advantage of it:

1. jquery provides dom wrapper around dom object provides both wrapper , lots of methods on it. can use rather create own wrapper object.

2. you can create new methods operate on jquery objects if makes item 1 more practice. jquery plugins not more difficult jquery.mymethod = function() { code here }.

3. if want own object own methods, can contain either relevant dom element or relevant jquery wrapper on dom element (depending upon whether regularly need jquery object in order operate on dom element).

4. jquery provides .data() lets access , store properties of dom elements in ways persist long dom element persists, don't cause memory leaks. if aren't building own object, can use store instance data associated dom element. if building own object contain dom element, can store properties on own object directly.

5. it better not storing lots of custom properties on dom elements should either storing them in own custom javascript objects or using jquery's .data().

more specifics how best require thorough knowledge of you're doing, operations are, how lifetime of elements works, instance data need keep track of, how access , store or find references these elements, etc... there no single answer appropriate architecture depends upon lot of requirements haven't disclosed other @ very, general level.