[英]How can I combine JS Object Literal with jQuery?
I'm cleaning up my JS code and want to create namespaces and use JS OO. 我正在清理我的JS代码,并希望创建名称空间并使用JS OO。 I found a very god tutorial by Rebecca Murphey on Object Literal pattern.
我发现了Rebecca Murphey关于Object Literal模式的神教程 。
Now I'm wondering how I can use this to achieve eg jQuery UI autocomplete by writing: 现在我想知道我如何通过编写如何使用它来实现例如jQuery UI自动完成:
// Pseudocode
$('#input_field').myNameSpace.my_search();
var myNameSpace= {
my_search : function() {
$(this).autocomplete({...});
},
my_other_function: function() {}
};
Currently I'm using my own plugin: 目前我正在使用自己的插件:
$('#input_field').my_search();
(function ($) {
$.fn.my_search = function () {
$(this).autocomplete({
minLength: 2,
source: function( request, response ) {
jQuery.ajax({
url: callback_url,
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( jQuery.map( data, function( item ) {
return {
id: item.id,
value: item.name,
name_encoded: item.name_encoded
}
}));
}
});
},
select: function( event, ui ) {
(...)
}
});
}
})(jQuery);
Any help appreciated. 任何帮助赞赏。
update 更新
My first example was pretty close and James Kyburz was also very close (but working). 我的第一个例子非常接近,James Kyburz也非常接近(但工作)。 I've simplified James's answer to avoid a complicated return data.
我简化了James的答案,以避免复杂的返回数据。
(function () {
// Namspace which also kind of works like an interface
$.fn.my_name_space = function(opt) {
this.autosuggest_brand = autosuggest.autosuggest_brand;
return this;
}
var autosuggest = {
autosuggest_brand : function(action) {
$(this).autocomplete({
// Autocomplete stuff here
});
},
som_other_function _ function() {}
}
})(jQuery);
No, you cannot use namespaces for jQuery plugins (or only very complicated - the context of the selection is lost when you execute the .my_search()
method on the namespace object ). 不,你不能为jQuery插件使用命名空间(或者只是非常复杂 - 当你在命名空间对象上执行
.my_search()
方法时,选择的上下文会丢失)。
Your current plugin is fine; 你当前的插件很好; if you want namespacing then use prefixes like
namespace_search
. 如果你想要命名空间,那么使用像
namespace_search
这样的前缀。
I am still trying but don't think it's possible 我还在努力,但不认为这是可能的
One way would be to wrap everything in a function be it not a namespace... 一种方法是将一切都包装在函数中,而不是命名空间......
$.fn.my_namespace = function() {
var el = this;
var foo = function() { console.log('foo', el); };
var bar = function() { console.log('bar', el); };
return { foo: foo, bar: bar };
}
$('input:first').my_namespace().foo() // foo, [input...]
$('input:first').my_namespace().bar() // bar, [input...]
Unless you need to support old browsers using defineProperty might be a solution 除非您需要使用defineProperty支持旧浏览器,否则可能是一种解决方案
Object.defineProperty($.fn, 'my_namespace', {
get: function() {
var el = this;
return {
foo: function() { console.log( 'foo', el); },
bar: function() { console.log( 'bar', el); },
}
}
});
$('input:first').my_namespace.foo() // foo, [input...]
$('input:first').my_namespace.bar() // bar, [input...]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.