CODEWITHSUNDEEP
javascriptpluginsjquery-plugins
broadband
broadband

Reputation: 3498

jQuery plugin template with public and private methods

I'm using next jQuery plugin implementation for defining my plugins. I'm been using javascript for several years now, but javascript has so many surprises.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    (function ($) {
      // is using $.fn best practise / ok? or is something else better
      // according to https://learn.jquery.com/plugins/basic-plugin-creation it's fine
      $.fn.myPlugin = function () {

        // private variables
        var instance = this;
        var privateVar1 = "some Value";

        // private methods
        var privateMethod = function(arg1) {

          var bla = privateVar1;

          if( arg1 > 0) {
            arg1 -= 1;
            // to call public method I just call:
            instance.publicMethod(arg1);
          }
        };

        // public methods start with this.
        this.initialize = function () {

          // this can refer to different things, depending on calling context
          // https://stackoverflow.com/questions/3562980/javascript-this-value-changing-but-cant-figure-out-why
          return this;
        };

        this.publicMethod = function(arg1) {
          debugger;

          // private methods are called only with the name
          privateMethod(arg1);
        };

         return this.initialize();
      }
    })(jQuery);


  $(document).ready(function() {    

     var a = $("#test").myPlugin();
     a.publicMethod(1);

  });
    </script>
  </head>

  <body>
    <div id="test">Test
       <div id="test1"></div> 
    </div>
  </body>
</html>

I want to make sure that there aren't any bugs. For example, I know this is changed based on context (Javascript 'this' value changing, but can't figure out why) ... Have I missed something?

The idea is to write custom plugins in the form like this:

$("#myList").myCredentialsDialog();
$("#cars").carsGrid();
...

Basically so that every custom plugin can use this template. The template means var instance = this, this.publicMethod, var privateMethod = function() ...

Upvotes: 0

Views: 936

Answers (1)

William Gunawan
William Gunawan

Reputation: 750

You may confused by this context in javascript. You're right about this will change following the context, it will do if you use function() { } if you want this from outside of context then use () => { } instead.

I'm analyse your code and think it would not work. You can do public variable like this.

  <head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    (function ($) {
      // is using $.fn best practise / ok? or is something else better
      // according to https://learn.jquery.com/plugins/basic-plugin-creation it's fine
      $.fn.myPlugin = function () {

        // private variables
        var privateVar1 = "some Value";

        // private methods
        var privateMethod = (arg1) => {

          var bla = privateVar1;

          if( arg1 > 0) {
            arg1 -= 1;
            // to call public method I just call:
            this.publicMethod(arg1);
          }
        };

        // public methods start with this.
        this.initialize = () => {

          // this can refer to different things, depending on calling context
          // https://stackoverflow.com/questions/3562980/javascript-this-value-changing-but-cant-figure-out-why
          return this;
        };

        this.publicMethod = (arg1) => {
          debugger;

          // private methods are called only with the name
          privateMethod(arg1);
        };

         return this.initialize();
      }
    })(jQuery);


  $(document).ready(function() {    

     var a = $("#test").myPlugin();
     a.publicMethod(1);

  });
    </script>
  </head>

  <body>
    <div id="test">Test
       <div id="test1"></div> 
    </div>
  </body>
</html>

This code should work.

Upvotes: 1

Related Questions