flotante - ¿Es posible crear un espacio de nombres en jQuery?
centrar div html (8)
YUI tiene una buena manera de crear un espacio de nombres para sus métodos, etc. en javascript.
¿JQuery tiene algo similar?
¡El plugin del espacio de nombres es COMPLETAMENTE INNECESARIO! El truco más antiguo del mundo, el uso de arguments.callee, Function.prototype y luego llamar a una nueva instancia de Function, le permite crear espacios de nombres anidados con $ .fn.extend!
Aquí hay un ejemplo simple y simple:
;(function($){
var options= {
root: function(){ //you don''t have to call it ''root'', of course :)
//identify the function from within itself with arguments.callee
var fn= arguments.callee;
//''this'' at this level is the jquery object list matching your given selector
//we equate fn.prototype to this
//thus when we call a new instance of root, we are returned ''this''
fn.prototype= this;
fn.value= function(){
//Note: "new this" will work in the below line of code as well,
//because in the current context, ''this'' is fn;
//I use fn to make the code more intuitive to understand;
var context= new fn;
console.log(context, fn.prototype); //test
return context.html(); //test
}
return this;
}
}
//you can obviously append additional nested properties in this manner as well
options.root.position= function(){
var context= new this; //in this context, fn is undefined, so we leverage ''this''
console.log(context, this.prototype); //test
return context.offset(); //test
}
//don''t forget to extend in the end :)
$.fn.extend(options);
})(jQuery);
;$(function(){
var div= $(''div#div'')
.root();
console.log(div.root.value());
console.log(div.root.position());
});
Así es como creo espacios de nombres para mis complementos:
(function ($) {
// do not overwrite the namespace, if it already exists
$.MyNamespace = $.MyNamespace || {};
$.MyNamespace.MyPlugin = function () {/*here''s the logic*/}
})($);
Y entonces:
$.MyNamespace.MyPlugin ();
Dependiendo de lo que intentes hacer, la arquitectura de plugins de jQuery puede ser lo que estás buscando:
$.fn.myPlugin = function() {
return $(this).each(function() {
// do stuff
});
};
o ...
$.fn.myPlugin = function() {
var myNamespace = {
// your stuff
};
};
realmente depende de lo que estás tratando de hacer.
Si quieres usar jQuery de esta manera:
$("*").namespace.do();
entonces actualmente no hay complementos haciendo eso. (No puedo encontrar el plugin jquery.space de John Resig que aparentemente dejó de funcionar en jQuery 1.4, ni el plugin de Gilberto Saraiva que aparentemente no funcionó como se esperaba). Me encantaría echar un vistazo a la función de John para ver por qué dejó de funcionar, y qué se puede hacer para que funcione y, francamente, sería el mejor enfoque para crear espacios de nombres despejados.
Según http://malnotna.wordpress.com/2009/01/12/jquery-namespace-support/ otro enfoque es hacer el espacio de nombres como (usando jQuery.Modularize por Ariel Flesler):
$("*").namespace().do()
pero tal sintaxis no es "bonita". También pasamos resultados de una función a otra.
Mi enfoque para crear espacios de nombres no es poner espacios de nombres al final, pero al comienzo de $, entonces nuestra sintaxis de espacio de nombres $ (''*''). Se convierte en:
$.namespace("*").do()
Extrañamente, no sé por qué no se menciona este enfoque, ya que te permite crear fácilmente espacios de nombres no bloqueados sin sobreescribir funciones ya existentes (usando $ .sub ()). Además, hacerlo funcionar no requiere nada. Asi que:
(function($){
$.namespace = $.sub();
$.fn.test = function(){ return 1 };
$.namespace.fn.test = function() { return 2};
})(jQuery);
console.log($(''*'').test(), $.namespace(''*'').test());
Y estás listo para irte
Todo el crédito a @Diego Fluery. Acabo de tomar su mazo de diapositivas e hice un prototipo de código ejecutable, pero podría ahorrarte unos minutos si haces esta ruta:
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
(function () {
$.fn.AppRedirect = function() {
this.sendRequest = parts.sendRequest;
this.doRedirect = parts.doRedirect;
return this;
}
var parts = {
doRedirect: function() {
console.log(''doRedirect'');
},
sendRequest: function() {
console.log(''sendRequest'');
}
};
})();
$("body").AppRedirect().sendRequest();
$("body").AppRedirect().doRedirect();
});
</script>
</head>
<body>
</body>
</html>
jQuery tiene un montón de complementos que amplían la funcionalidad básica. Hay este complemento para espacios de nombres fáciles.
mira este blog: http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/
el espacio de nombres dinámico autoinvocador es lo que he usado antes:
var myApp = {};
(function(context) {
var id = 0;
context.next = function() {
return id++;
};
context.reset = function() {
id = 0;
}
})(myApp);
window.console && console.log(
myApp.next(),
myApp.next(),
myApp.reset(),
myApp.next()
); //0, 1, undefined, 0
lpfavreau ofrece la solución para extender el objeto jQuery con sus propios métodos (para que su funcionalidad se aplique al contexto real del objeto jQuery).
Si está buscando solo el espacio de nombre de su código, puede usar el símbolo de dólar de esta manera:
$.myNamespace = { .. };
o el "jQuery":
jQuery.myNamespace = { .. };
Tenga cuidado con el espacio de nombres que elija, ya que puede sobreescribir los métodos existentes de jQuery (le sugiero que busque primero en el código jQuery para que no lo haga).
Puede seguir este enlace: http://www.zachleat.com/web/2007/08/28/namespacing-outside-of-the-yahoo-namespace/
Vea lo fácil que es crear su propia función para replicar lo que hace YUI:
// include jQuery first.
jQuery.namespace = function() {
var a=arguments, o=null, i, j, d;
for (i=0; i<a.length; i=i+1) {
d=a[i].split(".");
o=window;
for (j=0; j<d.length; j=j+1) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
return o;
};
// definition
jQuery.namespace( ''jQuery.debug'' );
jQuery.debug.test1 = function()
{
alert( ''test1 function'' );
};
jQuery.debug.test2 = function()
{
alert( ''test2 function'' );
};
// usage
jQuery.debug.test1();
jQuery.debug.test2();