Comprobación de condiciones antes de permitir que un botón de reproducción se haga visible -- javascript campo con jquery camp codereview Relacionados El problema

Checking conditions before allowing a play button to become visible


12
vote

problema

Español

Tengo este código para verificar un par de condiciones antes de permitir que un botón se vuelva visible. ¿Hay algo que hacer para consolidar este código?

  var isNodeWebkit = (typeof process == "object"); // check if using node app var downloadURL = 'https://www.microsoft.com/getsilverlight/get-started/install/'; // setup download URL variable var isEncoding = false; // setup isEncoding variable  if (!Silverlight.isInstalled("1.0")) { // check if silverlight is installed     $('.playbtn').hide();     $('.videoposter').append('<button class="installbtn" />');     if (isNodeWebkit) {         $('.installbtn').on('click', function () { // open silverlight download externally             require('nw.gui').Shell.openExternal(downloadURL);             var win = require('nw.gui').Window.get();             win.close(); return false;         });     } else {         $('.installbtn').click(function () { // open silverlight download in new tab             window.open(downloadURL, '_blank');         });         $(window).focus(function () {             if (Silverlight.isInstalled("1.0")) {                 $('.installbtn').remove();                 $('.playbtn').show(); checkEncodingFunc();             } else if (!Silverlight.isInstalled("1.0")) {                 $('.installbtn').remove(); $('.videoposter').append('<button class="installbtn" />');                 $('.playbtn').hide(); $('.encodingbtn').hide();             }; ;         });     }; } else if (Silverlight.isInstalled("1.0")) {     $(window).focus(function () { // after installing show play button         if (!Silverlight.isInstalled("1.0")) {             $('.playbtn').hide(); $('.installbtn').remove(); $('.encodingbtn').remove();             $('.videoposter').append('<button class="installbtn" />');             $('.installbtn').click(function () { // open silverlight download in new tab                 window.open(downloadURL, '_blank');             });         } else {             $('.installbtn').remove();             $('.playbtn').show();         };         if (Silverlight.isInstalled("1.0") && isEncoding == true) { checkEncodingFunc(); };     }); };  var encodeTimer = setInterval(function () { if (isEncoding == true) { checkEncodingFunc(); }; }, 60000); if (Silverlight.isInstalled("1.0")) { checkEncodingFunc(); };  function checkEncodingFunc() { // check if video is encoding     $.ajax({         url: 'video/',         statusCode: {             200: function () { // if video is found display play button                 if (isEncoding == true) {                     $('.encodingbtn').remove();                     $('.playbtn').show();                     isEncoding = false;                 };             },             204: function () { // if video is encoding display encoding button                 if (Silverlight.isInstalled("1.0")) {                     isEncoding = true;                     $('.playbtn').hide(); $('.encodingbtn').remove();                     $('.videoposter').append('<button class="encodingbtn" />');                 };             }         }     }); };   
Original en ingles

I have this code to check a couple conditions before allowing a play button to become visible. Is there anything to do to consolidate this code?

var isNodeWebkit = (typeof process == "object"); // check if using node app var downloadURL = 'https://www.microsoft.com/getsilverlight/get-started/install/'; // setup download URL variable var isEncoding = false; // setup isEncoding variable  if (!Silverlight.isInstalled("1.0")) { // check if silverlight is installed     $('.playbtn').hide();     $('.videoposter').append('<button class="installbtn" />');     if (isNodeWebkit) {         $('.installbtn').on('click', function () { // open silverlight download externally             require('nw.gui').Shell.openExternal(downloadURL);             var win = require('nw.gui').Window.get();             win.close(); return false;         });     } else {         $('.installbtn').click(function () { // open silverlight download in new tab             window.open(downloadURL, '_blank');         });         $(window).focus(function () {             if (Silverlight.isInstalled("1.0")) {                 $('.installbtn').remove();                 $('.playbtn').show(); checkEncodingFunc();             } else if (!Silverlight.isInstalled("1.0")) {                 $('.installbtn').remove(); $('.videoposter').append('<button class="installbtn" />');                 $('.playbtn').hide(); $('.encodingbtn').hide();             }; ;         });     }; } else if (Silverlight.isInstalled("1.0")) {     $(window).focus(function () { // after installing show play button         if (!Silverlight.isInstalled("1.0")) {             $('.playbtn').hide(); $('.installbtn').remove(); $('.encodingbtn').remove();             $('.videoposter').append('<button class="installbtn" />');             $('.installbtn').click(function () { // open silverlight download in new tab                 window.open(downloadURL, '_blank');             });         } else {             $('.installbtn').remove();             $('.playbtn').show();         };         if (Silverlight.isInstalled("1.0") && isEncoding == true) { checkEncodingFunc(); };     }); };  var encodeTimer = setInterval(function () { if (isEncoding == true) { checkEncodingFunc(); }; }, 60000); if (Silverlight.isInstalled("1.0")) { checkEncodingFunc(); };  function checkEncodingFunc() { // check if video is encoding     $.ajax({         url: 'video/',         statusCode: {             200: function () { // if video is found display play button                 if (isEncoding == true) {                     $('.encodingbtn').remove();                     $('.playbtn').show();                     isEncoding = false;                 };             },             204: function () { // if video is encoding display encoding button                 if (Silverlight.isInstalled("1.0")) {                     isEncoding = true;                     $('.playbtn').hide(); $('.encodingbtn').remove();                     $('.videoposter').append('<button class="encodingbtn" />');                 };             }         }     }); }; 
     

Lista de respuestas

15
 
vote
vote
La mejor respuesta
 

Solo unas cuantas cosas más pequeñas en la parte superior de jt0dd 's Excelente revisión.


Las funciones anónimas en JavaScript son increíbles, pero su programa será más legible si le da los nombres de las funciones principales y declare de antemano. De esa manera, la parte principal de su programa se convertirá en algo así:

  data6  

Más fácil ver la lógica general, no?


No escriba data7 Suelncias de esta manera:

  data8  

Eso es lo que es para:

  std::vector0  

No necesita evaluar las variables booleanas como esta:

  std::vector1  

puedes hacer simplemente:

  std::vector2  

En esta línea, no necesita los soportes, y creo que el código sería más legible con el comentario en la línea antes de la asignación.

  std::vector3  

mejor de esta manera:

  std::vector4  

Especialmente con líneas largas como esta, definitivamente no ponga comentarios después de la declaración, ya que me obliga a desplazarse, lo que no es conveniente. Aún mejor, el comentario que dice std::vector5 para una asignación de variables es inútil, por lo que es mejor simplemente caerlo.

  std::vector6  

Estas líneas deberían haber sido solo:

  std::vector7  

Sin comentarios, las asignaciones son autoexplicativas.

 

Just a few more minor things on top of jt0dd's excellent review.


Anonymous functions in JavaScript are awesome, but your program will be more readable if you give the main functions names and declare in advance. That way the main part of your program will become something like this:

if (!haveSilverlight) {     $('.playbtn').hide();     $('.videoposter').append('<button class="installbtn" />');     if (isNodeWebkit) {         $('.installbtn').on('click', openExternalSilverlightDownloader);     } else {         $('.installbtn').on('click', openSilverlightDownloader);         $(window).on('focus', setupInstallBtn);     } } else {     $(window).on('focus', setupPlayBtn); } 

Easier to see the overall logic, no?


Don't write if statements this way:

if (something) {      // ... } else if (!something) {      // ... } 

That's what else is for:

if (something) {      // ... } else {      // ... } 

You don't need to evaluate boolean variables like this:

if (isEncoding == true) {     // ... } 

You can do simply:

if (isEncoding) {     // ... } 

On this line, you don't need the brackets, and I think the code would be more readable with the comment on the line before the assignment.

var isNodeWebkit = (typeof process == "object"); // check if using node app 

Better this way:

// check if using node app var isNodeWebkit = typeof process == "object"; 

Especially with long lines like this, definitely don't put comment after the statement, as it forces me to scroll right, which is not convenient. Even better, the a comment saying // setup download URL variable for a variable assignment is pointless, so it's better to just drop it.

var downloadURL = 'https://www.microsoft.com/getsilverlight/get-started/install/'; // setup download URL variable var isEncoding = false; // setup isEncoding variable 

These lines should have been just:

var downloadURL = 'https://www.microsoft.com/getsilverlight/get-started/install/'; var isEncoding = false; 

Without comments, assignments are self-explanatory.

 
 
   
   
14
 
vote

OK En primer lugar .. Silverlight Rant.

Silverlight fue un flop mucho menos exitoso que Microsoft esperado que sea. HTML5 + WebGL, por otro lado, es el futuro de manejar cualquier cosa que cualquiera que haya pensado que Silverlight podría hacer. Si desea mantener las prácticas altamente respaldadas, a prueba de futuro, comience a hacer una investigación de WebGL. es increíble. Silverlight es otro de los intentos de Microsoft por evitar la estandarización y controlar la web con su propia tecnología. Han fallado todas las veces hasta ahora.

LECCIÓN: Evite las cosas patentadas de Microsoft cuando sea posible.

Ahora, para una revisión en prácticas.

En cuanto a su formato y prácticas de código, estoy contento con lo que veo. Hay algunas mejoras que puede hacer para que su código sea un poco más simple:

Usted usa if(!Silverlight.isInstalled("1.0")) // do stuff por todo el lugar. Intenta esto en lugar:

  var silverlightCheck = Silverlight.isInstalled("1.0"); if (silverlightcheck) // do stuff   

Los vi en la misma línea: $('.playbtn').show(); checkEncodingFunc(); nu uh. No. Uso:

  $('.playbtn').show();  checkEncodingFunc();   

y una simplificación más:

Puede hacer que los selectores se repitan a menudo, como $('.installbtn') en variables.

   var installButton = $('.installbtn'); //   

De esa manera, escribe ese selector un poco más rápido a través de la variable.

He tocado alguna simple simplificación. Alguien podría revisar esto para aportar una mejora a la estructura, pero esto no es un código malo. +1 para usted!

 

Ok first of all.. Silverlight Rant.

Silverlight was a flop far less successful than Microsoft expected it to be. HTML5 + WebGL, on the other hand, is the future of handling anything that anyone ever thought Silverlight might do. If you want to maintain highly supported, future-proof practices, start doing some WebGL research. It's INCREDIBLE. Silverlight is another one of Microsoft's attempts to avoid standardization and control the web with their own tech. They've failed every single time so far.

Lesson: Avoid Microsoft's proprietary stuff when possible.

Now, for a Review on Practices..

As far as your code formatting and practices go, I'm happy with what I see. There are a few improvements you can make to make your code a bit simpler:

You use if(!Silverlight.isInstalled("1.0")) // do stuff all over the place. Try this instead:

var silverlightCheck = Silverlight.isInstalled("1.0"); if (silverlightcheck) // do stuff 

I saw these on the same line: $('.playbtn').show(); checkEncodingFunc(); Nu uh. Nope. Use:

$('.playbtn').show();  checkEncodingFunc(); 

And one more simplification:

You can make selectors that you often repeat, such as $('.installbtn') into variables.

 var installButton = $('.installbtn'); // 

That way, you type that selector a little quicker via the variable.

I've touched on some simplification. Someone might review this to contribute improvement to the structure, but this is not bad code. +1 for you!

 
 
         
         

Relacionados problema

5  Función de movimiento para un juego  ( Move function for a game ) 
Tengo una función PackageSubpackageSubpackageName6 en este juego que estoy haciendo. Funciona bien, pero me gustaría reducir un poco su tamaño. PackageSu...

2  Animaciones de la línea de tiempo  ( Timeline animations ) 
Hice recientemente esta línea de tiempo del campus para mi universidad. Al ver la línea de tiempo en un dispositivo móvil (no una tableta), la barra de nave...

1  Actualización de una página web de DRUPAL con contenido basado en texto ingresado  ( Updating a drupal web page with content based on inputted text ) 
La intención es actualizar una página web de drupal existente con contenido basado en texto ingresado en un cuadro de texto. La página existente muestra dat...

3  Función de estilo sortable jquery  ( Jquery sortable style function ) 
Esta es una función de clasificación básica escrita en jQuery que mueve los elementos en la DOM alrededor para crear espacios vacíos para un gotpable (). Como...

3  Página web basada en una muestra de un libro  ( Web page based on a sample from a book ) 
He creado una página web basada en una muestra de un libro. Funciona bien, pero parece haber sido demasiado complicado. dt4 ¿Es posible mejorar la clari...

1  Manipulador de eventos repetitivos para un control de interfaz de usuario de la UI  ( Repetitive event handler for a toggling ui control ) 
Siento que este tipo de código podría haber sido escrito más elegante, especialmente con las enormes afirmaciones de IF / ODS. ¿Alguien puede ayudarme a rompe...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

8  Escribiendo un widget de jquery: plantilla  ( Writing a jquery widget templating ) 
Estoy haciendo mi primer mayor desarrollo de jQuery. Es un widget para eventos recurrentes, y es como una bestia bastante compleja. El código completo está di...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

3  Construyendo una tabla HTML utilizando JavaScript  ( Building an html table using javascript ) 
¿Una forma más legible para hacer esto? renderHtmlTable(function(tableItems) { var tableArray,_i,item,_len; tableArray = ['<table id = sampleTable ><...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos