Hiểu đối tượng trả về jQuery

Question

Tôi đang cố gắng hiểu cách jQuery tạo đối tượng trả về khi tìm kiếm các phần tử DOM. Tôi đã đi qua các nguồn, nhưng tôi không hoàn toàn chắc chắn tôi hiểu, và hy vọng ai đó ở đây có thể cho tôi một số cái nhìn sâu sắc. Từ những gì tôi có thể thu thập đọc nguồn, khi truy vấn jQuery DOM, jQuery tìm các phần tử DOM phù hợp, sau đó thêm phần tử DOM phù hợp làm đối tượng sử dụng chỉ mục của phần tử làm khóa cho đối tượng mới.

if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
    for (match in context) { 
     // Properties of context are called as methods if possible 
     if (jQuery.isFunction(this[ match ])) { 
      this[ match ](context[ match ]);  
      // ...and otherwise set as attributes 
     } else { 
      this.attr(match, context[ match ]); 
     } 
    } 
}  
return this; 

Trả lại this, trả về toàn bộ đối tượng jQuery bao gồm tất cả các phương pháp. Tôi đã nhận nó đúng vào thời điểm này chưa?

Bây giờ, nó xuất hiện tất cả các chức năng như css, find, ajax, hide, v.v. nằm trong đối tượng jQuery.fn.

Bằng cách nào đó (và tôi nghĩ rằng đây là nơi mà tôi không nhìn thấy nó), các chức năng này được gọi là, không phải trên phần tử DOM chính nó, nhưng qua access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

var access = jQuery.access = function(elems, fn, key, value, chainable, emptyGet, raw) { 

sử dụng css như Ví dụ, chúng ta có

jQuery.extend({ 
    css: function(elem, name, extra, styles) {... 

jQuery.fn.extend({ 
css: function(name, value) { 
     return access(this, function(elem, name, value) { 
      var styles, len, 
       map = {}, 
       i = 0; 

      if (jQuery.isArray(name)) { 
       styles = getStyles(elem); 
       len = name.length; 

       for (; i < len; i++) { 
        map[ name[ i ] ] = jQuery.css(elem, name[ i ], false, styles); 
       } 

       return map; 
      } 

      return value !== undefined ? 
       jQuery.style(elem, name, value) : 
       jQuery.css(elem, name); 
     }, name, value, arguments.length > 1); 

những gì tôi nghĩ rằng tôi thiếu là làm thế nào chúng tôi nhận được từ gọi $('div').css(...) đó gọi phương thức jQuery.fn.extend.css, và từ đó, các phương pháp truy cập được gọi với chữ ký khác với acc phương pháp ess được khởi tạo trong jQuery cốt lõi?

Ngoài ra, nếu chúng ta không ngừng thay thế jQuery[0],jQuery[1], thế nào là nó mà tôi có thể có:

var divs = $('div'); 
var spans = $('span'); 

Duy trì hai bộ khác nhau của thẻ tài liệu nếu họ đều trở về cùng một đối tượng jQuery? Tôi nghĩ rằng đối tượng sẽ được cập nhật.

Tôi có hoàn toàn hiểu nhầm cách thức này hoạt động không?

Answer 1

Từ những gì tôi có thể thu thập đọc nguồn, khi truy vấn cho một jQuery DOM, jQuery tìm thấy phù hợp với các yếu tố DOM, và sau đó thêm phù hợp DOM yếu tố như một đối tượng sử dụng các chỉ số của nguyên tố này là chìa khóa cho đối tượng mới .

Có. Các cá thể jQuery về cơ bản là các đối tượng giống mảng.

if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
    for (match in context) { 
     // Properties of context are called as methods if possible 
     if (jQuery.isFunction(this[ match ])) { 
      this[ match ](context[ match ]);  
      // ...and otherwise set as attributes 
     } else { 
      this.attr(match, context[ match ]); 
     } 
    } 
}  
return this; 

Nhưng đó không phải là những gì xảy ra trong này phần của mã trích dẫn. Những gì bạn thấy ở đây là mã để xử lý jQuery(html, attributes) signature - khi đối số thứ hai là đối tượng và thẻ đầu tiên là thẻ html độc lập, sau đó gọi các phương thức tương ứng hoặc đặt thuộc tính trên bộ sưu tập mới (this).

Trả lại, trả về toàn bộ đối tượng jQuery bao gồm tất cả các phương pháp. Bây giờ, nó xuất hiện tất cả các chức năng như css, find, ajax, hide, vv. nằm trong đối tượng jQuery.fn.

Có. Các đối tượng được trả về bởi hàm tạo jQuery để kế thừa các phương thức này từ $.fn prototype object.

Bằng cách nào đó (và tôi nghĩ rằng đây là nơi mà tôi không nhìn thấy nó), các chức năng này được gọi là, không phải trên phần tử DOM chính nó, nhưng qua access.js https://github.com/jquery/jquery/blob/master/src/core/access.js

access chỉ là một hàm trợ giúp nội bộ. Tất cả các phương thức jQuery được gọi trên các cá thể jQuery.

sử dụng css làm ví dụ, chúng ta có

jQuery.extend({ 
    css: function(elem, name, extra, styles) {... 

jQuery.css() chỉ là một "tĩnh", chức năng helper nội bộ để nhận giá trị css tính. Không có gì bạn từng sử dụng trực tiếp.

jQuery.fn.extend({ 
    css: function(name, value) { 
     return access(this, function(elem, name, value) { 
      … 
     }, name, value, arguments.length > 1); 
    } 

Những gì tôi nghĩ rằng tôi thiếu là làm thế nào chúng tôi nhận được từ gọi $ ('div'). Css (...) cho rằng cách gọi phương thức jQuery.fn.extend.css

Không có phương thức jQuery.fn.extend.css. Cuộc gọi đó tới jQuery.fn.extend() sẽ xác định phương thức jQuery.fn.css. Và đó chỉ là phương pháp bạn gọi - nó được thừa kế nguyên mẫu bởi $('div').

và từ đó, phương thức truy cập được gọi với chữ ký khác vào phương thức truy cập được khởi tạo trong jQuery chính?

Không, tại sao bạn nghĩ vậy?

// the signature: 
access = function(elems, fn, key, value, chainable, emptyGet, raw) 
// the call: 
access(this, // array-like collection 
     function(…){…}, // callback 
     name, // string 
     value, // whatever 
     arguments.length > 1 // boolean whether it's a getter 
     // undefined, implicit 
     // undefined, implicit 
    ) 

Ngoài ra, nếu chúng ta không ngừng thay thế jQuery [0], jQuery [1]

Không, chúng tôi không? Bạn thấy cái đó ở đâu?

thế nào là nó mà tôi có thể có: var divs = $('div'); var spans = $('span'); Duy trì hai bộ khác nhau của thẻ tài liệu nếu họ đều trở về cùng một đối tượng jQuery?

Chúng không có. Cả hai cuộc gọi đều tạo các cá thể jQuery mới.

Tôi nghĩ đối tượng sẽ được cập nhật.

Không, trường hợp jQuery khá bất biến.