hàm JavaScript khung vuông gọi

Question

Đã được duyệt mã nguồn jQuery khi tôi gặp dòng này:

jQuery(this)[ state ? "show" : "hide" ](); 

Có bất kỳ lợi thế hơn

state ? jQuery(this).show() : jQuery(this).hide(); 

?

dụ độc lập:

var object = { 
    foo: function() { 
     alert('foo'); 
    }, 

    bar: function() { 
     alert('bar'); 
    } 
}; 


object[true ? 'foo' : 'bar'](); 
object[false ? 'foo' : 'bar'](); 

Answer 1

Không có lợi thế về hiệu suất. Nhưng có một lợi thế về độ dài của mã (nếu bạn thấy nó là một lợi thế), và nguyên tắc DRY (không lặp lại mã) đặc biệt nếu bạn có nhiều tham số trong các hàm của bạn.

xem xét như sau:

obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3"); 

Versus:

cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3"); 

Như bạn thấy, bạn lặp lại 'rất nhiều' mã theo cách thứ hai

Hope this helps. Chúc mừng

Answer 2

Có bất kỳ lợi thế

Không, khác hơn so với mã hơi ngắn hơn, và không lặp lại jQuery(this).

Tuy nhiên sự lặp lại có thể được giảm nhẹ bằng cách tuyên bố ví dụ $this trước tiên.

Tôi không tìm thấy mẫu này đặc biệt dễ đọc, do đó, lần duy nhất tôi sử dụng nó là nếu danh sách đối số là không tầm thường và không phụ thuộc vào phương thức nào đang được gọi.

Answer 3

Cách jQuery ngắn gọn hơn và tuân theo nguyên tắc DRY. Tôi nghĩ đó là lợi thế chính so với ví dụ thứ hai.

Answer 4

Trong ví dụ của bạn, không có sự khác biệt giữa

jQuery(this)[ state ? "show" : "hide" ](); 

và

state ? jQuery(this).show() : jQuery(this).hide(); 

Tuy nhiên, quảng trường có thể được sử dụng để gọi một chức năng mà không có nó là tên:

var myFunctionName = 'show'; 
jQuery(this)[ myFunctionName ](); 

Tại sao điều này hữu ích? Trong ví dụ trên, nó hoàn toàn vô dụng. Nhưng chúng ta có thể tìm thấy một số tình huống mà nó có thể tốt đẹp:

// list of available methods 
var effects = [ 'hide', 'slideUp', 'fadeOut' ]; 

// get a random index between 0 and effects.length-1 (2 in this case) 
var randomIndex = Math.floor(Math.random() * (effects.length)); 

// get the method name 
var methodToCall = effects[ randomIndex ]; 

jQuery(this)[ methodToCall ](); 

Đoạn mã này sẽ chọn một phương pháp ngẫu nhiên và gọi phương thức đó trên đối tượng jQuery. Điều đó không tốt sao?:)

Answer 5

Để, tôi muốn xếp hạng:

1. Mã đáng tin cậy làm việc như dự định (không có giải pháp đó là buggy là mong muốn)
2. Mã là có thể đọc được và dễ dàng bảo trì (thiếu khả năng đọc hoặc trì nuôi lỗi và làm chậm tốc độ phát triển)
3. Mã là DRY (lặp đi lặp lại có hại cho khả năng đọc, khả năng bảo trì và đôi khi hiệu suất)
4. Mã là ngắn (nếu nó đạt được tất cả những điều trên, ngắn hơn thường tốt hơn) là

Vấn đề của tôi với jQuery(this)[ state ? "show" : "hide" ](); là nó không phải là mẫu thiết kế chung mà nhiều người được sử dụng để xem và sử dụng để đọc. Như vậy, nó không phải là siêu dễ đọc và có thể dễ dàng gây nhầm lẫn cho những người cố gắng để duy trì mã này trong tương lai (dẫn đến lỗi). Theo ưu tiên của tôi ở trên cho thấy, tôi muốn ủng hộ khả năng đọc trên DRY nếu hai là tỷ lệ cược.

Trong trường hợp này, tôi có thể viết:

var $this = jQuery(this); 
state ? $this.show(): $this.hide(); 

Không càng ngắn, nhưng dễ đọc hơn trong quan điểm của tôi.