Plugin Best Practices
In this page:
$.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
<!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>
</head>
<body>
<div class="carousel">Slide</div>
<script>
$.fn.imageCarousel = function() {
return this.addClass("carousel-active");
};
$(".carousel").imageCarousel();
</script>
</body>
</html>Plugins को Chainable रखें
किसी plugin से हमेशा this return करें जब भी वह selected elements पर operate करे, क्योंकि यही वह चीज़ है जो बाद में call पर दूसरे jQuery methods को chain होने देती है।
उदाहरण: Keep Plugins Chainable
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function() {
return this.css("color", "blue");
};
$(".box").myPlugin().fadeIn();
</script>
</body>
</html>Defaults और Options इस्तेमाल करें
किसी plugin के options के लिए हमेशा sensible default values दें, और caller द्वारा supply किए गए options को उन defaults के साथ merge करें — आमतौर पर $.extend( इस्तेमाल करके।
उदाहरण: Use Defaults and Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function(options) {
const settings = $.extend({speed: 300}, options);
return this.fadeIn(settings.speed);
};
$(".box").myPlugin();
</script>
</body>
</html>Scope Protect करें और Conflicts से बचें
किसी plugin के internal helper variables को private रखने के लिए एक closure इस्तेमाल करें, और plugin को खुद एक genuinely unique name दें, क्योंकि दोनों practices इसे कम करती हैं।
उदाहरण: Protect Scope and Avoid Conflicts
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
(function($) {
$.fn.uniquePluginName = function() {
return this.css("color", "green");
};
})(jQuery);
</script>
</body>
</html>Validate करें और Document करें
एक trustworthy plugin अपने inputs को हमेशा सही मानने के बजाय validate करता है, और अपने options तथा expected usage को clearly document करता है।
उदाहरण: Validate and Document
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function(options) {
if (!options || !options.color) {
console.log("myPlugin requires a color option");
return this;
}
return this.css("color", options.color);
};
$(".box").myPlugin({color: "red"});
</script>
</body>
</html>- किसी plugin का नाम
$.fn.initया$.fn.updateजैसा generic रखना, जो existing methods से collide करता है। each()के बाहर एक shared variable में state store करना, ताकि कई elements एक-दूसरे की settings overwrite कर दें।$.extend(defaults, options)से shareddefaultsobject को 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: