jQuery的對象文本或模塊模式

Question

比方說，我們有這樣的事情與jQuery的選擇2插件：

$(function() { 
 

 
    $('.select2').select2({ 
 
    minimumInputLength: 1, 
 
    ajax: { 
 
     dataType: 'json', 
 
     cache: true, 
 
     url: getUrl, 
 
     data: getData, 
 
     processResults: getProcessResults 
 
    } 
 
    }); 
 

 
    function getUrl() { 
 
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM'; 
 
    } 
 

 
    function getData(params) { 
 
    return { 
 
     q: params.term 
 
    }; 
 
    } 
 

 
    function getProcessResults(data) { 
 
    return { 
 
     results: data 
 
    }; 
 
    } 
 

 
});

.select2 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 

 
<select class="select2"></select>

但我們想使用對象文本或模塊模式jQuery的功能和插件這樣的：

var myAjax = { 
 

 
    init: function() { 
 
    var _this = this; 
 

 
    $('.select2').select2({ 
 
     minimumInputLength: 1, 
 
     ajax: { 
 
     dataType: 'json', 
 
     cache: true, 
 
     url: _this.getUrl, 
 
     data: _this.getData, 
 
     processResults: _this.getProcessResults 
 
     } 
 
    }); 
 
    }, 
 

 
    getUrl: function() { 
 
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM'; 
 
    }, 
 

 
    getData: function(params) { 
 
    return { 
 
     q: params.term 
 
    }; 
 
    }, 
 

 
    getProcessResults: function(data) { 
 
    return { 
 
     results: data 
 
    }; 
 
    } 
 
    
 
}; 
 

 
$(document).ready(myAjax.init);

.select2 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 

 
<select class="select2"></select>

我們該怎麼做？

來源：

https://learn.jquery.com/code-organization/concepts/

https://select2.github.io/examples.html#data-ajax

Answer 1

你的問題是，init函數中this將參照document，因爲你的document.ready處理器下運行它。要解決這個問題，你可以直接使用myAjax變量來調用它的屬性和方法。試試這個：

var myAjax = { 
 
    init: function() {  
 
    $('.select2').select2({ 
 
     minimumInputLength: 1, 
 
     ajax: { 
 
     dataType: 'json', 
 
     cache: true, 
 
     url: myAjax.getUrl(), 
 
     data: myAjax.getData, 
 
     processResults: myAjax.getProcessResults 
 
     } 
 
    }); 
 
    }, 
 
    getUrl: function() { 
 
    return 'http://beta.json-generator.com/api/json/get/4JZYSpOHM'; 
 
    }, 
 
    getData: function(params) { 
 
    return { 
 
     q: params.term 
 
    }; 
 
    }, 
 
    getProcessResults: function(data) { 
 
    return { 
 
     results: data 
 
    }; 
 
    } 
 
}; 
 

 
$(document).ready(myAjax.init);

.select2 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> 
 
<select class="select2"></select>

我也建議你改變對象的名稱作爲myAjax鑑於其目的是不是很語義。