Sự khác nhau giữa jQuery.extend và jQuery.fn.extend?

Question

Tôi đang cố gắng hiểu cú pháp plugin jquery, vì tôi muốn hợp nhất hai plugin thành một. Blinker cũng cần để có thể dừng lại khoảng thời gian hoặc chạy một số lần.

Dù sao, là cú pháp này giống như

jQuery.fn.extend({ 
    everyTime: function(interval, label, fn, times) { 
     return this.each(function() { 
      jQuery.timer.add(this, interval, label, fn, times); 
     }); 
    }, 
    oneTime: function(interval, label, fn) { 
     return this.each(function() { 
      jQuery.timer.add(this, interval, label, fn, 1); 
     }); 
    }, 

này

$.fn.blink = function(options) 
    { 

vì nó trông giống như là người đầu tiên (không =) là một cách để thiết lập nhiều phương pháp cùng một lúc. Điều này có đúng không? Ngoài ra khi tôi ở đây Điều gì sẽ là lý do để thêm các phần tử và một số logic vào đối tượng jquery?

jQuery.extend({ 
    timer: { 
     global: [], 
     guid: 1, 
     dataKey: "jQuery.timer", 

(đây là từ các plugin timer)

cảm ơn, Richard

Answer 1

jQuery.extend được sử dụng để mở rộng bất kỳ đối tượng với các chức năng bổ sung, nhưng jQuery.fn.extend được sử dụng để kéo dài tuổi Đối tượng jQuery.fn, trong thực tế, thêm một số chức năng plugin trong một lần (thay vì chỉ định từng chức năng riêng biệt).

jQuery.extend:

var obj = { x: function() {} } 

jQuery.extend(obj, { y: function() {} }); 

// now obj is an object with functions x and y 

jQuery.fn.extend:

jQuery.fn.extend({ 
     x: function() {}, 
     y: function() {} 
}); 

// creates 2 plugin functions (x and y) 

Answer 2

jQuery.extend({ 
    abc: function(){ 
     alert('abc'); 
    } 
}); 

sử dụng: $.abc(). (Không chọn cần thiết như $.ajax().)

jQuery.fn.extend({ 
    xyz: function(){ 
     alert('xyz'); 
    } 
}); 

sử dụng: $('.selector').xyz(). (Bộ chọn được yêu cầu như $('#button').click().)

Chủ yếu nó được sử dụng để thực hiện $.fn.each().

Tôi hy vọng điều đó sẽ hữu ích.

Answer 3

Sự khác biệt giữa jQuery.extend và jQuery.fn.extend?

Thực ra, không có gì khác ngoài tham chiếu cơ sở của chúng. Trong số jQuery source, bạn có thể đọc:

jQuery.extend = jQuery.fn.extend = function() { … }; 

Vậy nó hoạt động như thế nào? Số documentation lần đọc:

Kết hợp nội dung của hai hoặc nhiều đối tượng lại với nhau thành đối tượng đầu tiên.

Nó chỉ là một vòng lặp for-in-loop sao chép các thuộc tính, pimped với một lá cờ để recurse các đối tượng lồng nhau. Và tính năng khác:

Nếu chỉ có một luận cứ được cung cấp cho $.extend(), điều này có nghĩa là đối số mục tiêu đã được bỏ qua

// then the following will happen: 
target = this; 

Vì vậy, nếu hàm được gọi vào jQuery bản thân (không có mục tiêu rõ ràng), nó sẽ mở rộng vùng tên jQuery. Và nếu hàm được gọi trên jQuery.fn (không có mục tiêu rõ ràng), nó sẽ mở rộng đối tượng nguyên mẫu jQuery nơi tất cả các phương thức (plugin) được đặt.

Answer 4

This blog post có mô tả tốt đẹp:

$.fn.extend({ 
myMethod: function(){...} 
}); 
//jQuery("div").myMethod(); 

$.extend({ 
myMethod2: function(){...} 
}); 
//jQuery.myMethod2(); 

Quotes:

Theo nguyên tắc chung, bạn nên mở rộng đối tượng jQuery cho các chức năng và đối tượng jQuery.fn cho các phương pháp. Một hàm, trái ngược với một phương thức, không được truy cập trực tiếp từ DOM.

Answer 5

$.fn.something= function{}; 

trỏ đến jQuery.prototype và cho phép truy cập phần tử dom thông qua "this". Bây giờ u có thể sử dụng $(selector).something(); Vì vậy, các công trình này chức năng như là plugin như $(selector).css();

$.something = function{}; 

thêm một tài sản hoặc chức năng với jQuery đối tượng chính nó và u không thể sử dụng "này" để truy cập dom bây giờ u có thể sử dụng nó như $.something(); công trình này như một chức năng tiện ích như $.trim()

nhưng

$.fn.extend({function1(), function2()}) and $.extend({function1(), function2()}) 

cho phép bổ sung thêm hơn 1 chức năng tại time.Also cùng họ có thể được sử dụng để hợp nhất hai đối tượng trực trong trường hợp chúng tôi cung cấp nhiều hơn một đối tượng.