$ .extend() với hàm

Question

Tôi đang viết một plugin jQuery sẽ cần các chức năng gọi lại được thực hiện, ví dụ, khi một tùy chọn được chọn từ <select>, plugin được áp dụng cho.

Tôi đã nhìn thấy các plugin cho phép bạn xác định chức năng trong các tùy chọn bạn vượt qua nó, như thế này:

$('div.foo').pluginBar({ 
    option1: 'red', 
    someEvent: function() { 
     // Do stuff 
    } 
}); 

Tôi muốn để có thể định nghĩa một hàm mặc định someEvent trong mã Plugin của tôi, nhưng nếu người dùng định nghĩa hàm đó trong các tùy chọn mà họ vượt qua, nó sẽ ghi đè lên hàm mặc định. Điều này có thể xảy ra với $.extend() hoặc tôi có đang tìm kiếm địa điểm không chính xác không?

Tôi đã xem hướng dẫn plugin authoring, nhưng tôi không nghĩ rằng nó bao gồm việc mở rộng hành vi mặc định của các chức năng ở bất kỳ đâu. Tôi đã đọc những điều về cách sử dụng hàm init:, nhưng tôi chỉ muốn có thể xác định hàm (bên trong không gian tên plugin) và thay đổi nó bằng các tùy chọn được chuyển đến plugin.

Answer 1

Dưới đây là một ví dụ:

(function($) { 
    $.fn.pluginBar = function(options) { 
     var settings = $.extend({ 
      someEvent: function() { 
       alert('default'); 
      } 
     }, options); 

     return this.each(function() { 
      settings.someEvent(); 
     }); 
    }; 
})(jQuery); 

$('div.foo').pluginBar({ 
    option1: 'red', 
    someEvent: function() { 
     alert('custom'); 
    } 
}); 

Nếu bạn không chỉ định someEvent khi dây lên các plugin, mặc định ai sẽ được sử dụng.

Answer 2

Có, bạn có thể mở rộng các đối tượng có giá trị hàm.

var originalFunction = function() { 
    alert('original'); 
} 

var a = { 
    foo: 'bar', 
    func: originalFunction 
}; 

var b = { 
    foo: 'baz', 
    func: function() { 
     alert('ok'); 
    } 
}; 

var c = $.extend({}, a, b); 

c.func(); // alerts 'ok' 

Trong JavaScript thường không có sự khác biệt thực tế giữa các hàm và giá trị khác, vì vậy bạn có thể xử lý các hàm như bạn làm với các đối tượng hoặc kiểu dữ liệu khác.

Answer 3

Trong javascript, hàm là đối tượng hạng nhất. Có nghĩa là, bạn có thể sử dụng các chức năng như bạn sẽ thực hiện bất kỳ biến số nào khác:

//making an anonymous function, and assigning it to a variable 
var meep = function() { 
    return 'meep'; 
}; 

//passing a function as a parameter 
[ 'moop' ].map(meep); //['meep'] 

//assigning it in an object literal 
var weirdNoises = { 
    'meep' : meep, 

    'slarg' : function() { 
     return 'slarg'; 
    } 
}; 

weirdNoises.meep(); //'meep' 
weirdNoises.slarg(); //'slarg' 

//you can also return functions 
function meeper() { 
    return meep; 
} 
function slarger() { 
    return function() { 
     return 'slarg'; 
    }; 
} 

//meeper returns a function, so the second() means "execute the function 
// that was returned" 
meeper()(); //'meep' 
slarger()(); //'slarg' 

Như bạn thấy, chức năng giống như bất kỳ giá trị nào khác. Vì vậy, bạn có thể xác định một tùy chọn mặc định sẽ là một hàm và ghi đè lên nó giống như bất cứ điều gì khác.

$.fn.weirdNoise = function (options) { 
    var defaults = { 
     makeNoise : function() { 
      return 'Rabadabadaba'; 
     }, 
     isSilly : true 
    }; 

    return $.extend(defaults, options); 
}; 

var raba = $('foobar').weirdNoise().makeNoise(); 
raba.makeNoise(); //'Rabadabadaba' 
raba.isSilly; //true 

var shaba = $('foobar').wierdNoise({ 
    makeNoise : function() { 
     return 'Shabadabadoo'; 
    } 
}); 
shaba.makeNoise(); //'Shabadabadoo' 
shaba.isSilly; //true 

Ví dụ có vẻ khó hiểu, nhưng tôi nghĩ nó minh họa điểm.