javascript - Script organization patterns (MVC + jQGrid) -

i'm building mvc web app heavy use of ajax loaded partial views containing jqgrids , javascripts. many of partial views contains 2 div tags , rest javascripts.

using script tags makes general page structure more logic me, because javascripts content of page see it.

however there small utilityfunctions, formatting functions, used jqgrid , i'm starting see increasing risk of scripts same name performing identical tasks.

example of formatting function:

    function primaryroleformatter(cellvalue, options, rowobject) {         switch (cellvalue) {             case "1":                 return "<%= resource.primary %>";              default:                 break;         }          return "";     }; 

at first saw formatting functions belonging closest grid, since there might other grids having formatting function same name small differences in code.

i load 2 or more grids @ same time, seems javascript smart enough use script defined in current script block if there's name clash there's no problem yet beyond nagging thoughs, "is best way of doing this?".

there's scripts ajax-loading , displaying jquery dialogs grid actions. i'm thinking scripts add on time.

should keep scripts used or should try build script library of kind?

if should move them out script files, what's smart way of partitioning functions (names, classes, files...)? if move them out, considered more unobtrusive type of page loaded ajax , consisting 95% of javascripts?

i realize there similar questions didn't find suiting answer. if there's problem this, i'll delete it.

object literals

the simplest way avoid unnecessary pollution of global namespace place related functions in object literal:

var formatter = {      primaryroleformatter: function(cellvalue, options, rowobject) {         switch (cellvalue) {             case "1":                 return "<%= resource.primary %>";             default:                 break;         }         return "";     },      someotherformatter: function() {      } } 

which can used this:

formatter.primaryroleformatter(cellvalue, options, rowobject); formatter.someotherformatter(); 

this results in 1 property on global object instead of 1 each function define.

module pattern

or hide things function scope:

var formatter = (function() {      function formatterctor() {         // instance-ish level func         this.oneperinstance = function() {}     }      // not accessible outside; not in global namespace     function privatefunction() {}      // class-ish level func     formatterctor.oneshared = function() {}      return formatterctor;  })(); // self-executing 

which can used this:

var fmt = new formatter(); fmt.oneperinstance(); 

in either case, end 1 variable in global namespace, win.