2010-12-28 16 views
7

¿Cuáles son algunas "reglas de oro" actuales para la implementación de espacios de nombres JQuery para albergar las funciones de utilidad de propósito general?Mejores prácticas para espacios de nombres JQuery + funciones de utilidad de propósito general

Tengo una serie de métodos de utilidad de JavaScript dispersos en varios archivos que me gustaría consolidar en uno (o más) espacios de nombres. ¿Cuál es la mejor manera de hacer esto?

Actualmente estoy mirando a dos sintaxis diferentes, que se enumeran en orden de preferencia:

//****************************** 
    // JQuery Namespace syntax #1 
    //****************************** 
    if (typeof(MyNamespace) === "undefined") 
    { 
    MyNamespace = {}; 
    } 

    MyNamespace.SayHello = function() 
    { 
    alert("Hello from MyNamespace!"); 
    } 

    MyNamespace.AddEmUp = function (a, b) 
    { 
    return a + b; 
    } 

    //****************************** 
    // JQuery Namespace syntax #2 
    //****************************** 
    if (typeof (MyNamespace2) === "undefined") 
    { 
    MyNamespace2 = 
    { 
     SayHello: function() 
     { 
      alert("Hello from MyNamespace2!"); 
     }, 

     AddEmUp: function (a, b) 
     { 
      return a + b; 
     } 
    }; 
    } 

Sintaxis # 1 es más prolija, pero parece que sería más fácil de mantener en el futuro. No necesito agregar comas entre métodos, y puedo alinear todas mis funciones.

¿Hay otras formas de hacerlo, ?

+0

creo que la sintaxis # 1 es mejor, ya que le permite utilizar el espacio de nombres en varios archivos. Utilizo este método en mis proyectos. –

+0

También debería extender esta pregunta para incluir espacios de nombres que contengan enumeraciones. Para las enumeraciones, aún preferiría la sintaxis n. ° 1. –

+0

NB: Colocar llaves abiertas en su propia línea es una invitación al desastre. Open-curlies siempre debe colocarse en la misma línea que su "propietario", es decir, if(), =, etc. –

Respuesta

1

Para el registro, que terminé usando la primera sintaxis:

$(function() 
{ 
    //******************************** 
    // PREDIKT NAMESPACE 
    //******************************** 

    if (typeof (Predikt) === "undefined") 
    { 
     Predikt = {}; 
    } 

    //******************************** 
    // PREDIKT.TIMER NAMESPACE 
    //******************************** 

    if (typeof (Predikt.Timer) === "undefined") 
    { 
     Predikt.Timer = {}; 
    } 

    Predikt.Timer.StartTimer = function() 
    { 
     return new Date().getTime(); 
    }; 

    Predikt.Timer.EndTimer = function() 
    { 
     return new Date().getTime(); 
    }; 

}); 
+1

Es su llamada, pero 'Predikt = window.Predikt || {} 'funciona muy bien y es más corto. Siempre que haga referencia al objeto nuevo como una propiedad (por ejemplo, window.Predict y no solo Predikt), no obtendrá un ReferenceError sino solo un nuevo objeto vacío. De todos modos, no necesita los parens alrededor de los nombres de los objetos. – Ronny

3

Para los complementos de jQuery y tal el patrón es usar $.fn.myPlugin si quiere que esté disponible en los elementos, y $.whatever si solo quiere usar el espacio de nombres. Recomiendo leer el Plugins Authoring document oficial y thesearticles.

Pero jQuery un lado, la forma más fácil namespace sus utilidades serían lo largo de estas líneas:

var utils = window.utils || {}; 
utils.method = function(){}; 

Los fundamentos de los espacios de nombre de JS realmente no ha cambiado últimamente - Debe retirar snook's article, DED's elegant approach y this SO question .

La principal ventaja de utilizar una función autoinvocada para declarar espacios de nombres es que puede ejecutar cosas de forma privada antes de devolver el objeto. Además, el objeto estará listo para ser completado automáticamente por su consola, que se perderá en el espacio de nombres $ porque jQuery devuelve una función en lugar de un objeto.

+0

preferiblemente 'var utils = window.utils || {} ' – Raynos

+0

Tienes razón, te lo perdiste. Editado, gracias :-) – Ronny

+0

jQuery probablemente se usó aquí como sinónimo de Javascript :) En cualquier caso, la sintaxis del plugin jQuery en realidad no admite el espaciado de nombres (aparte de ''event.namespace'' en' trigger'/'bind'); la solución estándar, bastante horrible, parece estar usando una sola función para casi todo. – Tgr

Cuestiones relacionadas