Apa yang dilakukan (fungsi ($) {}) (jQuery); berarti?

Saya baru memulai dengan menulis plugin jQuery. Saya menulis tiga plugin kecil tetapi saya hanya menyalin garis ke semua plugin saya tanpa benar-benar tahu apa artinya. Bisakah seseorang memberi tahu saya lebih banyak tentang ini? Mungkin suatu penjelasan akan berguna suatu hari nanti ketika menulis suatu kerangka :)

Apa fungsinya? (Saya tahu itu meluas jQuery entah bagaimana tetapi apakah ada hal lain yang menarik untuk diketahui tentang ini)

(function($) {

})(jQuery);

Apa perbedaan antara dua cara penulisan plugin berikut:

Tipe 1:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Tipe 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Tipe 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);

Saya bisa saja jauh dari sini dan mungkin semua memiliki arti yang sama. Saya bingung. Dalam beberapa kasus, ini tampaknya tidak berfungsi dalam sebuah plugin yang saya tulis menggunakan Tipe 1. Sejauh ini, Tipe 3 tampaknya paling elegan bagi saya, tetapi saya juga ingin tahu tentang yang lain.

Pertama, blok kode yang terlihat seperti (function(){})()hanyalah fungsi yang dijalankan di tempat. Mari kita jabarkan sedikit.

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

Baris 2 adalah fungsi sederhana, dibungkus dengan tanda kurung untuk memberitahu runtime untuk mengembalikan fungsi ke lingkup induk, setelah itu kembali fungsi dieksekusi menggunakan baris 4, mungkin membaca langkah-langkah ini akan membantu

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

Anda dapat melihat bahwa 1 adalah deklarasi, 2 mengembalikan fungsi dan 3 hanya menjalankan fungsi.

Contoh bagaimana itu akan digunakan.

(function(doc){

   doc.location = '/';

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

Adapun pertanyaan lain tentang plugin:

Tipe 1: Ini bukan plugin yang sebenarnya, ini adalah objek yang dilewatkan sebagai fungsi, karena plugin cenderung berfungsi.

Tipe 2: Ini lagi-lagi bukan plugin karena tidak memperpanjang $.fnobjek. Ini hanyalah pengembangan dari inti jQuery, meskipun hasilnya sama. Ini jika Anda ingin menambahkan fungsi traverse seperti toArray dan sebagainya.

Tipe 3: Ini adalah metode terbaik untuk menambahkan plugin, prototipe tambahan dari jQuery mengambil objek yang menyimpan nama dan fungsi plugin Anda dan menambahkannya ke pustaka plugin untuk Anda.

Pada tingkat paling dasar, sesuatu dari bentuk (function(){...})()adalah fungsi literal yang dieksekusi segera. Artinya, Anda telah mendefinisikan suatu fungsi dan Anda segera memanggilnya.

Formulir ini berguna untuk menyembunyikan informasi dan enkapsulasi karena apa pun yang Anda tetapkan di dalam fungsi itu tetap lokal untuk fungsi itu dan tidak dapat diakses dari dunia luar (kecuali Anda secara khusus mengeksposnya - biasanya melalui objek yang dikembalikan secara literal).

Variasi bentuk dasar ini adalah apa yang Anda lihat di plugin jQuery (atau dalam pola modul ini secara umum). Karenanya:

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

Yang berarti Anda menyampaikan referensi ke jQueryobjek yang sebenarnya , tetapi itu dikenal sebagai $dalam lingkup fungsi literal.

Tipe 1 sebenarnya bukan plugin. Anda hanya menugaskan objek literal jQuery.fn. Biasanya Anda menetapkan fungsi jQuery.fnsebagai plugin biasanya hanya fungsi.

Tipe 2 mirip dengan Tipe 1; Anda tidak benar-benar membuat plugin di sini. Anda cukup menambahkan objek literal ke jQuery.fn.

Tipe 3 adalah plugin, tetapi itu bukan cara terbaik atau termudah untuk membuatnya.

Untuk memahami lebih lanjut tentang ini, lihatlah pertanyaan dan jawaban yang serupa ini . Juga, halaman ini membahas beberapa detail tentang pembuatan plugin.

Sedikit bantuan:

// 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);

Hanya tambahan kecil untuk penjelasan

Struktur (function() {})();ini disebut IIFE (Ekspresi Fungsi Segera Diminta), itu akan dieksekusi segera, ketika penerjemah akan mencapai garis ini. Jadi saat Anda menulis baris ini:

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

ini berarti, bahwa juru bahasa akan memanggil fungsi segera, dan akan lulus jQuerysebagai parameter, yang akan digunakan di dalam fungsi sebagai $.

Sebenarnya, contoh ini membantu saya memahami apa (function($) {})(jQuery);artinya.

Pertimbangkan ini:

// 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

Dan sekarang pertimbangkan ini:

• jQuery adalah objek holding jQuery variabel.
• $adalah nama variabel seperti yang lain ( a, $b, a$bdll) dan tidak memiliki arti khusus seperti di PHP.

Mengetahui bahwa kita dapat melihat contoh kita:

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

Tipe 3, agar dapat berfungsi harus terlihat seperti ini:

(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);

Saya tidak yakin mengapa seseorang akan menggunakan memperpanjang hanya secara langsung mengatur properti dalam prototipe jQuery, itu melakukan hal yang persis sama hanya dalam lebih banyak operasi dan lebih banyak kekacauan.