อะไร (ฟังก์ชั่น ($) {}) (jQuery); หมายความว่าอย่างไร

ฉันเพิ่งเริ่มต้นด้วยการเขียนปลั๊กอิน 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. เพื่อให้ห่างไกลพิมพ์ 3 ดูเหมือนว่าสง่างามที่สุดของผม แต่ผมอยากจะรู้เกี่ยวกับคนอื่น ๆ ได้เป็นอย่างดี

ประการแรกบล็อกรหัสที่ดูเหมือนว่า(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 core แม้ว่าผลลัพธ์จะเหมือนกัน นี่คือถ้าคุณต้องการเพิ่มฟังก์ชั่นการสำรวจเส้นทางเช่น toArray และอื่น ๆ

ประเภทที่ 3: นี่เป็นวิธีที่ดีที่สุดในการเพิ่มปลั๊กอินต้นแบบที่ขยายของ jQuery ใช้วัตถุที่มีชื่อปลั๊กอินและฟังก์ชั่นของคุณและเพิ่มลงในไลบรารีปลั๊กอินสำหรับคุณ

ในระดับพื้นฐานที่สุดบางสิ่งบางอย่างของแบบฟอร์ม(function(){...})()เป็นตัวอักษรฟังก์ชันที่ดำเนินการทันที สิ่งนี้หมายความว่าคุณได้กำหนดฟังก์ชั่นและคุณจะเรียกมันทันที

แบบฟอร์มนี้มีประโยชน์สำหรับการซ่อนและห่อหุ้มข้อมูลเนื่องจากสิ่งใดก็ตามที่คุณกำหนดไว้ในฟังก์ชั่นนั้นยังคงอยู่ในพื้นที่ของฟังก์ชั่นนั้นและไม่สามารถเข้าถึงได้จากโลกภายนอก (เว้นแต่คุณจะเปิดเผยเป็นพิเศษ

การเปลี่ยนแปลงของรูปแบบพื้นฐานนี้คือสิ่งที่คุณเห็นในปลั๊กอิน jQuery (หรือในรูปแบบโมดูลนี้โดยทั่วไป) ดังนั้น:

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

ซึ่งหมายความว่าคุณกำลังผ่านการอ้างอิงไปยังjQueryวัตถุจริงแต่เป็นที่รู้จักกัน$ในขอบเขตของตัวอักษรฟังก์ชั่น

Type 1 ไม่ใช่ปลั๊กอินจริงๆ jQuery.fnคุณเพียงแค่การกำหนดตัวอักษรวัตถุ โดยทั่วไปแล้วคุณกำหนดฟังก์ชั่นให้jQuery.fnเป็นปลั๊กอินมักจะเป็นเพียงฟังก์ชั่น

Type 2 คล้ายกับ Type 1; คุณไม่ได้สร้างปลั๊กอินที่นี่จริงๆ jQuery.fnคุณเพียงแค่เพิ่มตัวอักษรวัตถุ

Type 3 เป็นปลั๊กอิน แต่ไม่ใช่วิธีที่ดีที่สุดหรือง่ายที่สุดในการสร้าง

เพื่อให้เข้าใจมากขึ้นเกี่ยวกับเรื่องนี้ดูที่คล้ายกันนี้คำถามและคำตอบ นอกจากนี้หน้านี้ยังมีรายละเอียดบางอย่างเกี่ยวกับการเขียนปลั๊กอิน

ความช่วยเหลือเล็กน้อย:

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

นอกจากนี้เพียงเล็กน้อยในการอธิบาย

โครงสร้าง(function() {})();นี้เรียกว่าIIFE (เรียกใช้ฟังก์ชั่นการแสดงออกทันที) มันจะถูกดำเนินการทันทีเมื่อล่ามจะมาถึงบรรทัดนี้ ดังนั้นเมื่อคุณเขียนแถวเหล่านี้:

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

วิธีการนี้ว่าล่ามจะเรียกฟังก์ชั่นในทันทีและจะผ่านเป็นพารามิเตอร์ซึ่งจะถูกใช้ในการทำงานเป็นjQuery$

ที่จริงตัวอย่างนี้ช่วยให้ฉันเข้าใจความ(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ฯลฯ ) และมันก็ไม่ได้มีความหมายพิเศษใด ๆ เช่นใน PHP

รู้ว่าเราสามารถดูตัวอย่างของเราอีกครั้ง:

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

พิมพ์ 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 โดยตรงมันกำลังทำสิ่งที่เหมือนกันเฉพาะในการดำเนินการเพิ่มเติมและความยุ่งเหยิงมากขึ้นเท่านั้น