কেন কোনও বেনামি ফাংশন সংজ্ঞায়িত করা হয় এবং এটিকে যুক্তি হিসাবে jQuery দেওয়া হয়?


99

আমি ব্যাকবোন.জেএস স্ক্রীনকাস্টগুলি থেকে দুর্দান্ত পীপকোড ডেমো কোডটি দিয়ে দেখছি। এতে, ব্যাকবোন কোডটি সমস্ত বেনামে ফাংশনে আবদ্ধ থাকে যা jQuery অবজেক্টটি পাস করে:

(function($) {
  // Backbone code in here
})(jQuery);

আমার নিজের ব্যাকবোন কোডটিতে, আমি সবেমাত্র jQuery DOM 'রেডি' ইভেন্টে আমার সমস্ত কোডটি গুটিয়ে রেখেছি:

$(function(){
  // Backbone code in here
});

প্রথম পদ্ধতির পয়েন্ট / সুবিধা কী? এটি এভাবে করা একটি বেনামে ফাংশন তৈরি করে যা তত্ক্ষণাত্ jQuery অবজেক্টটি ফাংশন আর্গুমেন্ট হিসাবে পাস করার সাথে সাথে কার্যকরভাবে কার্যকর করে নিশ্চিত করে যে $ jQuery অবজেক্ট। এটাই কি একমাত্র পয়েন্ট - গ্যারান্টি দেওয়া যে jQuery '$' এর সাথে আবদ্ধ বা এটি করার অন্যান্য কোনও কারণ আছে?


4
পরিবর্তে আপনার প্রথমে SO ব্রাউজ করা উচিত ছিল।
আলেকজান্ডার

অন্যান্য গ্রন্থাগারগুলির সাথে আন্তঃক্রিয়াশীলতা - পৃষ্ঠা লেখকের যদি প্রয়োজন হয় $.noConflict()তবে প্রথম উদাহরণটি এখনও কাজ করবে।
ডিসিড্ডার



@ আলেকজান্ডার তবে তারপরে অন্যান্য লোকেরা প্রথমে এই প্রশ্নটি খুঁজে পাবেন। :-)
caiosm1005

উত্তর:


183

আপনি যে কোড দুটি ব্লক দেখিয়েছেন তা কখন এবং কেন চালায় সে ক্ষেত্রে নাটকীয়ভাবে আলাদা। তারা একে অপরের একচেটিয়া নয়। তারা একই উদ্দেশ্যে কাজ করে না।

জাভাস্ক্রিপ্ট মডিউল


(function($) {
  // Backbone code in here
})(jQuery);

এটি একটি "জাভাস্ক্রিপ্ট মডিউল" প্যাটার্ন, সঙ্গে সঙ্গে আমন্ত্রণমূলক ফাংশন প্রয়োগ করা হয়েছে।

এই কোডের উদ্দেশ্যটি হল আপনার কোডের জন্য "মডুলারালিটি", গোপনীয়তা এবং এনক্যাপসুলেশন সরবরাহ করা।

এর বাস্তবায়ন হ'ল এমন একটি ফাংশন যা তাত্ক্ষণিকভাবে কলিং (jQuery)বন্ধনীর দ্বারা আহ্বান করা হয় । প্রথম বন্ধনীতে jQuery পাস করার উদ্দেশ্য বিশ্বব্যাপী ভেরিয়েবলের স্থানীয় স্কোপিং সরবরাহ করা। এটি $ভেরিয়েবল সন্ধান করার ওভারহেডের পরিমাণ হ্রাস করতে সহায়তা করে এবং কিছু ক্ষেত্রে মিনিফায়ারগুলির জন্য আরও ভাল সংক্ষেপণ / অনুকূলকরণের অনুমতি দেয়।

তাত্ক্ষণিকভাবে চাওয়া ফাংশনগুলি কার্যকর করা হয়, ভাল, অবিলম্বে। ফাংশন সংজ্ঞা সম্পূর্ণ হওয়ার সাথে সাথে ফাংশনটি কার্যকর করা হয়।

jQuery এর "DOMReady" ফাংশন

এই jQuery এর "DOMReady" ফাংশন উপনাম হল: http://api.jquery.com/ready/


$(function(){
  // Backbone code in here
});

jQuery এর "DOMReady" ফাংশন কার্যকর হয় যখন DOM আপনার জাভাস্ক্রিপ্ট কোড দ্বারা চালিত হতে প্রস্তুত হয়।

ব্যাকবোন কোডে ডিওএমআরডি বনাম মডিউলগুলি

JQuery এর DOMReady ফাংশনের অভ্যন্তরে আপনার ব্যাকবোন কোডটি সংজ্ঞায়িত করা এবং এটি আপনার অ্যাপ্লিকেশন কার্যকারিতার জন্য সম্ভাব্য ক্ষতিকারক হিসাবে খারাপ ফর্ম। DOM লোড না হয়ে এবং ম্যানিপুলেট করার জন্য প্রস্তুত না হওয়া পর্যন্ত এই ফাংশনটি কল করা হবে না। এর অর্থ আপনি নিজের অবজেক্টগুলি সংজ্ঞায়িত করার আগে ব্রাউজারটি কমপক্ষে একবার ডমকে বিশ্লেষণ না করা পর্যন্ত আপনি অপেক্ষা করছেন।

DOMReady ফাংশনের বাইরে আপনার ব্যাকবোন বস্তুগুলি সংজ্ঞায়িত করা আরও ভাল ধারণা। আমি, অন্য অনেকের মধ্যে একটি জাভাস্ক্রিপ্ট মডিউল প্যাটার্নের ভিতরে এটি করতে পছন্দ করি যাতে আমি আমার কোডের জন্য এনক্যাপসুলেশন এবং গোপনীয়তা সরবরাহ করতে পারি। আমার মডিউলটির বাইরে আমার যে বিটগুলি প্রয়োজন তার অ্যাক্সেস সরবরাহ করতে আমি "প্রকাশিত মডিউল" প্যাটার্নটি (উপরে প্রথম লিঙ্কটি দেখুন) ব্যবহার করার প্রবণতা রাখি।

DOMReady ফাংশনের বাইরে আপনার অবজেক্টগুলি সংজ্ঞায়িত করে এবং সেগুলি উল্লেখ করার জন্য কিছু উপায় সরবরাহ করে আপনি ব্রাউজারটিকে আপনার জাভাস্ক্রিপ্ট প্রক্রিয়াজাতকরণের সম্ভাবনাটি ব্যবহারকারীর অভিজ্ঞতার গতি বাড়ানোর অনুমতি দিচ্ছেন। এটি কোডটিকে আরও নমনীয় করে তোলে কারণ আপনি জিনিসগুলি সরানোর সময় আরও বেশি ডমরিডি ফাংশন তৈরি করার চিন্তা না করেই জিনিসগুলি চারপাশে সরিয়ে নিতে পারেন।

আপনি সম্ভবত কোনও ব্যাকবোন বস্তু অন্য কোথাও সংজ্ঞায়িত করলেও আপনি সম্ভবত একটি ডমরাডি ফাংশন ব্যবহার করতে যাচ্ছেন still কারণটি হ'ল অনেকগুলি ব্যাকবোন অ্যাপ্লিকেশনকে কোনওভাবে ডিওএম চালিত করতে হবে। এটি করার জন্য, আপনাকে ডিওএম প্রস্তুত না হওয়া পর্যন্ত অপেক্ষা করতে হবে, সুতরাং আপনার অ্যাপ্লিকেশনটি সংজ্ঞায়িত হওয়ার পরে আপনাকে DOMReady ফাংশনটি ব্যবহার করতে হবে।

আপনি ওয়েবে চারপাশে এর প্রচুর উদাহরণগুলি খুঁজে পেতে পারেন তবে একটি মডিউল এবং ডোমরডি ফাংশন উভয়ই এখানে ব্যবহার করে একটি খুব বেসিক বাস্তবায়ন:



// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});

4
এই বিস্তারিত প্রতিক্রিয়া জন্য ধন্যবাদ। আমি তখনই ডমরডি ফাংশন সম্পর্কে জানতাম যখন ডম প্রস্তুত ইভেন্টটি ছড়িয়ে দেওয়া হয়েছিল কেবল তখনই কল করেছিল তবে কখনই ভাবিনি যে এটি একটি সমস্যা হবে an কোনও মডিউলটির ভিতরে মেরুদণ্ডের বিটগুলি সংজ্ঞায়িত করার জন্য কোডটি বিভক্ত করা এবং তার সাথে ডোম প্রস্তুতের সাথে তাদের সাথে আলাপচারিতা করা অবশ্যই সর্বোত্তম পদ্ধতির মতো বলে মনে হয়
ম্যাট রবার্টস

4
মজার বিষয় হল, ব্যাকবোন সিআরসি সহ "টুডো" উদাহরণ অ্যাপটি ডোমটিতে প্রস্তুত সমস্ত কিছু রাখে।
ম্যাট রবার্টস

4
জাভাস্ক্রিপ্ট মডিউল প্যাটার্নটি ভুলে যাবেন না এটিকেও বলা হয় IIFE
জেস

4
বেনাম ফাংশনটি মূলত ডিওএম প্রস্তুত হিসাবে একই সময়ে সম্পাদন করা হয় তবে কীভাবে এটি তাদের আরও দক্ষ করে তোলে ??
bhaya_w

14

একটি ছোটখাটো সিডনোট হিসাবে, কোনও বেনামী ফাংশনের আর্গুমেন্ট হিসাবে in প্রেরণ করা $ ফাংশনটিকে স্থানীয় করে তোলে which ফাংশনটিকে অনেক কিছু বলা হলে। এর কারণ জাভাস্ক্রিপ্ট প্রথমে ভেরিয়েবলের স্থানীয় সুযোগ সন্ধান করে এবং তারপরে উইন্ডো স্কোপের (যেখানে $ সাধারণত lives সাধারণত থাকে) সমস্ত পথে সরে যায়।


9

এটি নিশ্চিত করে যে আপনি ব্যবহারের পরেও বন্ধের ভিতরে সর্বদা ব্যবহার করতে পারবেন ।$$.noConflict()

এই বন্ধ না করে আপনি পুরো সময়ের jQueryপরিবর্তে ব্যবহার করার কথা $


4

এটি $ ভেরিয়েবলের সম্ভাব্য দ্বন্দ্ব এড়ানো। অন্য কিছু যদি named নামে একটি ভেরিয়েবল সংজ্ঞায়িত করে তবে আপনার প্লাগইনটি ভুল সংজ্ঞাটি ব্যবহার করতে পারে

পড়ুন http://docs.jquery.com/Plugins/Authoring#Getting_Started আরো বিস্তারিত জানার জন্য


2

ব্যবহার উভয়.

লাইব্রেরির বিবাদগুলি রোধ করতে এবং আপনি ery এর সাথে প্রত্যাশা মতো jQuery উপলব্ধ রয়েছে তা নিশ্চিত করার জন্য আপনি যে স্ব-চালিত ক্রিয়াকলাপটি jQuery এ পাস করেছেন $

এবং জাভাস্ক্রিপ্ট চালানোর জন্য প্রয়োজনীয় .ডিআর () শর্টকাট পদ্ধতিটি কেবল ডম লোড হওয়ার পরে:

(function($) {
    $(function(){
          //add code here that needs to wait for page to be loaded
    });

    //and rest of code here
})(jQuery);

একটি সংক্ষিপ্ত সংস্করণ আমি অন্য কোথাও এসওতে পেয়েছি (এটিও অপরিবর্তিত রক্ষা করে) :jQuery(function ($, undefined) { /* Code */ });
জারেড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.