Reemplazo de "NO-JS" con la clase "JS" en el elemento del cuerpo correctamente -- javascript camp codereview Relacionados El problema

Replacing “no-js” with “js” class in the body element properly


2
vote

problema

Español

Actualmente tengo un sitio WP y en el encabezado, he puesto esto en:

  ... <body <?php body_class('no-js');?>>     <script>document.body.className = document.body.className.replace( 'no-js' , 'js' );</script> ...   

Funciona perfectamente y no tengo ninguna queja, ya que logra lo siguiente:

  • no se basa en jQuery para cargar, que se coloca en la parte inferior del código después de el elemento del cuerpo junto con otros archivos JS.
  • se ejecuta antes de que los elementos visibles se carguen y no cambien el aspecto del sitio después de El sitio se ha cargado, lo que significa que el usuario ve exactamente lo que se supone que se debe ver.
  • El código se coloca inmediatamente después de que se abre el elemento del cuerpo, por lo que puede encontrar el cuerpo después de que el navegador lea que existe, lo que significa que es rápido, pequeño y fácil de detectar.

Me pregunto si hay una forma más eficiente de hacer esto.

  • Este comentario lo agrega como una función. ¿Por qué una función y no solo dejarlo como lo hice?
  • Aquí es donde estoy donde originalmente obtuve mi código.
  • Aquí hay una comparación de rendimiento que encontré de una respuesta, pero no me ayuda mucho. < / a>

La solución no tiene que ser JS; Puede ser cualquier cosa, siempre que sea la forma derecha . Obviamente, estoy usando las clases para distinguir cuando JS está funcionando o no para que se aplique el estilo CSS correspondiente.

Original en ingles

I currently have a WP site and in the header, I've put this in:

... <body <?php body_class('no-js');?>>     <script>document.body.className = document.body.className.replace( 'no-js' , 'js' );</script> ... 

It works flawlessly and I've got no complaints, as it accomplishes the following:

  • Does not rely on jQuery to load, which is placed at the bottom of the code after the body element along with other js files.
  • Runs before the visible elements are loaded and doesn't change the look of the site after the site has loaded, meaning the user sees exactly what is supposed to be seen.
  • Code is placed immediately after the body element is opened so it can find the body after the browser reads that it exists, meaning it's quick, small, and easy to spot.

I'm wondering if there's a more efficient way of doing this.

  • This comment adds it as a function. Why a function and not just drop it in like I did?
  • Here is where I think I originally got my code from.
  • Here's a performance comparison I found from an SO answer, but it doesn't help me much.

Solution doesn't have to be js; it can be anything, as long as it's the right way. Obviously I'm using the classes to distinguish when js is working or not for the corresponding CSS styling to apply.

  
   
   

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

Es una solución decente y bonita a prueba de balas. Los navegadores modernos también admiten el if(n > 0 && n < 8) { cout << name_day[n-1] << " " << "-----------------------" << " "; } else { cout << "Bad Entry !." << " " << "-----------------------" << " "; } 8 API, para que pueda hacer:

  if(n > 0 && n < 8) {      cout << name_day[n-1] << " " << "-----------------------" << " ";  } else {     cout << "Bad Entry !." << " " << "-----------------------" << " ";  } 9  

Es una solución ligeramente más segura, ya que el original podría reemplazar técnicamente las partes de una palabra (como while(true)0 ). Realmente no es una preocupación aquí, pero aún.

Para evitar eso, y seguir use la solución original, también podría usar una expresión regular para coincidir con los límites de Word:

  while(true)1  
 

It's a decent and pretty bullet-proof solution. Modern browsers also support the classList API, so you can do:

document.body.classList.remove('no-js'); 

It's a slightly safer solution, as the original could technically replace parts of a word (like abcno-jsfoo). Not really a concern here, but still.

To avoid that, and still use the original solution, you could use a regular expression to match word boundaries too:

document.body.className = document.body.className.replace(/\bno-js\b/, ''); 
 
 

Relacionados problema

7  Merge Sort en JavaScript  ( Merge sort in javascript ) 
Implementé este tipo de fusión en JS y noté que para los números de enteros aleatorios es mucho más rápido que la construcción en funciones de tipo de todos l...

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  Convertir un estado de hash a un objeto JavaScript  ( Converting a state from hash into a javascript object ) 
Este código obtiene un estado desde una parte de hash de una cadena de consulta, convierte la parte de hash a un objeto JavaScript y luego intenta obtener un ...

1  Enviando la página web actual a un sitio de marcadores  ( Submitting the current webpage to a bookmarking site ) 
Me gustaría escuchar sus comentarios sobre el siguiente enlace que permite a los usuarios agregar un enlace a un sitio web. Leí que join()5 es sugerido en...

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...

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...

7  Elementos de anidación con apendchild  ( Nesting elements with appendchild ) 
Quiero hacer un navegación que se vea así: <nav class="socialmediaicons"> <ul> <li> <a> <img> </a> </li> </ul> </nav> ...

2  IMACROS BOT para realizar refrescos  ( Imacros bot for performing refreshes ) 
Estoy tratando de simplificar este código. Parece que todo funciona como debería; Sin embargo, cuando en el bucle de actualización de Imacro, parece un poco i...

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...

10  "Stardust" Simulador 2D Gravity - Seguimiento 1: Los planetas  ( Stardust 2d gravity simulator follow up 1 the planets ) 
Este es un seguimiento para el juego de gravedad del simulador 2D pregunta. Desde entonces, he desarrollado mis habilidades de JavaScript, y ahora esto...




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