CODEWITHSUNDEEP
javascriptjqueryfunctionknockout.jsmodule
howardrocks
howardrocks

Reputation: 343

Adding code to a javascript module pattern from an outside file

First of all I'm pretty new to javascript.

I have wrote a javascript plug-in that filters html records. Using Knockout.js, basically keyword/s are typed into a text box and the plug-in filters through the html records to reveal the records that contain the keyword/s.

I have wrote the javascript using the Module pattern, and would like the opportunity for the .js file to stand alone, whilst also giving the user the opportunity to change ways in which the filter works.

Here is a brief and simple overview of the structure of my .js file:

$(function(){
  var s,
  Filter = {

    settings:{
      //default settings
    },

    initialise: function(){
      s = this.settings;
      this.someFunction1;
      this.someFunction2;
    },

    someFunction1: function(){
      //
    },

    someFunction2: function(){
      //
    },

  }

  Filter.initialise();

});

As you can see, I have specified one function to be called - initialise. Within initialise I have set the variable s (declared at the same level as the module) to point to settings so that all sub functions of the module can access it.

What I want to know is, is it possible for the overriding settings to be passed via the html file that calls the .js file?

Ideally I would like there to be default settings for the plug-in, but give the user the option to specify/override certain settings unique to their need.

Any help would be appreciated. Thanks.

Upvotes: 0

Views: 83

Answers (1)

Jeroen
Jeroen

Reputation: 63830

First up, there's a few peculiarities in your code.

One thing is that you have this.someFunction1; (and one for the second function) in your initialize function, but that doesn't quite do anything. It's just a statement.

Another thing is that you declare Filter as an object, but you're missing , (commas) between the various properties.

Finally, you declare someFunction2 twice (though I assume it's an copy/paste error?), and you're missing a semi-colon.

To find these problems you can use a JavaScript linting tool, for example JSHint. Try copy-pasting your question's code there and you'll see all those issues pop up.

If I fix those issues I get to this:

$(function(){
  var s,
  Filter = {

    settings:{
      //default settings
    },

    initialise: function(){
      s = this.settings;
    },

    someFunction1: function(){
      //
    },

    someFunction2: function(){
      //
    }

  };

  Filter.initialise();

});

Currently in this code, the Filter is only visible in the outer closure. To make it available to other bits of code you'll have to export it, either to your own namespace object or as a jQuery plugin.

The first option is possible, but will require a bit more work and assumptions about your setup. So let me stick to showing the second option. The jQuery's plugin tutorial is pretty good, but I've based the following code on this blogpost because it's a bit more complete IMO:

(function($) {

    $.filter = function(element, options) {

        var defaults = {
            // default settings
        }

        var filter = this;

        filter.settings = {};

        var initialise = function() {
            filter.settings = $.extend({}, defaults, options);
            filter.element = element;
            // code goes here
        }

        // This function is *public*, just save it in a 'var' instead of setting it
        // as a property of 'plugin' to keep it private to your plugin.
        filter.someFunction1 = function() {
            // 
        }

        filter.someFunction2 = function() {
            // 
        }

        initialise();
    }

})(jQuery);

In this code the jQuery extend function is used above to extend default settings with user provided options.

You can call your plugin in its most basic form like this:

var options = { filterEmptyOptions: true, showTimeZone: false, /* etc */ };
$.filter($('#myDiv'), options);

Additionally you could save the result of last line and call the plugin's public methods later on.

Upvotes: 2

Related Questions