কীভাবে jQuery এ প্রসারিত () কাজ করে?


119

আমি এটি একটি প্লাগইনে দেখেছি:

var options = $.extend(defaults, options); 

এটা কিভাবে কাজ করে?

কি করে extend()?


1
আপনি jQuery ডকুমেন্টেশন এটি সম্পর্কে পড়তে পারেন কিন্তু আমি অনুমান এই এটির জন্য একটি ভাল ব্যাখ্যা।
ifaour

jQuery ভাল ডক্স আছে। api.jquery.com কেবল অনুসন্ধানের jQuery ক্ষেত্রে পদ্ধতির নামটি টাইপ করুন ।
ব্যবহারকারী 113716

42
আমার মনে হয় টড jQuery.extend কীভাবে কাজ করে তা কীভাবে জানতে চান তা জানতে চান। উদাহরণস্বরূপ, এটি কি পুরো নতুন বস্তু তৈরি করতে প্রতিটি সম্পত্তি জুড়ে লুপ করে, বা এটি কিছু দুর্দান্ত পদ্ধতিতে প্রোটোটাইপ উত্তরাধিকার ব্যবহার করে?
b01

উত্তর:


178

একাধিক পরামিতি

কীভাবে প্রসারিত কাজগুলি ব্যাখ্যা করার জন্য ডকুমেন্টেশনটি সুনির্দিষ্ট নয়, তাই আমি কিছুটা পরীক্ষা চালিয়েছি:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

( console.logফাংশনটি ফায়ারবগে কাজ করার উদ্দেশ্যে; সতর্কতার সাথে এটি প্রতিস্থাপন করুন) (অথবা আপনি যদি চান তবে অন্য কোনও আউটপুট ফাংশন)।

ফলাফলগুলি হ'ল:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

এটির মাধ্যমে আমরা সেই jQuery.extend () দেখতে পাচ্ছি:

  • প্রথম পরামিতি দ্বারা সরবরাহিত বস্তুর সাথে শুরু হয়।
  • এটিতে দ্বিতীয় প্যারামিটারের কোনও সম্পত্তি যুক্ত করে। সম্পত্তিটি ইতিমধ্যে প্রথম প্যারামিটারে উপস্থিত থাকলে এটি ওভাররাইট করা হয়। দ্বিতীয় প্যারামিটারের জন্য অবজেক্টটি অপরিবর্তিত।
  • পরবর্তী কোনও প্যারামিটার দিয়ে উপরের পুনরাবৃত্তি করে।
  • প্রথম প্যারামিটারটি দেয়।

বিকল্পগুলির সম্পূর্ণ সেট পেতে ব্যবহারকারী এবং ডিফল্ট বিকল্প-বস্তুগুলির একত্রিত করার জন্য এটি দরকারী:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

নোট করুন যে "নাল" ওভাররাইট করার জন্য একটি বৈধ মান, তবে "অপরিবর্তিত" নয়। আপনি এটি ব্যবহার করতে সক্ষম হতে পারে।

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

ফলাফল স্বরূপ:

A: Foo=null Bar=a

একক প্যারামিটার

আপনি যদি কেবল একটি অবজেক্টে পাস করেন jQuery.extend()তবে jQuery ধরে নেয় যে jQueryঅবজেক্টটি নিজেই "প্রথম" প্যারামিটার (যেমন: একটিটি সংশোধন করা উচিত), এবং আপনার অবজেক্টটি "দ্বিতীয়" (যেমন: প্রথমটিতে যুক্ত হওয়া) । তাই:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

ফলাফল স্বরূপ:

Before: undefined
After: 1

3
সুতরাং বি.বাজ যদি কোনও বস্তুর {zed: 'dark'}পরিবর্তে বলার অপেক্ষা রাখে 2এবং আপনি সেট করেন r.baz.zed = 'light'তবে এর মান কত b.baz.zedহবে? অর্থাত্ সম্পত্তিগুলি অনুলিপি করা হয়েছে বা রেফারেন্সের মাধ্যমে মার্জ করা হয়েছে?
এরিচবিচুল্জ

4
আমার নিজের প্রশ্নের উত্তর b.baz.zedদিতে হবে, light- অর্থগুলি রেফারেন্সের সাথে মিশে গেছে। একটি দেখতে বেহালার
ErichBSchulz

4
জমকালো ব্যাখ্যা, +1
ক্যারি কেন্ডাল

2
আমি আশা করি সরকারী ডকুমেন্টেশনগুলি এর মতো পরিষ্কার হওয়া উচিত। +1
থারিক নগ্রোহোতোমো 20'15

2
ex .পরিবর্তন (সত্য, অবজেক্ট 1, অবজেক্ট 2); এবং ex। Expend (অবজেক্ট 1, অবজেক্ট 2); পার্থক্য ...
বিনয় এস জৈন

27

এটি একটি বস্তুর সামগ্রীটিকে অন্য একটিতে মার্জ করে । আমরা যদি দুটি বস্তু পাস করি তবে দ্বিতীয় অবজেক্ট বৈশিষ্ট্যগুলি প্রথম অবজেক্ট / প্রথম প্যারামিটারে যুক্ত করা হবে

Ex: $.extend(object1, object2);

এখন অবজেক্ট 1 এ অবজেক্ট 2 এর বৈশিষ্ট্য রয়েছে

আমরা যদি দুটি বস্তু একত্রিত করতে চাই তবে আমাদের প্রথম প্যারামিটারে খালি বস্তুটি পাস করতে হবে

Ex: var newObject = $.extend({}, object1, object2);

এখন নিউঅবজেক্টে অবজেক্ট 1 এবং অবজেক্ট 2 এর দুটি বৈশিষ্ট্য রয়েছে


12

JQuery ডকুমেন্টেশন থেকে

দুই বা ততোধিক অবজেক্টের বিষয়বস্তু একসাথে প্রথম অবজেক্টে মার্জ করুন।

প্লাগইন প্রসঙ্গে: ব্যবহারকারী যদি ফাংশনের জন্য alচ্ছিক পরামিতিগুলি সেট না করে থাকে তবে তার পরিবর্তে একটি ডিফল্ট মান ব্যবহৃত হবে।


1
এই উত্তরটি একটি মন্তব্যে থাকা উচিত।
নোলো

আপনাকে JOBG ধন্যবাদ!
হর্ষ বর্ধন

7

কীভাবে jQuery এ প্রসারিত () কাজ করে? [সমাধান]

jQuery গভীর অনুলিপি এবং হালকা অনুলিপি আছে। প্রথম বুলেটিয়ান এটি স্থির করে, আলোর পক্ষে গভীর এবং মিথ্যা।

উদাহরণ স্বরূপ:

  • jQuery.extend (মিথ্যা, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    ফলাফলটি হবে: a 'a': a 'a2': 2}} কারণ এটি হালকা অনুলিপি মাত্র 1 এর সাথে তুলনা করে।

    এখানে চিত্র বর্ণনা লিখুন

  • jQuery.extend (সত্য, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    ফলাফলটি হবে: {'a': {'a1': 1, 'a2': 2} many এটি অনেক স্তরের অবজেক্টের সাথে গভীর কপি (ঠিক অ্যারের স্তরের মতো)

    এখানে চিত্র বর্ণনা লিখুন

  • a, b, c অবজেক্ট বা অ্যারে সহ jQuery.extend (a, b, c)। ফ্লো ওভাররাইট হবে বি-> এ, সি -> এ (বি ওভাররাইট এ, সি ওভাররাইড এ ...) এই ফাংশনটি একটি এবং তারও পরিবর্তিত মান ফিরে আসবে।

উন্নত উদাহরণ:

  • jQuery.extend ({'সংখ্যা_প্রেম': 1})

    যদি আপনি কেবল একটি পরম পাস করেন। jQuery নিজেকে প্রসারিত করবে। কনসোল.লগ (jQuery ['সংখ্যা_প্রেম']) আউটপুট 1 করবে।

    এখানে চিত্র বর্ণনা লিখুন

  • jQuery.extend (1, {'সংখ্যা_প্রেম': '2'}); এই উদাহরণটি jQuery নিজেই সংযোজন নয়। প্রথম প্যারামিটারটি বুলিয়ান হতে হবে। এই ক্ষেত্রে এটি {'নাম্বার_প্রেম': '2' return এবং jQuery আপডেট হবে না।

    এখানে চিত্র বর্ণনা লিখুন

  • jQuery.extend (a, b, c, d, e, f); অর্ডার মার্জ হবে। খ -> এ, সি -> এ, ডি -> এ, ই -> এ, চ -> এ (বি ওভাররাইড এ, সি ওভাররাইড এ ...)। এবং ফলাফল রিটার্ন হবে a।

    a = p 'p': 1} সহ} jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) ফিরে আসবে, এবং a = {'পি': 6}। এই ফাংশনে পাস নম্বর পরামিতি সীমাহীন।

    এখানে চিত্র বর্ণনা লিখুন


1
ডকগুলি থেকে "সতর্কতা: প্রথম যুক্তির জন্য মিথ্যা পাস করা সমর্থনযোগ্য নয়।"
নোলো

2

উদ্দেশ্য একটি বিদ্যমান বস্তু প্রসারিত করা হয়। উদাহরণস্বরূপ, যদি আমাদের কোনও টেম্পলেট অবজেক্ট থাকে এবং আমরা আরও বৈশিষ্ট্য যুক্ত করে বা বিদ্যমান বৈশিষ্ট্যগুলিকে ওভাররাইড করে এটি প্রসারিত করতে চাই, jquery প্রসারিত দরকারী হতে পারে।

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};

এখন আমরা যদি এটি প্রসারিত করতে চাই, তবে $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); এটি আমাদের আউটপুট দেবে, carObjectTemplate বাড়িয়ে যোগ করবে adding

{"color":"red"} property and overriding "model" property from "city" to "amaze"

প্রথম বুলিয়ান প্যারামিটারটি সত্য / মিথ্যা বলতে বোঝানো হয় যে আমাদের গভীর বা অগভীর অনুলিপি প্রয়োজন কিনা


গভীর বা অগভীর অনুলিপি বলতে কী বোঝায়?
সেল্ভা গণপতি

0

এটি ঠিক এই কাজ করে

বর্ণনা : দু'একটি বা তারও বেশি অবজেক্টের বিষয়বস্তু একত্রে প্রথম অবজেক্টে মার্জ করুন।

JQuery.extend এ আরও ()


1
একটি লাইন উত্তর এবং ডক্সের লিঙ্কগুলি উত্তর হিসাবে খুব বেশি ব্যবহার হয় না এবং একটি মন্তব্যে রেখে দেওয়া উচিত।
নোলো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.