উত্তর:
JQuery- এ fnসম্পত্তিটি কেবলমাত্র সম্পত্তিটির একটি উপনাম prototype।
jQueryশনাক্তকারী (অথবা $) শুধু একটি হল কন্সট্রাকটর ফাংশন , এবং এটি সঙ্গে তৈরি করা সব দৃষ্টান্ত, কন্সট্রাকটর এর প্রোটোটাইপ থেকে উত্তরাধিকারী।
একটি সাধারণ নির্মাণকারীর কাজ:
function Test() {
this.a = 'a';
}
Test.prototype.b = 'b';
var test = new Test();
test.a; // "a", own property
test.b; // "b", inherited propertyএকটি সাধারণ কাঠামো যা jQuery এর স্থাপত্যের অনুরূপ:
(function() {
var foo = function(arg) { // core constructor
// ensure to use the `new` operator
if (!(this instanceof foo))
return new foo(arg);
// store an argument for this example
this.myArg = arg;
//..
};
// create `fn` alias to `prototype` property
foo.fn = foo.prototype = {
init: function () {/*...*/}
//...
};
// expose the library
window.foo = foo;
})();
// Extension:
foo.fn.myPlugin = function () {
alert(this.myArg);
return this; // return `this` for chainability
};
foo("bar").myPlugin(); // alerts "bar"function func1 (a) { ... }হবে এবং এখানে একটি সম্পত্তি 'a' ভেরিয়েবল হবে var foo = {}; foo.a = 'a'।
jQuery.fnসংক্ষিপ্ত জন্য সংজ্ঞায়িত করা হয় jQuery.prototype। থেকে সোর্স কোড :
jQuery.fn = jQuery.prototype = {
// ...
}এর অর্থ jQuery.fn.jqueryহ'ল একটি উপাধি jQuery.prototype.jqueryযা বর্তমান jQuery সংস্করণটি দেয়। আবার উত্স কোড থেকে :
// The current version of jQuery being used
jquery: "@VERSION",fnআক্ষরিক অর্থে jquery বোঝায় prototype।
কোডের এই লাইনটি সোর্স কোডে রয়েছে:
jQuery.fn = jQuery.prototype = {
//list of functions available to the jQuery api
}তবে এর পিছনে আসল সরঞ্জামটি fnআপনার নিজস্ব কার্যকারিতা jQuery এ হুক করা এর উপলব্ধতা। মনে রাখবেন যে jquery আপনার ফাংশনের প্যারেন্ট স্কোপ thisহবে , সুতরাং jquery অবজেক্টটি উল্লেখ করবে।
$.fn.myExtension = function(){
var currentjQueryObject = this;
//work with currentObject
return this;//you can include this if you would like to support chaining
};সুতরাং এখানে এটি একটি সহজ উদাহরণ। বলি আমি দুটি এক্সটেনশান তৈরি করতে চাই, একটি যা নীল সীমানা রাখে এবং কোনটি নীল রঙটি টেক্সট রঙ করে এবং আমি সেগুলি শৃঙ্খলিত করে রাখতে চাই।
jsFiddle Demo$.fn.blueBorder = function(){
this.each(function(){
$(this).css("border","solid blue 2px");
});
return this;
};
$.fn.blueText = function(){
this.each(function(){
$(this).css("color","blue");
});
return this;
};এখন আপনি এইগুলিকে এই শ্রেণীর বিপরীতে ব্যবহার করতে পারেন:
$('.blue').blueBorder().blueText();(আমি জানি যে এটি বিভিন্ন শ্রেণীর নাম প্রয়োগ করার মতো CSS সহ সর্বোত্তমভাবে সম্পন্ন হয়েছে তবে দয়া করে মনে রাখবেন এটি ধারণাটি দেখানোর জন্য একটি ডেমো মাত্র)
এই উত্তরে পূর্ণ বর্ধনের একটি ভাল উদাহরণ রয়েছে।
eachআপনার উদাহরণ কোডটি এড়িয়ে যেতে পারবেন না ? উপাদানগুলির উপর অ্যালারডিটি পুনরাবৃত্তি হওয়ার সাথে সাথে $.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };সূক্ষ্মভাবে কাজ করবে .css()।
cssফাংশনটি স্বয়ংক্রিয়ভাবে প্রতিটিটির সাথে অভ্যন্তরীণভাবে তাদের উপর পুনরাবৃত্তি হবে। এটি কেবল thisযেখানে বাইরেরটি হল জেকারি অবজেক্ট এবং অভ্যন্তরীণটি উপাদানটিকেই রেফারেন্স করে তার মধ্যে পার্থক্যগুলি দেখানোর উদাহরণ মাত্র ।
JQuery সোর্স কোডে আমাদের jQuery.fn = jQuery.prototype = {...}যেহেতু jQuery.prototypeএকটি অবজেক্ট রয়েছে তার মানটি jQuery.fnকেবল একই বস্তুর jQuery.prototypeরেফারেন্স হবে যা ইতিমধ্যে রেফারেন্স করে।
এটি নিশ্চিত করার জন্য আপনি পরীক্ষা করতে jQuery.fn === jQuery.prototypeপারেন যে trueএটি যদি মূল্যায়ন করে (যা এটি করে) তবে তারা একই বস্তুর রেফারেন্স দেয়