Anything wrong with my typical module pattern? The javascript I typically need to write seems to be a good fit for the module pattern, e.g., repeatable widgets such as photo galleries, forms, etc. that have their own internal states, but may need to be accessible or editable by other parts of the website.

The particular flavor of the module pattern I've been using I inherited from a senior dev, but with that person out of the picture I'm taking a look at how I write my code so I can really understand it and ensure it's optimal.

I'll usually have one global object to contain my code and a selector library on hand (such as Zepto or jQuery). That global object would return specified submodules that I can call when I need them. Below is what a sample photo gallery module in the app might look like in skeleton form.

I'd love any input. I don't have a formal background in computer science or programming, particularly not OOP, so please point out any errors I've made in terminology as well.

var App = (function($) {

    "use strict";

    // images is an array of image paths
    // container is a DOM node where we append the gallery
    var Gallery = function(images, container) {

        // private variables go here

        // create a Zepto object from the DOM node that was passed in
        // it makes DOM operations easier and less verbose
        var $container = $(container);

        // these are prev/next buttons that will have event handlers on them
        var $next;
        var $prev;

        // an anonymous function expression executes initializers and event bindings
        (function() {

            // init renders the DOM we want
            init();

            // bind events on elements we just rendered
            bindEvents();

        })();

        function init() {

            // create DOM nodes from images, an array of image paths
            for (var i = 0; i &lt; images.length; i++) {
                $container.append(render(images[i]));
            }

            // create the nav elements
            $container.append('&lt;nav&gt;&lt;/nav&gt;');

            var $nav = $container.find('nav');
            $nav.append('&lt;div class="next"&gt;Next&lt;/div&gt;');
            $nav.append('&lt;div class="prev"&gt;Prev&lt;/div&gt;');

            $next = $nav.find('.next');
            $prev = $nav.find('.prev');

        }

        function bindEvents() {

            $prev.click(function() {
                // show previous image
            });

            $next.click(function() {
                // show next image
            });

        }

        // this is a method of Gallery that would allow us to add more images to the gallery after it's already instantiated
        function addImage(path) {
            $container.append(render(path));
        }

        function render(path) {
            return '&lt;img src="' + path + '" /&gt;';
        }

        // return only the parts of the module we need exposed publicly
        return {
            addImage: addImage
        };

    };

    function init() {

        // an init function for the global App

    }

    // return the public properties of App
    return {
        Gallery: Gallery,
        init: init
    };

})(Zepto);

(function($) {

    App.init();

    var imagepaths = ["image1.jpg", "image2.jpg", "image3.jpg"];
    var galleryNode = document.getElementById('#gallery');

    $(document).ready(function() {
        new App.Gallery(imagepaths, galleryNode);
    });

})(Zepto);
I would suggest using a constructor and prototypes (as well as the module pattern) if you want to learn OOP in JavaScript. This is typically how libraries like jQuery and Zepto are built:

var App = (function($) {

  'use strict';

  // Gallery

  var Gallery = (function() {

    // Constructor
    function Gallery(images, container) {
      this.images = images;
      this.$container = $(container);

      // Create elements we need first,
      // and cache them in variables to use them
      // in prototype methods
      this.$nav = $('&lt;nav&gt;&lt;/nav&gt;');
      this.$next = $('&lt;div class="next"&gt;Next&lt;/div&gt;');
      this.$prev = $('&lt;div class="prev"&gt;Prev&lt;/div&gt;');

      // Initialization
      this._init();
      this._events();
    }

    // Methods that start with underscore are
    // meant for internal use, even though they are still public
    // it is a well known convention
    Gallery.prototype._init = function() {
      this.addImages(this.images);
      this.$nav.append(this.$next, this.$prev);
      this.$container.append(this.$nav);
    };

    Gallery.prototype._events = function() {
      this.$prev.click(function() {
        //...
      });
      this.$next.click(function() {
        //...
      });
    };

    // Public method
    Gallery.prototype.addImages = function(imgs) {
      // Append all images at once for best performance
      this.$container.append(imgs.map(render).join(''));
    };

    // Helpers

    // This function is available in the code above
    // because function declarations get hoisted to the top
    // of the scope, as opposed to function expressions, ie:
    // "var render = function(){}"
    function render(path) {
      return '&lt;img src="' + path + '" /&gt;';
    }

    // Return a wrapper that will let us call "Gallery"
    // without using the "new" keyword
    return function(x, y) {
      return new Gallery(x, y);
    };
  }());

  // App

  function init() {
    // app init
  }

  return {
    Gallery: Gallery,
    init: init,
  };

})(Zepto);

(function($) {

  App.init();

  var imgs = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

  // short for document.ready(fn)
  $(function() {
    // We get back an instance of "Gallery"
    // without using the "new" keyword
    var gallery = App.Gallery(imgs, '#gallery'); // you can pass a selector

    // Add more images using public method
    gallery.addImages(['a.jpg', 'b.png']);
  });

})(Zepto);


Once you feel more comfortable with prototypes and inheritance in JavaScript, I would probably consider making a jQuery/Zepto plugin for your gallery, so you'd be able to call it on your elements like $('#gallery').myGalleryPlugin(images).