title: Javascript code optimizing: Multiple use of allocative function with variable hooks
body: <p>I do have an initializing allocative function with hooks to optional call other functions. The Idea is, that the (other) functions could be written individual to the project to add individual needed features.</p>
  <p>The mechanic works fine if there is only one call on a page.</p>
  <p>Now I would like to realize multiple use of that function on one page. That means on every call the allocative function should call hooks with different and individual code for every single call. That means: after I called function and hooks the first time I have to change the code of the hooks for the second call.</p>
  <p>Up to now I 'reset' the hook functions before starting the second call and coding the hooks new.</p>
  <p>The question is about: is there a way to write better, a more easier and maybe more elegant code?</p>
  <p>I would prefer a mechanic without the 'reset' but starting directly with coding the hooks for the second call. Is that possible maybe with using another scope for the variables? The solution should be realized without use of classes and in vanilla Javascript (no jQuery).</p>
  <p>Here is the simplified(!) code to demonstrate the mechanic:</p>
  <pre><code>&lt;h1 id=&quot;hd1&quot; class=&quot;heading main normal&quot;&gt;Testing JS&lt;/h1&gt;
  
  &lt;h2 id=&quot;hd2&quot; class=&quot;subheading article&quot;&gt;Another headline&lt;/h2&gt;
  
  
  
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  
  
      let hookBeforeStart,hookAfterDone;   // initializing vars for hooks
  
      function resetHookFuncions(){
          hookBeforeStart = {};
          hookAfterDone = {};
      }   
  
      function allocativeFunction( selector ){
  
          const $element = document.getElementById( selector );
          const classes = $element.classList;
          const eHtml = $element.innerHTML;
  
          // hooks
          if(typeof(hookBeforeStart) == 'function'){
              hookBeforeStart({ $element, classes });
          }
          if(typeof(hookAfterDone) == 'function'){
              hookAfterDone({ $element, eHtml });
          }
  
      }
  
  
      window.onload = function(){
  
  
          // ### first call allocative function with individual hooks
  
          console.log('first call');
  
          hookBeforeStart = function( p ){
              console.log( p.classes );
          };
          
          hookAfterDone = function( p ){
              console.log( p.eHtml );
          }
          
          allocativeFunction('hd2');
          
  
          
          // ### second call allocative function with same hooks but other individual code
  
          console.log('second call');
          
          //###### RESET
          //###### SEEMS TO BE LESS ELEGANT AND COMPLICATED 
          //###### IS THERE A BETTER WAY WITHOUT RESET????
          resetHookFuncions(); 
  
          // note: hookBeforeStart not needed for second call
          // --&gt; has been (needed to be) deleted by reset
  
          hookAfterDone = function( p ){
              console.log( p.$element );
          }
      
          allocativeFunction('hd1');
  
      
      } // window.onload
  
  &lt;/script&gt;
  
  </code></pre>
  <p>All hints and suggestions to do it better are welcome.</p>