Saya ingin memahami sintaks plugin jQuery

Situs jQuery mencantumkan sintaks plugin dasar untuk jQuery seperti ini:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

Saya hanya ingin memahami apa yang terjadi di sana dari sudut pandang Javascript, karena sepertinya ia tidak mengikuti sintaks apa pun yang pernah saya lihat JS lakukan sebelumnya. Jadi, inilah daftar pertanyaan saya:

1. Jika Anda mengganti function ($) ... dengan variabel, katakan "the_function", sintaksnya akan terlihat seperti ini:

    (the_function)( jQuery );
   

   Apa itu "(jQuery);" perbuatan? Apakah tanda kurung di sekitar the_function benar-benar diperlukan? Kenapa mereka disana? Apakah ada bagian kode lain yang bisa Anda berikan yang serupa?

2. Ini dimulai dengan fungsi ($). Jadi itu membuat sebuah fungsi, yang sejauh yang saya tahu tidak akan pernah dijalankan, dengan parameter $, yang sudah ditentukan? apa yang terjadi disana?

Terima kasih untuk bantuannya!

function(x){ 
    x...
}

hanyalah sebuah fungsi tanpa nama, yang membutuhkan satu argumen, "x", dan melakukan sesuatu dengan x.

Alih-alih 'x', yang merupakan nama variabel umum, Anda dapat menggunakan $, yang merupakan nama variabel yang kurang umum, tetapi tetap legal.

function($){ 
    $...
}

Saya akan memasukkannya ke dalam tanda kurung untuk memastikannya diurai sebagai ekspresi:

(function($){
    $....
})

Untuk memanggil suatu fungsi, Anda meletakkan () setelahnya dengan daftar argumen. Misalnya, jika kita ingin memanggil fungsi ini dengan memasukkan 3 untuk nilai $kita akan melakukan ini:

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

Hanya untuk iseng, mari panggil fungsi ini dan teruskan jQuery sebagai variabel:

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

Ini membuat fungsi baru yang mengambil satu argumen dan kemudian memanggil fungsi itu, meneruskan jQuery sebagai nilainya.

MENGAPA?

• Karena menulis jQuery setiap kali Anda ingin melakukan sesuatu dengan jQuery itu membosankan.

MENGAPA TIDAK HANYA MENULIS $ = jQuery?

• Karena orang lain mungkin telah mendefinisikan $ sebagai sesuatu yang lain. Ini menjamin bahwa arti lain dari $ dibayangi oleh yang satu ini.

(function( $ ){

})( jQuery );

Itu adalah fungsi anonim yang mengeksekusi sendiri yang digunakan $dalam argumen sehingga Anda bisa menggunakannya ( $) daripada jQuerydi dalam fungsi itu dan tanpa takut bentrok dengan pustaka lain karena di pustaka lain juga $memiliki arti khusus. Pola itu sangat berguna saat menulis plugin jQuery.

Anda dapat menulis karakter apa pun di sana, bukan $juga:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Di sini jsecara otomatis akan mengejar jQuery yang ditentukan di akhir (jQuery). Atau Anda dapat meninggalkan argumen sepenuhnya tetapi kemudian Anda harus menggunakan jQuerykata kunci di sekitar daripada $tanpa takut tabrakan masih. Jadi $dibungkus dalam argumen untuk short-hand sehingga Anda bisa menulis $alih-alih jQuerysemua di dalam fungsi itu.

Jika Anda bahkan melihat kode sumber jQuery, Anda akan melihat bahwa semuanya dibungkus di antara:

(function( window, undefined ) {
  // jQuery code
})(window);

Seperti yang dapat dilihat juga, fungsi anonim yang dijalankan sendiri dengan argumen. A window(dan undefined) argumen dibuat dan dipetakan dengan dunia windowobjek di bagian bawah (window). Ini adalah pola yang populer saat ini dan memiliki sedikit keuntungan kecepatan karena di sini windowakan dilihat dari argumen daripada windowobjek global yang dipetakan di bawah ini.

Ini $.fnadalah objek jQuery tempat Anda membuat fungsi baru (yang juga merupakan objek) atau plugin itu sendiri sehingga jQuery membungkus plugin Anda di $.fnobjeknya dan membuatnya tersedia.

Menariknya, saya telah menjawab pertanyaan serupa di sini:

Sintaks fungsi penutupan JavaScript / jQuery

Anda juga dapat melihat artikel ini untuk mengetahui lebih banyak tentang fungsi yang dijalankan sendiri yang telah saya tulis:

Fungsi Javascript Self-executing

Sintaks plugin dasar memungkinkan Anda menggunakan $referensi jQuerydi badan plugin Anda, terlepas dari $nama plugin pada saat plugin dimuat. Ini mencegah konflik penamaan dengan pustaka lain, terutama Prototipe.

Sintaksnya mendefinisikan fungsi yang menerima parameter yang disebut $sehingga Anda bisa merujuknya seperti $di dalam badan fungsi, lalu segera memanggil fungsi itu, memasukkannya jQuerysebagai argumen.

Ini juga membantu untuk tidak mencemari namespace global (jadi mendeklarasikan var myvar = 123;di badan plugin Anda tidak akan tiba-tiba terdefinisi window.myvar), tetapi tujuan utama yang nyata adalah memungkinkan Anda menggunakan $tempat yang $mungkin telah didefinisikan ulang.

Anda berurusan dengan fungsi anonim yang memanggil sendiri di sana. Ini seperti "praktik terbaik" untuk membungkus plugin jQuery dalam fungsi seperti itu untuk memastikan, bahwa $tanda terikat ke jQueryobjek.

Contoh:

(function(foo) {
    alert(foo);
}('BAR'));

Ini akan mengingatkan BARsaat dimasukkan ke dalam <script>blok. Parameter BARditeruskan ke fungsi yang memanggil dirinya sendiri.

Prinsip yang sama terjadi di kode Anda, jQueryobjek diteruskan ke fungsi, jadi $pasti akan merujuk ke objek jQuery.

JQuery pada akhirnya meneruskan sendiri (jQuery) ke fungsi, sehingga Anda dapat menggunakan simbol $ di dalam plugin Anda. Anda juga bisa melakukannya

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Untuk menemukan penjelasan yang jelas tentang ini dan trik javascript modern lainnya serta praktik umum, saya sarankan membaca Javascript Garden.

http://bonsaiden.github.com/JavaScript-Garden/

Ini sangat berguna, karena banyak dari pola ini digunakan secara luas di banyak perpustakaan tetapi tidak benar-benar dijelaskan.

Jawaban lain di sini bagus, tetapi ada satu poin penting yang belum dibahas. Kamu bilang:

Jadi itu membuat sebuah fungsi, yang sejauh yang saya tahu tidak akan pernah dijalankan, dengan parameter $, yang sudah ditentukan?

Tidak ada jaminan bahwa variabel global $tersedia . Secara default, jQuery membuat dua variabel dalam lingkup global: $dan jQuery(di mana keduanya adalah alias untuk objek yang sama). Namun, jQuery juga dapat dijalankan dalam mode noConflict :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Saat Anda menelepon jQuery.noConflict() , variabel global $disetel kembali ke apa pun sebelum pustaka jQuery disertakan. Ini memungkinkan jQuery digunakan dengan pustaka Javascript lain yang juga digunakan$ sebagai variabel global.

Jika Anda menulis plugin yang diandalkan $ alias untuk jQuery, plugin Anda tidak akan berfungsi untuk pengguna yang menjalankan mode noConflict.

Seperti yang telah dijelaskan oleh orang lain, kode yang Anda posting membuat fungsi anonim yang dipanggil segera. Variabel global jQuerykemudian diteruskan ke fungsi anonim ini, yang dengan aman disebut sebagai variabel lokal$ dalam fungsi tersebut.