title: How can I write reusable Javascript?
body: <p>I've started to wrap my functions inside of Objects, e.g.:</p>
  
  <pre><code>var Search = {
    carSearch: function(color) {
    },
    peopleSearch: function(name) {
    },
    ...
  }
  </code></pre>
  
  <p>This helps a lot with <em>readability</em>, but I continue to have issues with <em>reusabilty</em>.  To be more specific, the difficulty is in two areas:</p>
  
  <ol>
  <li><p><strong>Receiving parameters</strong>.  A lot of times I will have a search screen with multiple input fields and a button that calls the javascript search function.  I have to either put a bunch of code in the onclick of the button to retrieve and then martial the values from the input fields into the function call, or I have to hardcode the HTML input field names/IDs so that I can subsequently retrieve them with Javascript.  The solution I've settled on for this is to pass the field names/IDs into the function, which it then uses to retrieve the values from the input fields.  This is simple but really seems improper.</p></li>
  <li><p><strong>Returning values</strong>.  The effect of most Javascript calls tends to be one in which some visual on the screen changes directly, or as a result of another action performed in the call.  Reusability is toast when I put these screen-altering effects at the end of a function.  For example, after a search is completed I need to display the results on the screen.</p></li>
  </ol>
  
  <p>How do others handle these issues?  Putting my thinking cap on leads me to believe that I need to have an page-specific layer of Javascript between each use in my application and the generic methods I create which are to be used application-wide.  Using the previous example, I would have a search button whose onclick calls a myPageSpecificSearchFunction, in which the search field IDs/names are hardcoded, which marshals the parameters and calls the generic search function.  The generic function would return data/objects/variables only, and would not directly read from or make any changes to the DOM.  The page-specific search function would then receive this data back and alter the DOM appropriately.</p>
  
  <p>Am I on the right path or is there a better pattern to handle the reuse of Javascript objects/methods?</p>