¿Se considera una mala práctica ejecutar JavaScript diferente para IE

8

¿Se considera una mala práctica (y qué tan mala) ejecutar JavaScript diferente para IE? Actualmente estoy escribiendo JavaScript y la forma más simple de trabajar con las peculiaridades de IE parece ser verificar la versión del navegador y ejecutar un código diferente

var browserName = navigator.appName;

if (browserName == "Microsoft Internet Explorer") {
  //Do some stuff
}
else
{
//Do other stuff
}

Es rápido y funciona bien, pero conduce a la duplicación de código y se siente "hacky".

Tom Squires
fuente
18
Se podría decir que es una mala práctica para Microsoft escribir un navegador donde sea necesario Javascript
maple_shaft
3
@keppla Las preguntas sobre mejores prácticas son más adecuadas para los programadores
Tom Squires
2
No solo no es una mala práctica, es absolutamente esencial. Solo mira lo que JQuery tiene que pasar.
GrandmasterB
2
@keppla, en realidad no. No está preguntando cómo hacerlo, sino si es una buena práctica o no.
ChrisF
8
La práctica realmente mala en la pregunta es cómo está probando qué hacer, cómo usar la detección de capacidad, no la detección del navegador , la forma en que lo está haciendo o se producirán muchas fallas y dolor.

Respuestas:

17

si

Inferir la funcionalidad de una cadena de agente de usuario es una prueba débil y propensa a errores. Aunque es relativamente común, hoy en día diría que ciertamente se considera una mala práctica.

Por ejemplo, jquery tiene una función para detectar qué navegador está utilizando un usuario y ha quedado en desuso desde la versión 1.3

Por lo tanto: no hagas el rastreo de UserAgent para decidir qué es el navegador o de qué es capaz.

Mejores prácticas

La mejor práctica aceptada para manejar las diferencias entre las capacidades del navegador es usar la detección de características .

Hay algunas bibliotecas para esto, la más conocida es probablemente: Modernizr . Modernizr facilita adaptar su javascript a las capacidades de un navegador. Funciona detectando lo que está disponible; no adivina en función de una cadena de UserAgent (excepto como último recurso alternativo) y simplemente agrega clases a la etiqueta html. Esto hace que no solo sea posible manejar fácilmente diferentes casos en su js, sino también abordar ciertas deficiencias con css solo. por ejemplo (solo para ilustración):

ul.menu {
    display:none;
}
ul.menu:hover {
    display:block;
}

# A touch device can have no hover - so show it always
html.notouch ul.menu {
    display: block;
}
AD7six
fuente
3

Está bien cuando es JS válido y no hay abstracciones

No es exactamente una mala práctica, aunque mejoró, los navegadores no son 100% idénticos.

Pero, antes de comenzar casos especiales, observe cuidadosamente si son casos realmente especiales y no solo las idiosincrasias de otro navegador. En este caso, debe buscar una solución utilizando los estándares que comparten todos los navegadores ( caniuse.com es de gran ayuda para eso).

Cuando esté seguro de que en realidad es específico del navegador, debería mirar si puede usar una biblioteca que oculte este detalle. La compatibilidad cruzada del navegador es algo difícil de hacer, así que si alguien lo hizo por usted, solo obtenga ganancias.

Como último recurso, haz lo que tengas que hacer;)

keppla
fuente
2
+1 para bibliotecas. jQuery, Dojo, Prototype, Ext.js son solo algunos ejemplos.
Pap
Si. Era reacio a agregar recomendaciones, porque hasta ahora solo usaba prototype y jquery, por lo que soy muy parcial.
keppla
2
NO está bien verificar el nombre del navegador y luego ejecutar un código diferente. Deje en claro que hay una diferencia entre el rastreo del navegador y el rastreo de funciones
Raynos
Raynos, tienes razón. afortunadamente, la mejor respuesta es la aceptada :)
keppla
2

Si por "hacer algunas cosas" te refieres a "usar la instalación específica de IE x" y por "hacer algunas otras cosas" te refieres a "usar la instalación más común y", entonces es mejor verificar la presencia de x o y.

Supongo que actualmente no estás utilizando ninguna biblioteca externa de Javascript. En ese caso, comprobaría si jQuery es compatible con la tarea que está tratando de realizar. Si lo hace, lo usaría.

Kevin Cline
fuente
1

Use los comentarios específicos de IE <!--[if IE &gt; 6]>...o algo así. Funciona en todos los navegadores súper basura IE? -> IE8, pero no en IE9 +, lo que se considera bastante correcto como navegador.

En pocas palabras, una vez que se trata de un navegador súper horrible que necesita soluciones, está bien hacer lo que sea necesario, pero evitando convertir el código de línea bien escrito en un hackatron.

Con suerte, IE desaparecerá algún día, y podrá eliminar el código de hackatron y dejar solo la línea de base bien escrita.

Descifrador
fuente
-1

Creo que es mejor diferir este tipo de toma de decisiones al diseñador del marco, y usar un marco de JavaScript que encapsule este tipo de complejidad. Hoy en día tenemos AngularJS, JQuery, ReactJS, y así sucesivamente, hacer las cosas sin un marco de trabajo te daría este tipo de dificultades.

YudhiWidyatama
fuente
Tu respuesta no responde nada.
Andy
-2

Bueno, suponiendo que realmente esté interesado en aprender JavaScript, la mejor práctica es esta: prefiera las pruebas por ausencia / existencia de métodos y escriba funciones de normalización. Por lo tanto, un ejemplo totalmente lamentable pero cumple tres principios:

if(!document.getElementsByClassName){
    document.getByClass = function(){ //look at all elements, check for class etc...
}
else { document.getByClass = document.getElementsByClassName }
  1. No huela el navegador.
  2. También podría eliminar un poco de la migaja DOM a medida que avanza. El propósito de DOM API es ser explícito, no ser fácil en su túnel carpiano si no ha notado cuán extrañamente flexible es JS. El factor que apenas elimina es lo que hace que el ejemplo sea poco convincente.
  3. Caché a una nueva función. No haga la prueba del método cada vez que se llame.

La ventaja es que nunca puede confiar al 100% en el rastreo del navegador y nunca se sabe cuándo alguna otra biblioteca a la que se vinculó en realidad no agregó un método equivalente para usted.

Ya sea que solo estés tratando de hacer cosas o quieras aprender más, te recomiendo JQuery. Hace un trabajo explosivo de eliminar DOM API cruft y mantener un alto nivel de normalización multiplataforma, pero también es algo que puedes aprender bastante estudiando bajo el capó. Más importante aún, si te molestas en continuar aprendiendo realmente JS central, no se vuelve inútil como tantos otros frameworks y bibliotecas de JS y continuarás beneficiándote de poder eliminar la sopa JQuery con tu loco OOP-ish habilidades.

Además, visite quirksmode.org para comprender por qué Microsoft debe ser despreciado por todos los IE anteriores al 9 en el frente de JS y muchos detalles importantes sobre exactamente cuánto está mal con su API DOM patentada y sugerencias para solucionarlo.

Erik Reppen
fuente
1
Estoy un poco confundido, ¿hubieras preferido si no hubiera eliminado ese desagradable comentario de trolling? La próxima vez que tenga un problema con un comentario como ese, márquelo, en lugar de morder el anzuelo. Esta es una buena respuesta, pero está perdiendo valor debido a su crudeza (lo mismo con algunas de sus otras respuestas). Simplemente marque la basura y mantenga sus respuestas profesionales, es tan fácil como eso.
Yannis
Si en realidad Me molesta, (probablemente merecidamente), y mi comentario se queda. ¿Por qué no debería permanecer también el comentario irritante del origen? Es solo internet. La gente necesita pelear más cuando no hay armas involucradas.
Erik Reppen
1
Si quiere pelear, llévelo a otro lado, Programmers es una plataforma de preguntas y respuestas, una que intentamos mantener con poco ruido.
Yannis