title: How can I write an extendable jQuery class?
body: <p>I've been struggling to write an HTML templating class that utilizes jquery without wrapping every jquery function. I know the best course when using jquery, and wanting to inherit its methods, is to write a jquery plugin. However, I want to be able to extend the plugin (if that's the method I must take). Currently this is what I have designed using classes.</p>
  
  <pre><code>class Templater extends jQuery.fn.init {
      constructor(options){
          super();
          var defaults = {
              template : null,
              // jquery elements for components
              struct : {
                  wrapper : ''
              }
          };
          this.settings = $.extend(defaults, options);
  
          this.$wrapper = null;
  
          return this;
      }
  
      template(){
          if(this.settings.template === null)
              this.useDefaultTemplate();
          else
              this.useTemplate();
          this.init(this.$wrapper);
          return this;
      }
  
      useTemplate(){
          var $template = this.settings.template;
          $template = $('&lt;div&gt;&lt;/div&gt;').append($template);    
          // search for the HTML components
          var self = this;
          $.each(this.settings.struct, function(i, e){
              self['$' + i] = $template.find(e);
          });
  
          return this;
      }
  
      useDefaultTemplate() {
          // implement in child
          return this;
      }
  }
  </code></pre>
  
  <p>The objective of this class is to take a jquery template (in full code there is support for string) that represents some re-usable HTML element that can be built and used over and over, like a forum post or comment. </p>
  
  <pre><code>buildPosts(data){
      // some class called Post extends Templater
      var post = new Post($('#postTemplate'));
      $.each(data, function(i, e){
          post.addPost(e).appendTo('table');
      });
  }
  </code></pre>
  
  <p>While there are other ways to do the above, the point is <code>Templater</code> would be extended by other classes, like a table generator with more functionality (manage data, add rows, update rows, etc).</p>
  
  <p>The point of inheriting jQuery would be to inherit its great DOM controls, like <code>appendTo</code>, <code>remove</code>, etc. By inheriting jQuery and calling <code>this.init()</code> this actually somewhat works. But it has major flaws. It seems call the constructor when <code>appendTo</code> is called, for instance. </p>
  
  <p>I've tried to use the plugin method, but if you call </p>
  
  <p><code>var template = new $().Templater(options).template().appendTo('body')</code></p>
  
  <p><code>template</code> ends up as a jquery object (because the last call is to appendTo) and now no non-jquery functions are useable.</p>
  
  <p>Is there any sensible way to do this, or should I just wrap the jquery functions in my <code>Templater</code> class?</p>