0

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.

lustdante
  • 483
  • 4
  • 14

1 Answers1

1

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);
James Lee Baker
  • 797
  • 6
  • 9
  • Hello, I've been making great use of this solution so far. I'm just little confused by use of Object.create here, as the code works the same without it. Could you elaborate more on its purpose? – lustdante Sep 22 '13 at 07:41
  • Object.create is used to create a new instance of an object that is declared using object notation. When an object is declared as a function, you can create a new instance of it using the 'new' keyword; however, this isn't the case. Because App.View returns an object, the best way to create an instance of this is through the Object.create function. – James Lee Baker Nov 18 '13 at 19:55