← Back to jQuery Course | Chapter 14: Custom Plugins | Lesson 4 of 4

Plugin की बेस्ट प्रैक्टिस

Plugin names specific और समझने में आसान होने चाहिए। ऐसे names से बचें जो दूसरे plugins से conflict कर सकें।

In this page:

  1. Clear Names इस्तेमाल करें
  2. Plugins को Chainable रखें
  3. Defaults और Options इस्तेमाल करें
  4. Scope Protect करें और Conflicts से बचें
  5. Validate करें और Document करें
Syntax
javascript 
$.fn.pluginName = function(options) {
  var settings = $.extend({option: defaultValue}, options);
  return this.each(function() {
    // work on $(this) using settings
  });
};

Clear Names इस्तेमाल करें

एक अच्छी तरह से named plugin init या update जैसे generic, easily-collided names से बचता है, और इसके बजाय इतना specific name इस्तेमाल करता है जो describe करे कि यह असल में।

उदाहरण: Use Clear Names

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    .carousel-active { border: 2px solid blue; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div class="carousel">Slide</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $.fn.imageCarousel = function() {
        return this.addClass("carousel-active");
      };
      $(".carousel").imageCarousel();
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Plugins को Chainable रखें

किसी plugin से हमेशा this return करें जब भी वह selected elements पर operate करे, क्योंकि यही वह चीज़ है जो बाद में call पर दूसरे jQuery methods को chain होने देती है।

उदाहरण: Keep Plugins Chainable

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      .box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div class="box" style="display:none">Box</div>
    <button id="btn">Run Plugin</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $.fn.myPlugin = function() {
        return this.css("color", "gold");
      };
      $("#btn").on("click", function() {
        $(".box").myPlugin().fadeIn();
        $("#output").text("Plugin returned the jQuery object, so fadeIn() could be chained");
      });
      $("#resetBtn").on("click", function() {
        $(".box").stop(true, true).hide().css("color", "white");
        $("#output").text("");
      });
    </script>
  </body>
</html>

Defaults और Options इस्तेमाल करें

किसी plugin के options के लिए हमेशा sensible default values दें, और caller द्वारा supply किए गए options को उन defaults के साथ merge करें — आमतौर पर $.extend( इस्तेमाल करके।

उदाहरण: Use Defaults and Options

javascript 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      .box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div class="box" style="display:none">Box</div>
    <button id="btn">Run Plugin</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $.fn.myPlugin = function(options) {
        const settings = $.extend({speed: 300}, options);
        return this.fadeIn(settings.speed);
      };
      $("#btn").on("click", function() {
        $(".box").myPlugin();
        $("#output").text("Faded in using the default speed of 300ms");
      });
      $("#resetBtn").on("click", function() {
        $(".box").stop(true, true).hide();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Scope Protect करें और Conflicts से बचें

किसी plugin के internal helper variables को private रखने के लिए एक closure इस्तेमाल करें, और plugin को खुद एक genuinely unique name दें, क्योंकि दोनों practices इसे कम करती हैं।

उदाहरण: Protect Scope and Avoid Conflicts

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Run Plugin</button><button id="resetBtn" class="secondary">Reset</button>
  <p id="target" class="item">Plugin target</p>
  <div id="output"></div>
  <script>
    (function ($) {
      $.fn.uniquePluginName = function () {
        return this.css("color", "green");
      };
    })(jQuery);
    $("#runBtn").click(function () {
      $("#target").uniquePluginName();
      $("#output").text("uniquePluginName() ran inside an IIFE that receives jQuery as $, so $ can't conflict with other libraries");
    });
    $("#resetBtn").click(function () {
      $("#target").css("color", "");
      $("#output").text("");
    });
  </script>
</body>
</html>

Validate करें और Document करें

एक trustworthy plugin अपने inputs को हमेशा सही मानने के बजाय validate करता है, और अपने options तथा expected usage को clearly document करता है।

उदाहरण: Validate and Document

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div class="box">Box</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $.fn.myPlugin = function(options) {
        if (!options || !options.color) {
          $("#output").text("myPlugin requires a color option");
          return this;
        }
        return this.css("color", options.color);
      };
      $(".box").myPlugin({color: "red"});
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

एक Custom Plugin लिखना · jQuery की Prototype चेन · मौजूदा Plugins Integrate करना · Selectors को Cache करना

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी plugin का नाम $.fn.init या $.fn.update जैसा generic रखना, जो existing methods से collide करता है।
  2. each() के बाहर एक shared variable में state store करना, ताकि कई elements एक-दूसरे की settings overwrite कर दें।
  3. $.extend(defaults, options) से shared defaults object को mutate करना, जबकि इसे $.extend({}, defaults, options) होना चाहिए।
चैप्टर सारांश
  • मौजूदा plugins को किसी page में integrate किया जा सकता है।
  • jQuery prototype chain वह तरीका है जिससे plugins नए methods add करते हैं।
  • एक custom plugin लिखना reusable code के लिए best practices follow करता है।
🔒

Chapter Quiz — Complete all 4 topics to unlock

0/4 topics done

Complete these topics first:

← Previous Lesson Authoring a Custom Plugin Next Lesson → Caching Selectors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.