কী (ফাংশন ($) {}) (jQuery); এর অর্থ কি?


299

আমি শুধু jQuery প্লাগইন লিখতে শুরু করছি। আমি তিনটি ছোট প্লাগইন লিখেছি কিন্তু আমি আসলে এর অর্থ কী তা না জেনে আমার সমস্ত প্লাগইনগুলিতে কেবল লাইনটি অনুলিপি করছি। কেউ কি এগুলি সম্পর্কে আমাকে আরও কিছু বলতে পারেন? ফ্রেমওয়ার্ক লেখার সময় সম্ভবত কোনও ব্যাখ্যা কার্যকর হবে :)

এটি কি করে? (আমি জানি এটি কোনওভাবে jQuery প্রসারিত করেছে তবে এই সম্পর্কে জানতে আরও আকর্ষণীয় কিছু রয়েছে)

(function($) {

})(jQuery);

প্লাগইন লেখার নিম্নলিখিত দুটি পদ্ধতির মধ্যে পার্থক্য কী:

ধরন 1:

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

প্রকার 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

প্রকার 3:

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

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

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

আমি এখানে যেতে পারে এবং সম্ভবত সব একই জিনিস বোঝাতে পারে। আমি দ্বিধান্বিত. কিছু ক্ষেত্রে, এটি এমন একটি প্লাগইনে কাজ করছে বলে মনে হচ্ছে না যা আমি টাইপ 1 ব্যবহার করে লিখেছিলাম So এখন পর্যন্ত, টাইপ 3 আমার কাছে সবচেয়ে মার্জিত মনে হয় তবে আমি অন্যদের সম্পর্কেও জানতে চাই।


22
এটা সময় এখানে বিছানায তার, কিন্তু নতুনদের জন্য, (function($) { })(jQuery);কোড গোপন যাতে $হয় jQueryএমনকি যদি যে অবসান ভিতরে, $মানে কিছু এটি অন্য বাহিরে সাধারণত এর ফলে $.noConflict()উদাহরণস্বরূপ। এটি আপনার প্লাগইনটি কাজ করে কিনা তা নিশ্চিত করে $ === jQuery :)
নিক ক্র্যাভার

3
আপনার সম্পর্কে (function($) { })(jQuery)বলেছেন: "আমি জানি এটি কোনওভাবে jQuery প্রসারিত করে [...]"। আপনার বক্তব্যটি 100% মিথ্যা বলে স্পষ্টতই আপনি জানেন না । উপায় দ্বারা এটি ভবিষ্যতের পাঠকদের জন্য বিভ্রান্তিমূলক হতে পারে। এটি একবার দেখুন: stackoverflow.com/a/32550649/1636522
পাতা

@ নিকক্রাভারের মন্তব্যে প্রসারিত, jquery-ui-1.7.2.custom.min.js উদাহরণস্বরূপ এটি ব্যবহার করে: jQuery.ui || (ফাংশন (সি) {var i = c.fn.remove, d = c.browser। মোজিলা ........}) (jQuery এর) ;. আমি জানি যে হ্রাসপ্রাপ্ত কোড সহ jQuery UI এর একটি পুরানো সংস্করণ, তবে মূল বিষয়টি কীভাবে সে ক্ষেত্রে তারা "of" এর পরিবর্তে "সি" ব্যবহার করছে তা দেখাতে হবে।
জাইমে মন্টোয়া

উত্তর:


234

প্রথমত, দেখতে একটি কোড ব্লক (function(){})()কেবল একটি ফাংশন যা জায়গায় সম্পাদিত হয়। একে একে একটু ভেঙে ফেলি।

1. (
2.    function(){}
3. )
4. ()

লাইন 2 একটি প্লেইন ফাংশন, প্যারেন্টেসিসে মোড়ানো রানটাইমকে প্যারেন্ট স্কোপে ফিরিয়ে দেওয়ার জন্য বলার পরে, ফাংশনটি ফিরে আসার পরে লাইন 4 ব্যবহার করে সম্পাদন করা হবে, সম্ভবত এই পদক্ষেপগুলি পড়তে সহায়তা করবে

1. function(){ .. }
2. (1)
3. 2()

আপনি দেখতে পাচ্ছেন যে 1 হল ঘোষণা, 2 ফাংশনটি ফিরিয়ে দিচ্ছে এবং 3 কেবলমাত্র ফাংশনটি সম্পাদন করছে।

এটি কীভাবে ব্যবহৃত হবে তার একটি উদাহরণ।

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

প্লাগিনগুলি সম্পর্কে অন্যান্য প্রশ্নের জন্য:

প্রকার 1: এটি আসলে কোনও প্লাগইন নয়, এটি কোনও ফাংশন হিসাবে অনুমোদিত একটি বস্তু, প্লাগইনগুলি ফাংশন হিসাবে থাকে।

প্রকার 2: এটি আবার কোনও প্লাগইন নয় কারণ এটি $.fnঅবজেক্টটিকে প্রসারিত করে না । এটি jQuery কোরটির মাত্র একটি এক্সটেনশন, যদিও ফলাফলটি একই। আপনি যদি ট্র্যারেটিং ফাংশন যেমন টু অ্যারে ইত্যাদি যোগ করতে চান তবে এটি হয়।

প্রকার 3: প্লাগইন যুক্ত করার জন্য এটি সর্বোত্তম পদ্ধতি, jQuery এর বর্ধিত প্রোটোটাইপটি আপনার প্লাগইন নাম এবং ফাংশন ধারণ করে এমন একটি অবজেক্ট গ্রহণ করে এবং এটি আপনার জন্য প্লাগইন লাইব্রেরিতে যুক্ত করে।


2
আপনি যদি আসল প্রশ্নটি পড়ে থাকেন তবে ওপি ক্লোজার লেখার 3 পদ্ধতি নির্দিষ্ট করে, তিনি এই পদ্ধতিগুলির নামটি লিখেছেন {1,2,3}, আমি উত্তর দিয়ে প্রশ্নের মধ্যে থাকা অঞ্চলগুলিকে উল্লেখ করছি
রবার্টপিট

1
(ফাংশন () {}) মানে অভ্যন্তরীণ ফাংশনটি ফেরত দেয়? "()" এর অর্থ কী?
জেসকি 5

আমি প্রথম উদাহরণটি পছন্দ করি দ্বিতীয়টি লাইন নম্বর রেফারেন্স ব্যবহার করে (যা কোনও জেএস বৈশিষ্ট্য নয়) অস্পষ্ট।
স্যামি বেঞ্চেরিফ

1
একে তাত্ক্ষণিকভাবে ইনভয়েডড ফাংশন এক্সপ্রেশন (আইআইএফই) বলা হয়: বেনালম্যান.com
আন্দ্রেস রোজাস

1
বাইরের প্রথম বন্ধনী বুঝতে আমার বেশিরভাগ সমস্যা রয়েছে ( function(){} ): এটি ঠিক কী? আমি কি শুধু লিখতে পারি না function(){}()?
TMOTTM

127

সর্বাধিক প্রাথমিক স্তরে, ফর্মের কিছু (function(){...})()হ'ল একটি ফাংশন আক্ষরিক যা অবিলম্বে কার্যকর করা হয়। এর অর্থ হ'ল আপনি কোনও ফাংশন সংজ্ঞায়িত করেছেন এবং আপনি তাৎক্ষণিক কল করছেন।

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

এই বেসিক ফর্মটির একটি প্রকরণ যা আপনি jQuery প্লাগইনগুলিতে দেখতে পান (বা সাধারণভাবে এই মডিউল প্যাটার্নে)। অত: পর:

(function($) {
  ...
})(jQuery);

যার অর্থ আপনি প্রকৃত jQueryঅবজেক্টের একটি রেফারেন্সে যাচ্ছেন তবে এটি $কার্যক্ষেত্রের আওতার মধ্যে পরিচিত ।

প্রকার 1 আসলে একটি প্লাগইন নয়। আপনি কেবল কোনও বস্তুকে আক্ষরিক অর্পণ করছেন jQuery.fn। সাধারণত আপনি কোনও ফাংশন বরাদ্দ করেন jQuery.fnকারণ প্লাগইনগুলি সাধারণত কেবল ফাংশন হয়।

প্রকার 2 টাইপ 1 এর সমান; আপনি এখানে সত্যিই একটি প্লাগইন তৈরি করছেন না। আপনি কেবল কোনও অবজেক্টে আক্ষরিক সাথে যুক্ত করছেন jQuery.fn

প্রকার 3 একটি প্লাগইন, তবে এটি তৈরির পক্ষে সেরা বা সহজতম উপায় নয়।

এই সম্পর্কে আরও বুঝতে, এই একই প্রশ্ন এবং উত্তর একবার দেখুন । এছাড়াও, এই পৃষ্ঠাটি প্লাগইনগুলি লেখার বিষয়ে কিছু বিশদে যায়।


1
আমি নিশ্চিত নই যে টাইপ 3 কীভাবে বাড়িয়ে দিচ্ছে। আপনি প্রোটোটাইপটি প্রসারিত করার কারণে এটি একটি প্লাগইন তৈরির জন্য পুরোপুরি বৈধ উপায়। যদিও কিছুটা অপ্রয়োজনীয়।
tbranyen

1
আমার খারাপ - আমার আরও পরিষ্কার হওয়া উচিত ছিল। আমি তাড়াহুড়ো করেছিলাম এবং আপনি সঠিক আছেন।
ভিভিন পালিথ

32

একটু সাহায্য:

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

(function ($) { console.log($) })(jQuery);


21

ব্যাখ্যার সাথে সামান্য সংযোজন

এই কাঠামো (function() {})();বলা হয় IIFE (অবিলম্বে প্রার্থনা ফাংশন এক্সপ্রেশন), তা অবিলম্বে মৃত্যুদন্ড কার্যকর করা হবে, যখন অনুবাদক এই লাইন পৌঁছাতে হবে। সুতরাং আপনি যখন এই সারিগুলি লিখছেন:

(function($) {
  // do something
})(jQuery);

এর অর্থ হ'ল দোভাষী তত্ক্ষণাত ফাংশনটি আহ্বান করবেন এবং jQueryপরামিতি হিসাবে উত্তীর্ণ হবে যা ফাংশনের অভ্যন্তরে ব্যবহৃত হবে $


12

প্রকৃতপক্ষে, এই উদাহরণটি আমাকে (function($) {})(jQuery);বোঝাতে সহায়তা করেছে এর অর্থ কী।

এই বিবেচনা:

// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

এবং এখন এটি বিবেচনা করুন:

  • jQuery একটি পরিবর্তনশীল হোল্ডিং jQuery অবজেক্ট।
  • $অন্য কোন (যেমন একটি পরিবর্তনশীল নাম a, $b, a$bইত্যাদি) এবং এটা পিএইচপি মত কোন বিশেষ অর্থ নেই।

আমরা আমাদের উদাহরণটিতে আরও একবার নজর রাখতে পারি তা জেনে:

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

আমার জন্য, এটি সেরা উত্তর। পরিষ্কার এবং খুব সহজ
সালেহ

11

3 টাইপ করুন, কাজ করতে এই রকম দেখতে হবে:

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin's name
        'pluginname': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                'defaults': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

আমি নিশ্চিত নই যে কেন কেউ সরাসরি প্রজেক্টটি সরাসরি jQuery প্রোটোটাইপটিতে সেট করার জন্য ব্যবহার করবেন, এটি কেবলমাত্র আরও ক্রিয়াকলাপ এবং আরও বিশৃঙ্খলায় একই সঠিক কাজটি করছে।

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