Estoy tratando de mejorar mi sintaxis jquery / javascript. ¿Hay una mejor manera de escribir esto?

if (ok)
    var mymsg   = '<p id="ok-box">'
                +   "You're good to go"
                + '</p>';
}else {
    var mymsg   = '<p id="not-ok-box">'
                +   "Error"
                + '</p>';
}

Estaba pensando que si jquery / javascript tuviera una sintaxis similar a la siguiente sintaxis de PHP, sería genial:

$mymsg = ($ok) ? "You're good to go" : "Error";
4
Chris 20 oct. 2009 a las 16:16

9 respuestas

La mejor respuesta

Te refieres a:

var mymsg = ok ? '<p id="ok-box">You\'re good to go</p>' :
    '<p id="not-ok-box">Error</p>';

¡Lo hace! :)

12
Anthony Mills 20 oct. 2009 a las 12:21

No declare sus variables en un ámbito que desaparecerá antes de usar la variable.

var mymsg = '<p id=';
mymsg += $ok ? '"ok-box">You\'re good to go' : '"not-ok-box">Error';
mymsg += '</p>';

Por cierto, los idiotas que promueven un alcance peligroso sin entender cuán mal te morderán en otros idiomas deben ser colgados.

-1
Peter Payne 20 oct. 2009 a las 12:28

Aquí tiene

if (ok) {
var mymsg = "<p id=\"ok-box\">You're good to go</p>";
} else {
var mymsg = "<p id=\"not-ok-box\">Error</p>";
}
0
Truls Larsen 9 nov. 2012 a las 00:14

Extendería algunas de las respuestas anteriores. Puede utilizar jquery mucho más aquí. A pesar de que realmente no agrega mucho, excepto la conveniencia.

var myMsg = "You're good to go";
var msgClass = "ok-box";

if ( !ok ) {
  myMsg = "Error";
  msgClass = "not-ok-box";
}

Si esto está dentro de una función, no se preocupe por el espacio de nombres de las variables. Serán locales de todos modos. Desde que está usando jquery, úselo para crear los elementos.

var okbox = $('<p id="' + msgId + '">' + myMsg + '</p>').get();

Luego puede agregar okbox en cualquier lugar utilizando métodos jquery.

$('#content').append(okbox);

Como es un pequeño fragmento de código html, no debería preocuparse por el rendimiento. Por supuesto YMMV.

0
Marco 20 oct. 2009 a las 18:29

Puede usar una declaración ternaria (ese es el nombre elegante para el truco if en una línea):

var is_ok = true;
var myMsg = is_ok ? "You're good to go" : "Error";

Pero está cambiando dos partes de su etiqueta p, por lo que es posible que desee hacer algo como esto en su lugar:

// defaults
var myMsg = "You're good to go";
var msgClass = "ok-box";

if ( !is_ok ) {
  myMsg = "Error";
  msgClass = "not-ok-box";
}

El problema con eso es que ahora tienes dos variables volando ... no muy ordenadas, por lo que puedes envolverlas en un objeto:

var myMsg = {
  text : "You're good to go",
  cssClass : "ok-box"
}

if ( !is_ok ) {
  myMsg.text = "Error";
  myMsg.cssClass = "not-ok-box";
}

Que es más ordenado y todo autocontenido.

var myBox = '<p class="' + msgClass + '">' + myMsg + '</p>';

Sin embargo, crearía el elemento usando código (que no sé cómo hacer en jquery ya que soy un chico de mootools). En mootools sería algo como esto:

myBox = new Element( "p", { class : msgClass, html : myMsg } );
0
alex 20 oct. 2009 a las 13:04

Si tiene que usar operadores ternarios en su código (intente no hacerlo, hace que sea terriblemente difícil de seguir más adelante), intente rodearlos con corchetes para que se parezcan más a las declaraciones if para que sean más fáciles de seguir:

var mymsg = '<p id="' + (!ok ? 'not-' : '') + 'ok-box">' + (ok ? 'You\'re good to go' : 'Error') + '</p>';
0
Nathan Kleyn 20 oct. 2009 a las 12:26

¿Buscas lo más entendible? ¿O el más corto? ¿El elemento realmente necesita diferentes identificadores?

var mymsg = '<p id="' + (ok ? '' : 'not-') + 'ok-box">' + (ok ? "You're good to go" : 'Error') + '</p>';
0
Tim Büthe 20 oct. 2009 a las 12:25

Piense en las plantillas de JavaScript: son mucho mejores que las cadenas de codificación rígidas y mezclan la lógica con el código de presentación. google vio uno viable (sin duda más por ahí): http: //peter.michaux .ca / articles / javascript-template-bibliotecas

<script language="javascript">
    //call your methods and produce this data
    var data = ok?{cssClass:"ok-box",msg:"OK some custom msg"}
                 :{cssClass:"not-ok-box",msg:"NOT OK custom msg"};
</script>
<textarea id="msg_template" style="display:none;">
  <p id="${cssClass}">${msg}</p>
</textarea>
<script language="javascript">
    var result = TrimPath.processDOMTemplate("msg_template", data);
    document.getElementById('content').innerHTML = result;
</script>
1
Chii 20 oct. 2009 a las 12:29

La mejor manera de escribir eso desde mi punto de vista es:

if (ok)
  var mymsg = '<p id="ok-box">You\'re good to go</p>';
} else {
  var mymsg = '<p id="not-ok-box">Error</p>';
}

Los operadores ternarios hacen que el código sea más confuso, no menos. El cambio más obvio que puedo ver es deshacerme del agregado de cadenas superfluo y hacerlo todo de una vez. Las cadenas que tienes son muy sencillas, y en realidad no es necesario dividirlas en 3 líneas cada una.

1
Dominic Rodger 20 oct. 2009 a las 12:19