パブリックメソッドとコールバックの統合

プラグインを操作する

プラグインの基本を振り返る

(function($) {
  $.fn.myPlugin = function(options) {
    // Default settings
    var settings = $.extend({}, $.fn.myPlugin.defaults, options);

    return this.each(function() {
      var $this = $(this); // The element the plugin is applied to
      // Plugin logic goes here
      console.log("Plugin initialized on: " + $this.attr('id'));
    });
  };

  // Default options
  $.fn.myPlugin.defaults = {
    message: "Hello from plugin!"
  };
})(jQuery);

// How to use (in HTML <div id="myElement"></div>):
// $('#myElement').myPlugin();

パブリックメソッドとは

パブリックメソッドを実装する

(function($) {
  $.fn.counterPlugin = function(options) {
    var settings = $.extend({
      initialValue: 0
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initialValue;

      var methods = {
        getValue: function() {
          return value;
        },
        increment: function() {
          value++;
          $this.text(value); // Update display
        },
        init: function() {
          $this.text(value); // Initial display
        }
      };

      // Store methods on the element's data
      $this.data('counterPlugin', methods);
      methods.init(); // Initialize display
    });
  };
})(jQuery);

// HTML: <div id="myCounter"></div>
// Usage: $('#myCounter').counterPlugin();
// Later: $('#myCounter').data('counterPlugin').getValue();

パブリックメソッドを呼び出す

// Assume counterPlugin from previous scene is loaded

// HTML: <div id="myCounter"></div>

$(document).ready(function() {
  // Initialize the plugin
  $('#myCounter').counterPlugin({ initialValue: 5 });

  // Get the plugin instance
  var counterInstance = $('#myCounter').data('counterPlugin');

  // Call public methods
  console.log("Current value: " + counterInstance.getValue());
  counterInstance.increment();
  console.log("After increment: " + counterInstance.getValue());
});

コールバックとは

コールバックを実装する

(function($) {
  $.fn.counterPlugin = function(options) {
    var settings = $.extend({
      initialValue: 0,
      onChange: function(newValue) {} // Default empty callback
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initialValue;

      var methods = {
        getValue: function() {
          return value;
        },
        increment: function() {
          value++;
          $this.text(value);
          // Call the callback when value changes
          settings.onChange.call($this[0], value); 
        },
        init: function() {
          $this.text(value);
        }
      };

      $this.data('counterPlugin', methods);
      methods.init();
    });
  };
})(jQuery);

// Usage: See next scene!

コールバック関数を渡す

// Assume counterPlugin with onChange callback is loaded

// HTML: <div id="myCounter"></div>

$(document).ready(function() {
  $('#myCounter').counterPlugin({
    initialValue: 10,
    onChange: function(newValue) {
      console.log("Counter changed to: " + newValue + " on element: " + this.id);
      if (newValue % 2 === 0) {
        $(this).css('color', 'blue');
      } else {
        $(this).css('color', 'red');
      }
    }
  });

  var counterInstance = $('#myCounter').data('counterPlugin');
  counterInstance.increment(); // Triggers callback
  counterInstance.increment(); // Triggers callback
});

複数のメソッドとコールバック

(function($) {
  $.fn.advancedCounter = function(options) {
    var settings = $.extend({
      initial: 0,
      onIncrement: null, // New callback
      onDecrement: null, // New callback
      onReset: null      // New callback
    }, options);

    return this.each(function() {
      var $this = $(this);
      var value = settings.initial;

      var methods = {
        getValue: function() { return value; },
        increment: function() {
          value++;
          $this.text(value);
          if ($.isFunction(settings.onIncrement)) {
            settings.onIncrement.call($this[0], value);
          }
        },
        decrement: function() {
          value--;
          $this.text(value);
          if ($.isFunction(settings.onDecrement)) {
            settings.onDecrement.call($this[0], value);
          }
        },
        reset: function() {
          value = settings.initial;
          $this.text(value);
          if ($.isFunction(settings.onReset)) {
            settings.onReset.call($this[0], value);
          }
        },
        init: function() { $this.text(value); }
      };

      $this.data('advancedCounter', methods);
      methods.init();
    });
  };
})(jQuery);

// HTML: <div id="myAdvancedCounter"></div>
$(document).ready(function() {
  $('#myAdvancedCounter').advancedCounter({
    initial: 100,
    onIncrement: function(v) { console.log("Inc: " + v); },
    onReset: function(v) { console.log("Reset to: " + v); }
  });
  var inst = $('#myAdvancedCounter').data('advancedCounter');
  inst.increment();
  inst.reset();
});

パブリックメソッドとコールバックのヒント

プラグイン操作クイズ

まとめと次のステップ