JQuery- এ প্রক্সি () বোঝা

167

দস্তাবেজগুলি থেকে আমি বুঝতে পারি যে .proxy()আর্গুমেন্ট হিসাবে পাস হওয়া ফাংশনের সুযোগটি বদলে যাবে। কেউ দয়া করে আমাকে এই আরও ভাল ব্যাখ্যা করতে পারেন? কেন আমাদের এটি করা উচিত?

javascript jquery

— আদিত্য শুক্লা
সূত্র

1

ডকুমেন্টেশন অনুসারে, "এই পদ্ধতিটি ইভেন্ট হ্যান্ডলারগুলিকে এমন কোনও উপাদানের সাথে সংযুক্ত করার জন্য সবচেয়ে দরকারী যেখানে প্রসঙ্গটি অন্য কোনও বস্তুর দিকে ফিরে ইঙ্গিত করছে Additionally অতিরিক্তভাবে, jQuery নিশ্চিত করে যে আপনি jQuery.proxy () থেকে ফিরে ফাংশনটি আবদ্ধ করলেও এটি হবে তবুও সঠিক ফাংশনটি আবদ্ধ করুন, যদি আসলটি পাস হয় "। আপনি যে অভাব খুঁজে পেয়েছেন সেই শব্দবন্ধ সম্পর্কে বিশেষ কিছু আছে?

— bzlm

1

এটি এখানে অস্পষ্ট, অতিরিক্ত jQuery নিশ্চিত করে যে আপনি jQuery.proxy () থেকে ফিরে আসা ফাংশনটি আবদ্ধ করলেও এটি এখনও সঠিক ফাংশনটি আবদ্ধ করবে, যদি মূলটি পাস করে if "আসলটি কী বোঝায়?

— আদিত্য শুক্ল

আসলটি হ'ল যার জন্য একটি প্রক্সি তৈরি করা হয়েছিল। তবে যেহেতু আপনি এই জিনিসগুলি পুরোপুরি উপলব্ধি করতে পারছেন না, আপনি কি নিশ্চিত যে এটি ব্যবহার করা উচিত?

— bzlm

1

নেট uts। প্রক্সি কীভাবে কাজ করে তা দেখিয়ে একটি দুর্দান্ত ভিডিও টিউটোরিয়াল এখানে। http://net.tutsplus.com

— হুসেন

1

@ বিজেএলএম, আমি যখন এই পদ্ধতিতে এসেছি তখন আমি jquery ডকুমেন্টেশন পড়ছিলাম।

— আদিত্য শুক্ল

381

এটি চূড়ান্তভাবে যা করে তা হ'ল এটি নিশ্চিত করে যে thisকোনও ফাংশনের মান আপনার পছন্দসই মূল্য হবে।

একটি সাধারণ উদাহরণ হ্যান্ডলারের setTimeoutঅভ্যন্তরে স্থান নেয় inclick

এটা নাও:

$('#myElement').click(function() {
        // In this function, "this" is our DOM element.
    $(this).addClass('aNewClass');
});

উদ্দেশ্য যথেষ্ট সহজ। যখন myElementক্লিক করা হয়, এটি ক্লাস করা উচিত aNewClass। হ্যান্ডলারের ভিতরে thisক্লিক করা উপাদানটির প্রতিনিধিত্ব করে।

তবে কি আমরা ক্লাস যুক্ত করার আগে একটি সংক্ষিপ্ত বিলম্ব চেয়েছি? আমরা setTimeoutএটি সম্পাদন করতে একটি ব্যবহার করতে পারি, তবে সমস্যাটি হ'ল আমরা যে ফাংশনকেই দেই না কেন setTimeout, সেই thisফাংশনের অভ্যন্তরের মানটি windowআমাদের উপাদানটির পরিবর্তে হবে ।

$('#myElement').click(function() {
    setTimeout(function() {
          // Problem! In this function "this" is not our element!
        $(this).addClass('aNewClass');
    }, 1000);
});

আমরা এর পরিবর্তে যা করতে পারি তা হ'ল কল করা $.proxy(), এটি ফাংশন প্রেরণ করা এবং আমরা যে মূল্যটি অর্পণ করতে চাই thisএবং এটি একটি ফাংশন ফিরিয়ে দেয় যা সেই মানটি ধরে রাখবে।

$('#myElement').click(function() {
   // ------------------v--------give $.proxy our function,
    setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    }, this), 1000);
   // ---^--------------and tell it that we want our DOM element to be the
   //                      value of "this" in the function
});

সুতরাং আমরা $.proxy()ফাংশনটি দেওয়ার পরে এবং আমরা যে মানটি চাই তার জন্য thisএটি একটি ফাংশন ফিরিয়ে দিয়েছে যা নিশ্চিত করবে যে thisএটি সঠিকভাবে সেট করা আছে।

কিভাবে এটা কাজ করে? এটি কেবলমাত্র একটি বেনাম ফাংশন প্রদান করে যা পদ্ধতিটি ব্যবহার করে আমাদের ফাংশনটিকে কল করে .apply(), যা এটির মান স্পষ্টভাবে সেট করতে দেয় this।

ফিরে আসা ফাংশনটির সরলীকৃত চেহারা দেখতে দেখতে দেখতে পেলাম:

function() {
    // v--------func is the function we gave to $.proxy
    func.apply( ctx );
    // ----------^------ ctx is the value we wanted for "this" (our DOM element)
}

সুতরাং এই বেনাম ফাংশনটি দেওয়া হয় setTimeout, এবং এটি যা করে তা হ'ল যথাযথ thisপ্রসঙ্গে আমাদের মূল ফাংশনটি কার্যকর করা ।

— user113716
সূত্র

এর $.proxy(function () {...}, this)চেয়ে ব্যবহারের মান কী (function() {...}).call(this)? পার্থক্য আছে কি?

— জাস্টিন মরগান 15

11

@ জাস্টিনমোরগান: আপনার সাথে .callসাথেই ফাংশনটি কল করা হচ্ছে। সহ $.proxy, এটি Function.prototype.bindএটি নতুন ফাংশনটি ফেরত দেওয়ার মতো । এই নতুন ফাংশনের thisমান স্থায়ীভাবে আবদ্ধ থাকে, যাতে যখন এটি পাস হয়ে যায় setTimeoutএবং setTimeoutপরে ফাংশনটি কল করে, তার এখনও সঠিক thisমান থাকতে পারে।

— ধূসর অবস্থা

2

এই জাতীয় কিছুর উপর এই কৌশলটির সুবিধা, যদি থাকে তবে কী? '(' # myElement ')। ক্লিক করুন (ফাংশন () {var el = $ (এটি); সেটটাইমআউট (ফাংশন () {el.addClass (' aNewClass ');}, 1000);});

— গ্রেগ

1

আপনাকে এই উদাহরণের জন্য $। প্রক্সি পদ্ধতি ব্যবহার করতে হবে না tead তবে আপনি কেবল $ ('# মাইলেমেন্ট') এর মতো এটি পুনরায় লিখতে পারবেন ((ফাংশন () {var যে = এই; সেটটাইমআউট (ফাংশন () {/ / হ্যান্ডলার পদ্ধতির স্কোপ হিসাবে ঘোষিত ভেরিয়েবলের মাধ্যমে নতুন প্রসঙ্গ $ (যে) .এডিডক্লাস ('নিউ নিউক্লাস');}, 1000);});

— পল

4

112 কে রেপ সহ একটি অনামী ব্যবহারকারী, ভীতিজনক-ভাল জাভাস্ক্রিপ্ট / jQuery জ্ঞান, এবং অক্টোবর ২০১১ থেকে দেখা হয়নি ... জন রেজিগ সম্ভবত?

— ক্যান্তেরা

49

বেশী বিস্তারিত মধ্যে যাওয়া ছাড়া (যা প্রয়োজন হবে কারণ এই সম্পর্কে কনটেক্সট এর নাম ECMAScript এ, এ প্রসঙ্গে পরিবর্তনশীল ইত্যাদি)

ইসিএমএ- / জাভাস্ক্রিপ্টে "কনটেক্সট" ধরণের তিন ধরণের রয়েছে:

গ্লোবাল প্রসঙ্গ
ফাংশন প্রসঙ্গে
স্পষ্ট প্রসঙ্গ

প্রতিটি কোডই এর সম্পাদন প্রসঙ্গে কার্যকর করা হয় । এখানে একটি বৈশ্বিক প্রেক্ষাপট রয়েছে এবং এখানে ফাংশন (এবং ইভাল) প্রসঙ্গে অনেকগুলি দৃষ্টান্ত থাকতে পারে। আকর্ষণীয় অংশ:

ফাংশনের প্রতিটি কল ফাংশন সম্পাদন প্রসঙ্গে প্রবেশ করে। কোনও ক্রিয়াকলাপের সম্পাদনের প্রসঙ্গটি দেখে মনে হচ্ছে:

অ্যাক্টিভেশন অবজেক্ট
স্কোপ
এই মানটি

সুতরাং এই মানটি একটি বিশেষ অবজেক্ট যা এক্সিকিউশন প্রসঙ্গে। ইসিএমএ- / জাভাস্ক্রিপ্টে দুটি ফাংশন রয়েছে যা একটি কার্য সম্পাদন প্রসঙ্গে এই মানটিকে পরিবর্তন করতে পারে :

.call()
.apply()

আমাদের যদি কোনও ফাংশন থাকে তবে foobar()আমরা কল করে এই মানটি পরিবর্তন করতে পারি :

foobar.call({test: 5});

এখন আমরা foobarযে বস্তুটি পাস করেছি সেটিতে আমরা অ্যাক্সেস করতে পারি:

function foobar() { 
    this.test // === 5
}

এটি ঠিক কি jQuery.proxy()করে। এটা একটা সময় লাগে functionএবং context(যা একটি বস্তু ছাড়া অন্য কিছুই হয়) এবং আবাহন করার মাধ্যমে ফাংশন সংযোগ .call()বা .apply()এবং আয় নতুন ফাংশন যা।

— jAndy
সূত্র

1

ফাংশনটির জন্য অফিসিয়াল jQuery ডক্সের চেয়ে দুর্দান্ত / সহজ / দুর্দান্ত

— হাইগুয়ারো

4

আমি এই ফাংশনটি লিখেছি:

function my_proxy (func,obj)
{
    if (typeof(func)!="function")
        return;

    // If obj is empty or another set another object 
    if (!obj) obj=this;

    return function () { return func.apply(obj,arguments); }
}

— sgv_test
সূত্র

1

"অবিলম্বে-আমন্ত্রিত ফাংশন এক্সপ্রেশন, সংক্ষিপ্ত: IIFE" ~~স্ব সম্পাদনকারী ফাংশন~~ ব্যবহার করে একই লক্ষ্য অর্জন করা যেতে পারে :

    $('#myElement').click(function() {  
      (function(el){
         setTimeout(function() {
              // Problem! In this function "this" is not our element!
            el.addClass('colorme');
        }, 1000);
      })($(this)); // self executing function   
    });

.colorme{
  color:red;
  font-size:20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <div id="myElement">Click me</div>
</body>
</html>

স্নিপেট প্রসারিত করুন

— কিংবদন্তী
সূত্র

2

যে সাধারণত একটি "অবিলম্বে-প্রার্থনা ফাংশন অভিব্যক্তি" (IIFE) বরং একটি "আত্ম নির্বাহ ফাংশন" চেয়ে বলা হচ্ছে, দেখুন en.wikipedia.org/wiki/Immediately-invoked_function_expression ।

— ক্রিস বীজ