I'm cleaning up my JS code and want to create namespaces and use JS OO. I found a very god tutorial by Rebecca Murphey on Object Literal pattern.
Now I'm wondering how I can use this to achieve eg jQuery UI autocomplete by writing:
// 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). I've simplified James's answer to avoid a complicated return data.
(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 ).
Your current plugin is fine; if you want namespacing then use prefixes like 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
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...]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.