2012-02-22 38 views
9

Tôi đang cố gắng tạo lại cấu trúc đối tượng của jQuery (1.7.1) để hiểu rõ hơn về cách hoạt động của nó. Tôi có đoạn mã sau:Làm thế nào jQuery có thể trả về một mảng và vẫn có nó là một đối tượng jQuery?

(function (window, undefined) { 

    var document = window.document, 
     navigator = window.navigator, 
     location = window.location; 

    window.myclass = (function() { 
     var __con = function() { 
      return new __con.fn.init(); 
     } 

     __con.fn = __con.prototype = { 
      'init' : function() { 
       return this; 
      }, 
      'test' : function() { 
       console.log('test1'); 
       return this; 
      } 
     } 

     __con.fn.init.prototype = __con.fn; 

     __con.test = function() { 
      console.log('test2'); 
      return this; 
     } 

     return __con; 
    })(); 

})(window); 

console của tôi trông như thế này:

> myclass().test(); 
    test1 
< __con.fn.__con.init 
> myclass.test(); 
    test2 
< function() { 

      return new __con.fn.init(); 

     } 

nhầm lẫn của tôi là như thế nào jQuery là có thể trở lại một mảng và vẫn còn có nó là một đối tượng jQuery? jQuery được thực hiện từ giao diện điều khiển có thể giống như thế:

> $(document.body) 
    [<body>​…​</body>​] 
> $(document.body).css('width'); 
    "1263px" 

Trong thực tế, có một điều mà tôi chắc chắn nhận thấy là sự thiếu < cho đối tượng trở lại. Vậy chính xác những gì đang xảy ra ở đây? Tôi đã tìm kiếm trên Google để giải thích cách jQuery hoạt động, không có kết quả. Có lẽ tôi chỉ nhận được thuật ngữ sai, tôi không chắc chắn. Có vẻ như tôi không thể tìm thấy bất kỳ nguồn chi tiết nào giải thích điều này.

Có lẽ mã của tôi chưa hoàn chỉnh, nhưng cấu trúc cơ bản mà tôi có cho đến nay là những gì tôi đã có thể trích xuất từ ​​trước đến nay. Xin vui lòng sửa những gì tôi có cho đến nay nếu nó là sai, không đầy đủ, hoặc không hiệu quả, và bằng mọi cách xin vui lòng cung cấp đọc tốt về: thực hành tốt nhất

  • Javascript
  • Làm thế nào jQuery làm việc
  • hiệu quả Javascript lớp
  • mọi thứ tất cả về cấu trúc đối tượng Javascript
    • Singletons
    • Nguyên mẫu
    • Bất cứ điều gì khác liên quan đến bất cứ loại cấu trúc này được gọi là
+1

Tôi không chắc mình hiểu câu hỏi của bạn hoàn toàn, nhưng hãy xem câu trả lời này tôi đã đăng một lúc và xem liệu nó có giúp ích không: http: // stackoverflow.com/questions/7651404/how-does-jquery-create-array-objects/7651455 # 7651455 – davin

+1

Tôi đã tìm thấy các cuộc đàm phán này cực kỳ hữu ích: http://yuiblog.com/crockford/ – romario333

+0

Không hoàn toàn chắc chắn về cách mà cộng đồng wiki công việc. Tôi hiểu rằng tôi sẽ không còn có thể có được danh tiếng từ nó nữa, và từ những gì tôi có thể nói với tất cả những gì bạn cần để tạo ra một câu hỏi là phải đóng câu hỏi. Nếu đó là chính xác, xin vui lòng bỏ phiếu để đóng này. Nhờ không có khả năng trả lời thành công câu hỏi của riêng tôi bằng Google, tôi muốn đây là nơi để tìm hiểu tất cả về 'jquery-internals'. Yea hoặc nay để tạo thành một wiki cộng đồng? – Shea

Trả lời

9

đối tượng jQuery là mảng giống như, vì vậy trông và hành xử rất giống mảng, nhưng trên thực tế chỉ là đối tượng tùy chỉnh thực hiện để xấp xỉ tương đương với một tập hợp các nút DOM (ngoại trừ chức năng bổ sung). Tất cả các chức năng giống như mảng - chiều dài, slice() vv .. - thực tế được thêm thủ công vào nguyên mẫu jQuery (trong đó jQuery.fn là một bí danh), đôi khi gọi một hàm mảng với đối tượng jQuery dưới dạng ngữ cảnh

slice = Array.prototype.slice, 
    ... 
    slice: function() { 
    return this.pushStack(slice.apply(this, arguments), 
     "slice", slice.call(arguments).join(",")); 
    }, 

và đôi khi bằng cách viết từ đầu. Nhìn vào annotated code (có thể là một tài nguyên rất hữu ích cho bạn - nó bao gồm v1.6.2 nhưng tôi không nghĩ rằng bất cứ điều gì quá quyết liệt đã thay đổi kể từ đó, ngoại trừ có thể thêm $ .callbacks) để thấy rằng this.length được đặt theo cách thủ công, ví dụ:

if (selector === "body" && !context && document.body) { 
    this.context = document; 
    this[0] = document.body; 
    this.selector = selector; 
    this.length = 1; 
    return this; 
} 

phương pháp jQuery.buildFragment() cũng là cơ sở cho cách các đối tượng jQuery chứa tập hợp DOM lớn hơn được tạo.

Vì vậy, để tổng hợp, jQuery không sử dụng mảng, nó có vẻ giống như vậy bởi vì nhiều chức năng mảng gốc đã được nhân rộng dưới dạng thuộc tính của nguyên mẫu jQuery.

+0

Có thực sự được thêm thủ công không? Các khung công tác khác mà tôi đã thấy (ender) chỉ cần tạo một mảng và thêm các thuộc tính cho nó. – tjameson

+0

+1 chỉ để dẫn tôi đến "Nguồn chú thích jQuery"! – hippietrail

Các vấn đề liên quan