（JQuery插件）如何調用函數？

Question

我寫這樣的插件：

!function ($) { 
var DateRangeBindInput = function(element, options) 
{ 
    this.element = element; 
    this.inputStartSelector = ""; 
    this.inputEndSelector = ""; 
    this.rangeOptions = ""; 
    this.containerElement = ""; 

    if (typeof options.inputStartSelector == "string") 
    { 
     this.inputStartSelector = options.inputStartSelector; 
    } 

    if (typeof options.inputEndSelector == "string") 
    { 
     this.inputEndSelector = options.inputEndSelector; 
    } 

    if (typeof options.rangeOptions == "object") 
    { 
     this.rangeOptions = options.rangeOptions; 
    } 

    if (typeof options.containerElement == "string") 
    { 
     this.containerElement = options.containerElement; 
    } 

    this.initiateData(); 
} 

DateRangeBindInput.prototype = { 
    constructor: DateRangePicker, 
    initiateData: function(){ 
     for (var team in this.rangeOptions) { 
      this.rangeOptions[team][0] = new Date(this.rangeOptions[team][0]); 
      this.rangeOptions[team][1] = new Date(this.rangeOptions[team][1]); 
     } 
     $(this.containerElement).find(this.inputStartSelector).val(formatDateString(this.rangeOptions['Last 30 days'][0])); 
     $(this.containerElement).find(this.inputEndSelector).val(formatDateString(this.rangeOptions['Last 30 days'][1])); 
     var startDate = this.rangeOptions['Last 30 days'][0]; 
     var endDate = this.rangeOptions['Last 30 days'][1]; 
     $(this.element).daterangepicker({ 
        ranges: this.rangeOptions, 
        opens: 'right', 
        format: 'MM/DD/YYYY', 
        separator: ' to ', 
        startDate: startDate, 
        endDate: endDate, 
        showDropdowns: true, 
        locale: { 
         applyLabel: 'Apply', 
         fromLabel: 'From', 
         toLabel: 'To', 
         customRangeLabel: 'Custom Range', 
         daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 
         monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
         firstDay: 1 
        }, 
        showWeekNumbers: true, 
        dateLimit: false 
       }, 
       function(start, end) { 
        var st_date = ''; 
        if (start != null && end != null) { 
         st_date = start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'); 
         $(this.containerElement).find(this.inputStartSelector).val(start.format('MM/DD/YYYY')); 
         $(this.containerElement).find(this.inputEndSelector).val(end.format('MM/DD/YYYY')); 
        } else { 
         $(this.containerElement).find(this.inputStartSelector).val(''); 
         $(this.containerElement).find(this.inputEndSelector).val(''); 
        } 
        $(this.element).find("span").html(st_date); 
       } 
      ); 
    }, 
    getDateRange: function(){ 
     var objReturn = new Object(); 
     objReturn.startDate = $(this.containerElement).find(this.inputStartSelector).val(); 
     objReturn.endDate = $(this.containerElement).find(this.inputEndSelector).val(); 
     return objReturn; 
    } 
} 

$.fn.daterangebindinput = function(options) 
{ 
    this.each(function(){ 
     var el = $(this); 
     if (!el.data('daterangebindinput')) 
     { 
      el.data('daterangebindinput', new DateRangeBindInput(el, options)); 
     } 
    }) 
    return this; 
} 
}(window.jQuery); 

然後我創建一個實例：

$('#myDateRangeBindInput').daterangebindinput({ 
    inputStartSelector : "#startDate", 
    inputEndSelector: "#endDate", 
    rangeOptions:{"Today":["10\/28\/2014","10\/28\/2014"],"Yesterday":["10\/27\/2014","10\/27\/2014"],"This week":["10\/27\/2014","10\/28\/2014"],"Last 7 days":["10\/22\/2014","10\/28\/2014"],"Last week (Mon - Sun)":["10\/20\/2014","10\/26\/2014"],"Last 14 days":["10\/15\/2014","10\/28\/2014"],"This month":["10\/01\/2014","10\/28\/2014"],"Last 30 days":["09\/27\/2014","10\/27\/2014"],"Last month":["09\/01\/2014","09\/30\/2014"]};, 
    containerElement: "#myContainer" 
}); 

我如何調用該函數getDateRange。基本上我可以做到以下幾點：

$("#myDateRangeBindInput").data('daterangebindinput').getDateRange(); 

但我看到它看起來很醜。有沒有另外一種方法可以調用getDateRange函數。也許我可以在類DateRangeBindInput中寫更多的函數。但我只想要如下內容：

$("#myDateRangeBindInput").getDateRange(); 

感謝您的幫助。

Answer 1

我知道如何使它美麗：

$.fn.daterangebindinput = function(options) 
{ 
    //Just add this code block 
    if (typeof options == "string") 
    { 
     if (options == "getDateRange" && (typeof $(this).data('daterangebindinput') == "object")) 
     { 
      return $(this).data('daterangebindinput').getDateRange(); 
     } 
     else return null; 
    } 
    else 
    this.each(function(){ 
     var el = $(this); 
     if (!el.data('daterangebindinput')) 
     { 
      el.data('daterangebindinput', new DateRangeBindInput(el, options)); 
     } 
    }) 
    return this; 
} 

我只要致電：

$('#myDateRangeBindInput').daterangebindinput('getDateRange');