Tôi muốn hiểu cú pháp plugin jQuery

89

Trang web jQuery liệt kê cú pháp plugin cơ bản cho jQuery như sau:

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

Tôi chỉ muốn hiểu những gì đang diễn ra ở đó theo quan điểm của Javascript, bởi vì nó không giống như nó tuân theo bất kỳ cú pháp nào mà tôi đã thấy JS làm trước đây. Vì vậy, đây là danh sách các câu hỏi của tôi:

  1. Nếu bạn thay thế hàm ($) ... bằng một biến, hãy nói "the_ function", cú pháp sẽ như sau:

     (the_function)( jQuery );

    "(JQuery);" đang làm? Dấu ngoặc quanh chức năng có thực sự cần thiết không? Tại sao họ lại ở đó? Có đoạn mã nào khác mà bạn có thể cung cấp tương tự không?

  2. Nó bắt đầu bằng hàm ($). Vì vậy, nó đang tạo ra một hàm, theo như tôi có thể nói sẽ không bao giờ được chạy, với tham số là $, đã được xác định? chuyện gì đang xảy ra ở đó vậy?

Cảm ơn đã giúp đỡ!

javascript  jquery  jquery-plugins 
— Ethan
nguồn

Câu trả lời:

130 
function(x){ 
    x...
}

chỉ là một hàm không có tên, nhận một đối số, "x" và thực hiện những việc với x.

Thay vì 'x', là một tên biến phổ biến, bạn có thể sử dụng $, là một tên biến ít phổ biến hơn, nhưng vẫn hợp pháp.

function($){ 
    $...
}

Tôi sẽ đặt nó trong dấu ngoặc đơn để đảm bảo nó phân tích cú pháp dưới dạng một biểu thức:

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

Để gọi một hàm, bạn đặt () sau nó với một danh sách các đối số. Ví dụ: nếu chúng ta muốn gọi hàm này chuyển vào giá trị 3 cho giá trị của nó, $chúng ta sẽ thực hiện như sau:

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

Chỉ dành cho kick, hãy gọi hàm này và chuyển vào jQuery dưới dạng một biến:

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

Điều này tạo ra một hàm mới nhận một đối số và sau đó gọi hàm đó, truyền vào jQuery dưới dạng giá trị.

TẠI SAO?

  • Bởi vì viết jQuery mỗi khi bạn muốn làm điều gì đó với jQuery thật tẻ nhạt.

TẠI SAO KHÔNG CHỈ VIẾT $ = jQuery?

  • Bởi vì ai đó có thể đã định nghĩa $ có nghĩa là một cái gì đó khác. Điều này đảm bảo rằng bất kỳ nghĩa nào khác của $ đều bị che lấp bởi ý nghĩa này.
— Joel Spolsky
nguồn
20
Nó rõ ràng, nhưng nó thiếu một sự chi tiết về sự cần thiết phải hướng dẫn trình phân tích cú pháp phân tích định nghĩa hàm như một biểu thức chứ không phải một câu lệnh . Đó là những gì các dấu ngoặc đơn thêm vào.
— Pointy
16
(function(){})()được gọi là IIFE (Biểu thức hàm được gọi ngay lập tức) . Hãy để nó được biết rằng bạn có thể sử dụng các ký hiệu khác để buộc các phân tích cú pháp để điều trị các chức năng như là một biểu như +,!,-,~(và những người khác) như thế này: !function($){}(jQuery). Và để thú vị hơn nữa, bạn có thể ~~+-!function($){}(jQuery):!
— David Murdoch
(function ($, win, doc) {$ ....}) (jQuery, window, document); Tôi cũng sẽ thêm điều này ... Nó đã giúp tôi hiểu rõ hơn. trong mã bình yên này, jQuery ---> $; và window ---> win; sau đó tài liệu ---> doc ... :) cảm ơn ...
— Haranadh
Tôi đã gặp phải một mẫu mã mà IMHO không có trong danh sách trên: $ (function () {.....} (jQuery)); (Lấy từ đây: docs.microsoft.com/en-us/aspnet/core/mvc/models/… ). Ở đây, tôi không hiểu cách sử dụng của $. Nó dường như không phải là một bộ chọn jQuery $ (...) hoặc một cú pháp ngắn cho sự kiện 'tài liệu sẵn sàng', bởi vì hàm không trả về gì. Tôi cũng dường như không phải là một tiền tố để coi hàm như một biểu thức, bởi vì nó nằm bên ngoài dấu ngoặc nhọn. Hơn nữa, lệnh gọi hàm được thực hiện BÊN TRONG các dấu ngoặc nhọn, vì vậy chúng ta đang gọi khai báo.
— sich
35 
(function( $ ){

})( jQuery );

Đó là hàm ẩn danh tự thực thi sử dụng $trong đối số để bạn có thể sử dụng nó ( $) thay vì jQuerybên trong hàm đó và không sợ xung đột với các thư viện khác vì trong các thư viện khác cũng $có ý nghĩa đặc biệt. Mẫu đó đặc biệt hữu ích khi viết các plugin jQuery.

Bạn có thể viết bất kỳ ký tự nào ở đó thay vì viết $:

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

})(jQuery);

Ở đây jsẽ tự động bắt kịp jQuery được chỉ định ở cuối (jQuery). Hoặc bạn có thể loại bỏ hoàn toàn đối số nhưng sau đó bạn sẽ phải sử dụng jQuerytừ khóa xung quanh thay vì $vẫn không sợ va chạm. Vì vậy, $được bao bọc trong đối số cho short-hand để bạn có thể viết $thay vì viết jQueryxung quanh bên trong hàm đó.

Nếu bạn thậm chí nhìn vào mã nguồn của jQuery, bạn sẽ thấy rằng mọi thứ được bao bọc giữa:

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

Đó cũng là một hàm ẩn danh tự thực thi với các đối số. Một window(và undefined) lập luận được tạo ra và được ánh xạ với toàn cầu windowđối tượng ở phía dưới (window). Đây là mô hình phổ biến ngày nay và ít tăng tốc vì ở đây windowsẽ được xem xét từ đối số hơn là windowđối tượng toàn cục được ánh xạ bên dưới.

Đây $.fnlà đối tượng của jQuery nơi bạn tạo hàm mới (cũng là một đối tượng) hoặc chính plugin để jQuery bao bọc plugin của bạn trong $.fnđối tượng của nó và làm cho nó khả dụng.

Thật thú vị, tôi đã trả lời câu hỏi tương tự ở đây:

Cú pháp hàm đóng JavaScript / jQuery

Bạn cũng có thể xem bài viết này để biết thêm về các hàm tự thực thi mà tôi đã viết:

Các chức năng tự thực thi trong Javascript

— Sarfraz
nguồn
Vì vậy, nếu tôi có một đối tượng được gọi là my_object và thực hiện điều này: (function (mo) {mo.doSomething ()}) (my_object), thì nó sẽ chạy my_object.doSomething ()?
— Ethan
3

Cú pháp plugin cơ bản cho phép bạn sử dụng $để tham chiếu đến jQuerytrong phần nội dung plugin của mình, bất kể nhận dạng của$ tại thời điểm plugin được tải. Điều này ngăn chặn xung đột đặt tên với các thư viện khác, đáng chú ý nhất là Prototype.

Cú pháp xác định một hàm chấp nhận một tham số được gọi là $để bạn có thể tham chiếu đến nó như $trong thân hàm, và sau đó ngay lập tức gọi hàm đó, đưa jQueryvào làm đối số.

Điều này cũng giúp không làm ô nhiễm không gian tên chung (vì vậy việc khai báo var myvar = 123;trong phần thân plugin của bạn sẽ không đột ngột được xác định window.myvar), nhưng mục đích rõ ràng chính là cho phép bạn sử dụng $nơi $có thể đã được xác định lại.

— Steven
nguồn
3

Bạn đang xử lý một chức năng ẩn danh tự gọi ở đó. Nó giống như "phương pháp hay nhất" để bọc một plugin jQuery trong một hàm như vậy để đảm bảo rằng $dấu được liên kết với jQueryđối tượng.

Thí dụ:

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

Điều này sẽ cảnh báo BARkhi được đưa vào một <script>khối. Tham số BARđược chuyển cho hàm gọi chính nó.

Nguyên tắc tương tự cũng xảy ra trong mã của bạn, jQueryđối tượng được chuyển cho hàm, vì vậy $chắc chắn sẽ tham chiếu đến đối tượng jQuery.

— jAndy
nguồn
1
Tôi hiểu tất cả những điều đó. Điều tôi muốn biết là tại sao / cách thức hoạt động của cú pháp ngoặc để tạo một hàm tự thực thi? Đó chỉ là một đặc điểm của ngôn ngữ? Làm thế nào nó hoạt động?
— Meat
2

JQuery ở cuối tự chuyển (jQuery) sang hàm để bạn có thể sử dụng ký hiệu $ trong plugin của mình. Bạn cũng có thể làm

(function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );
— đàn hạc
nguồn
2

Để tìm lời giải thích rõ ràng về điều này cũng như các thủ thuật javascript hiện đại khác và các phương pháp phổ biến, tôi khuyên bạn nên đọc Javascript Garden.

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

Nó đặc biệt hữu ích, vì nhiều mẫu này được sử dụng rộng rãi trong nhiều thư viện nhưng không thực sự được giải thích.

— OlliM
nguồn
2

Các câu trả lời khác ở đây rất tuyệt, nhưng có một điểm quan trọng chưa được giải quyết. Bạn nói:

Vì vậy, nó đang tạo ra một hàm, theo như tôi có thể nói sẽ không bao giờ được chạy, với tham số là $, đã được xác định?

Không có gì đảm bảo rằng biến toàn cục $có sẵn . Theo mặc định, jQuery tạo hai biến trong phạm vi toàn cục: $và jQuery(trong đó hai biến là bí danh cho cùng một đối tượng). Tuy nhiên, jQuery cũng có thể chạy ở chế độ noConflict :

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

Khi bạn gọi jQuery.noConflict(), biến toàn cục $được đặt trở lại bất kỳ giá trị nào trước khi có thư viện jQuery. Điều này cho phép jQuery được sử dụng với các thư viện Javascript khác cũng sử dụng$ như một biến toàn cục.

Nếu bạn đã viết một plugin dựa vào $việc làm bí danh cho jQuery, thì plugin của bạn sẽ không hoạt động đối với người dùng đang chạy ở chế độ noConflict.

Như những người khác đã giải thích, mã bạn đã đăng sẽ tạo ra một hàm ẩn danh được gọi ngay lập tức. Các biến toàn cầu jQuerysau đó được thông qua vào chức năng ẩn danh này, mà là một cách an toàn bí danh là địa phương biến $bên trong hàm.

— Kip
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.