JQuery Plugin Pattern - Code Organization for multiple scripts

StackOverflow https://stackoverflow.com/questions/18201494

Question

I'm developing a client using JQuery based on lightweighted plugin pattern as listed here.

https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

I've been working on one file, but it's getting bloated with over 1000 lines of code. So I've decided to split scripts, but I haven't been able to locate best practice for keeping multiple scripts with jQuery.

My main script is the following:

;(function($, window, document, undefined) {
   function MainClass(){
       this.other = new Otherclass(); // Otherclass is defined in separate script
   }

   MainClass.prototype = {
   ...
   }

   $.fn.mainclass = function(){
   ...
   }
})(jQuery, window, document);

HTML is the following:

<html>
   <head>
      // JQuery included
      <script type="text/javascript" src="mainclass.js></script>
      <script>
      $(function() {
         $("body").mainclass();
      });
      </script> 
   </head>
</html>

Question: I need to define otherclass on the separate file. What is the best way to accomplish this? If Plugin Pattern wasn't meant to have multiple scripts, are there any other practice suitable for this?

Thank you.

Was it helpful?

Solution

The module pattern that you are using is a good first step in the right direction. The plugin pattern was really intended to encapsulate one specific functionality for a given set of elements and follows the open/closed principle pretty well, by design (open for extension). However, it isn't a good approach for multiple object interaction due to its primary behavior as an extension method of the jQuery object.

One thing that I was able to do to split my JavaScript out into pages/multiple files was to use a combination of Namespacing and Module Augmentation/Importing/Exporting.

The namespacing was great for importing and dereferencing other portions of the application and the module pattern helped with selection of exposure and exporting just the right amount of reusable members of an object. From there, I could dereference any object that was in the namespace, create new instances from that, and so forth:

//In some common site-wide file, declare a common namespace and known base objects within it:

var App = {
   View: {},
   Utilities: {}
};

// view.js
App.View = (function($, window, document, undefined) {
    var localProp = "Hi, i'm a private property for App.View to access";

    function doSomething(){
       // a private method for use
    }

    return {
       reuseableMethod: function() {
          // exported for access through App.View.reusableMethod()
       }
    };

})(jQuery, window, window.document, undefined);

// another script, more specific, different file
// NOTE: the import and export of App.View and view
(function($, window, document, view) {
   // consume your other objects after importing them
   var me = Object.create(view);

   me.reuseableMethod();

   function localFunction() {
     //do something private
   }

})(jQuery, window, window.document, App.View);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top