Ne yapar (function ($) {}) (jQuery); anlamına gelmek?

Ben sadece jQuery eklentileri yazma ile başlıyorum. Üç küçük eklenti yazdım ama aslında ne anlama geldiğini bilmeden satırı tüm eklentilerime kopyaladım. Birisi bana bunlardan biraz daha bahsedebilir mi? Belki bir çerçeve yazarken bir açıklama işe yarayacaktır :)

Bu ne yapar? (Bir şekilde jQuery'yi genişlettiğini biliyorum ama bu konuda bilmek ilginç başka bir şey var mı)

(function($) {

})(jQuery);

Bir eklenti yazmanın aşağıdaki iki yolu arasındaki fark nedir:

Tip 1:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Tip 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

Buradan gidebilirim ve belki de hepsi aynı şey demek olabilir. Kafam karıştı. Bazı durumlarda, bu , Tip 1'i kullanarak yazdığım bir eklentide çalışmıyor gibi görünüyor. Şimdiye kadar, Tip 3 benim için en zarif görünüyor, ancak diğerleri hakkında da bilmek istiyorum.

İlk olarak, benzeyen bir kod bloğu (function(){})()sadece yerinde yürütülen bir fonksiyondur. Biraz parçalayalım.

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

Satır 2, çalışma zamanına işlevi üst kapsama döndürmesini bildirmek için parantez içine alınmış düz bir işlevdir, döndükten sonra işlev satır 4 kullanılarak yürütülür, belki de bu adımları okumak yardımcı olacaktır

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

1'in bildirim olduğunu, 2'nin işlevi döndürdüğünü ve 3'ün sadece işlevi yürüttüğünü görebilirsiniz.

Nasıl kullanılacağına bir örnek.

(function(doc){

   doc.location = '/';

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

Eklentilerle ilgili diğer sorulara gelince:

Tip 1: Bu aslında bir eklenti değil, eklentiler işlev olma eğiliminde olduğundan, işlev olarak iletilen bir nesnedir.

Tip 2: Bu, $.fnnesneyi genişletmediği için bir eklenti değildir . Sonuç aynı olmasına rağmen, jQuery çekirdeğinin sadece bir uzantısıdır. Bu, toArray ve benzeri gibi çapraz işlevler eklemek istiyorsanız.

Tip 3: Bu bir eklenti eklemek için en iyi yöntemdir, jQuery'nin genişletilmiş prototipi eklenti adınızı ve işlevinizi tutan bir nesneyi alır ve sizin için eklenti kütüphanesine ekler.

En temel düzeyde, formun (function(){...})()bir şeyi hemen yürütülen bir işlev değişmezidir. Bunun anlamı, bir işlevi tanımlamış olmanız ve hemen çağırmanızdır.

Bu form, bilgi gizleme ve kapsülleme için kullanışlıdır, çünkü bu işlev içinde tanımladığınız her şey bu işlev için yerel kalır ve dış dünyadan erişilemez (özellikle ifşa etmedikçe - genellikle döndürülen bir nesne değişmezi aracılığıyla).

Bu temel formun bir varyasyonu, jQuery eklentilerinde (veya genel olarak bu modül modelinde) gördüğünüz şeydir. Dolayısıyla:

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

Bu, gerçek jQuerynesneye bir referansta geçtiğiniz anlamına gelir , ancak $işlev hazır bilgisi kapsamında olduğu bilinir .

Tip 1 gerçekten bir eklenti değil. Basitçe değişmez bir nesne atarsınız jQuery.fn. Genellikle bir işlevi atadığınızda jQuery.fneklentiler genellikle sadece işlevlerdir.

Tip 2, Tip 1'e benzer; burada gerçekten bir eklenti oluşturmuyorsunuz. Basitçe bir değişmez nesne ekliyorsunuz jQuery.fn.

Tip 3 bir eklentidir, ancak bir eklenti oluşturmanın en iyi veya en kolay yolu değildir.

Bununla ilgili daha fazla bilgi edinmek için bu benzer soruya ve cevaba göz atın . Ayrıca, bu sayfa eklenti yazma hakkında bazı ayrıntılara girer.

Biraz yardım:

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

Açıklamaya sadece küçük bir ekleme

Bu yapı IIFE (Hemen Çağrılmış İşlev İfadesi) (function() {})();olarak adlandırılır , yorumlayıcı bu satıra ulaştığında hemen yürütülür. Bu satırları yazarken:

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

bu, yorumlayıcının fonksiyonu hemen çağıracağı ve fonksiyon jQueryiçinde kullanılacak bir parametre olarak geçeceği anlamına gelir $.

Aslında, bu örnek ne anlama (function($) {})(jQuery);geldiğini anlamama yardımcı oldu .

Bunu düşün:

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

Ve şimdi şunu düşünün:

• jQuery değişken bir jQuery nesnesidir.
• $ diğerleri gibi değişken bir addır (a , $b, a$bvs.) ve PHP gibi herhangi bir özel anlama sahip değildir.

Örneğimize bir kez daha bakabileceğimizi bilmek:

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

Tip 3, çalışmak için şu şekilde görünmek zorunda kalacaktı:

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

Neden birisi sadece doğrudan jQuery prototip özelliği ayarlama üzerinde kullanmak emin değilim, sadece daha fazla işlem ve daha fazla dağınık aynı şey yapıyor.