假设我们有这样的 jQuery select2 插件:
$(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>
我们怎样才能做到这一点?
来源:
最佳答案
您遇到的问题是,当您在 document.ready 下运行时,init
函数中的 this
将引用 document
处理程序。要解决此问题,您可以直接使用 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
的语义并不明确。
关于javascript - 带有 jQuery 插件的 jQuery 对象文字或模块模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41510006/