Saya ingin memahami sintaks plugin jQuery

89

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!

javascript  jquery  jquery-plugins 
— Ethan
sumber

Jawaban:

130 
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.
— Joel Spolsky
sumber
20
Jelas, tapi tidak ada penjelasan tentang kebutuhan untuk memandu parser agar mengurai definisi fungsi sebagai ekspresi dan bukan pernyataan . Itulah kegunaan tanda kurung tambahan .
— Pointy
16
(function(){})()dikenal sebagai IIFE (Ekspresi Fungsi Segera Diminta) . Biarkan orang tahu bahwa Anda dapat menggunakan simbol-simbol lain untuk memaksa parser untuk mengobati fungsi sebagai ekspresi seperti +,!,-,~(dan lain-lain) seperti ini: !function($){}(jQuery). Dan untuk lebih menyenangkan Anda dapat ~~+-!function($){}(jQuery):!
— David Murdoch
(function ($, win, doc) {$ ....}) (jQuery, window, document); Saya akan menambahkan ini juga ... Ini membantu saya memahami lebih baik. dalam kode damai ini, jQuery ---> $; dan jendela ---> menang; lalu dokumen ---> dok ... :) thanks ...
— Haranadh
Saya telah menghadapi contoh kode yang IMHO tidak tercakup dalam daftar di atas: $ (function () {.....} (jQuery)); (Diambil dari sini: docs.microsoft.com/en-us/aspnet/core/mvc/models/… ). Di sini, saya tidak mengerti penggunaan $. Tampaknya tidak berupa selektor jQuery $ (...) atau sintaks pendek untuk acara 'siap dokumen', karena fungsi tersebut tidak mengembalikan apa pun. Saya juga tampaknya tidak menjadi awalan untuk memperlakukan fungsi sebagai ekspresi, karena di luar kurung kurawal. Terlebih lagi, pemanggilan fungsi dibuat DI DALAM kurung kurawal, jadi kami memanggil deklarasi.
— sich
35 
(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

— Sarfraz
sumber
Jadi jika saya memiliki sebuah objek bernama my_object, dan melakukan ini: (function (mo) {mo.doSomething ()}) (my_object), maka itu akan menjalankan my_object.doSomething ()?
— Ethan
3

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.

— Steven
sumber
3

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.

— jAndy
sumber
1
Saya mengerti semua itu. Yang ingin saya ketahui adalah mengapa / bagaimana sintaks braket bekerja untuk membuat fungsi yang mengeksekusi sendiri? Apakah itu hanya ciri bahasanya? Bagaimana cara kerjanya?
— daging
2

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 );
— harpa
sumber
2

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.

— OlliM
sumber
2

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.

— Tidur
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.