¿Cómo puedo convencer a mi jefe (y otros desarrolladores) para que use / considere JavaScript discreto?

Soy bastante nuevo en nuestro equipo de desarrolladores.

Necesito algunos argumentos sólidos y / o ejemplos de "trampas", por lo que mi jefe finalmente comprenderá las ventajas de JavaScript discreto, para que él y el resto del equipo dejen de hacer cosas como esta:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

y

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

Sugerí usar un patrón bastante común:

<button id="ajaxer" type="button">click me...</button>

y

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

La razón por la cual mi jefe (y otros) no quieren usar este enfoque es que la Inspección de eventos en FireBug (o Chrome Dev Tools) ya no es simple, por ejemplo, con

<input type="text" name="somename" id="someid" onchange="performChange()">

puede ver inmediatamente qué función se ejecuta en el evento de cambio y saltar directamente a él en un enorme archivo JS lleno de código de espagueti .

En el caso de JavaScript discreto, lo único que vería es:

<input type="text" name="somename" id="someid" />

y no tiene idea de si algunos eventos, si los hubo, estaban vinculados a este elemento y qué función se activará.

Estaba buscando una solución y la encontré:

$(document).data('events') // or .. $(document).data('events').click

pero, este "enfoque" hizo que tomara "demasiado tiempo ..." descubrir qué función se activa en cada evento, por lo que me dijeron que detuviera eventos de enlace como ese.

Le pido algunos ejemplos o ventajas importantes o cualquier otro tipo de sugerencias para "Por qué deberíamos usar UJS"

ACTUALIZACIÓN: la sugerencia de "cambiar el trabajo" no es una solución ideal.

ACTUALIZACIÓN 2: Ok, no solo he sugerido usar el enlace de eventos jQuery, también lo hice . Después de escribir toda la Delegación de eventos, el Jefe se me acercó y me preguntó, ¿por qué estoy haciendo la delegación de eventos con un enfoque diferente y un enfoque que él no sabe?

Mencioné algunos beneficios obvios, como: hay 15 campos de entrada y todos tienen un onchangeevento (no solo, algunos también lo tienen onkeyup). Por lo tanto, es más pragmático escribir este tipo de delegación de eventos para TODOS los campos de entrada, en lugar de hacerlo 15 veces, especialmente si todo el HTML se representará con el eco de PHP ->echo '... <input type="text" id="someid" ... />...'

1. Deje de usar palabras de moda y trate de hacer argumentos fuertes en su lugar. Incluso la página de Wikipedia para JavaScript discreto dice que el término no está formalmente definido. Puede ser un término general para varias buenas ideas, pero si suena como una moda o moda, su jefe y compañeros de trabajo no prestarán mucha atención. Peor aún, si sigues hablando de algo que ven como inútil, pueden comenzar a descartar ideas completamente no relacionadas que defiendes.

2. Descubre por qué crees que las ideas discretas de JavaScript son importantes. ¿Es porque leíste que se consideran las mejores prácticas? ¿Te has encontrado con problemas que puedes atribuir a no seguir estas ideas? ¿Cuánto afectará la adopción de estas ideas en los resultados de la empresa?

3. Métete en la cabeza de tu jefe. ¿Por qué hace las cosas como lo hace y por qué ha rechazado tus cambios? Probablemente no sea estúpido, y probablemente tenga más experiencia que usted, por lo que probablemente tenga buenas razones para hacer las cosas a su manera. Ya te has referido a algunos de ellos: sigue ese hilo hasta el final. Luego, averigüe si sus sugerencias mejorarán las cosas que más le preocupan y cómo.

4. Sugerencia 1: a los gerentes les gusta el dinero. Cuanto más directamente pueda vincular sus sugerencias a mayores ingresos o menores gastos, más impacto tendrá su argumento. Pista 2: El tiempo es dinero. Sugerencia 3: por sí solo, el atractivo estético del código no genera dinero. Lo contrario, de hecho: lleva tiempo hacer que el código se vea bien. El código feo que funciona bien está bien con la mayoría de los gerentes.

5. No solo hables de eso, hazlo . Si tiene la suerte de tener un proyecto pequeño y autónomo, pregúntele a su gerente si puede hacerlo utilizando el estilo "UJS" como una especie de demostración. Cuando esté listo, realice una revisión del código donde puede explicar cómo funciona todo y por qué cree que es mejor que el estilo actual.

6. El idealismo es genial, pero no dejes que se interponga. Es más importante ser visto como alguien que hace las cosas que como un diletante que se queja del estilo de codificación grosero. Esto es especialmente cierto si eres el chico nuevo. Si no puede obtener tracción con UJS ahora, haga un buen trabajo en su lugar y construya lentamente un caso para los cambios que le gustaría hacer a medida que gana credibilidad.

7. Interruptor de lectura : cómo cambiar las cosas cuando el cambio es difícil . Le dará muchas más buenas ideas sobre cómo construir su caso de manera efectiva.

Lo que puede hacer es darles una demostración de la depuración de un html de USJ utilizando las herramientas FireQuery y Chrome Query .

FireQuery es una extensión de Firebug y hace un trabajo bastante bueno. En cuanto a Chrome Query, no puedo garantizar cuánto es bueno, pero definitivamente algunos de los desarrolladores lo usan ( una publicación en stackoverflow ).

También sepa que la .datafunción se elimina para devolver los datos de eventos internos desde jQuery 1.8.0 , y se reemplaza con los $._data(element, "events")que pueden ser inestables, según el registro de cambios oficial

Esto ahora se elimina en 1.8, pero aún puede acceder a los datos de eventos para fines de depuración a través de $ ._ data (elemento, "eventos"). Tenga en cuenta que esta no es una interfaz pública compatible; Las estructuras de datos reales pueden cambiar incompatiblemente de una versión a otra.

ACTUALIZACIÓN:
cuando comencé a trabajar tenía el mismo dilema. Pero tras la creación de una demostración con GUI completamente funcional (aplicación de una sola página) que incluía pestañas de apertura dinámica (también se puede cerrar), menú de acordeón (creado dinámicamente a partir de db), finalmente entendieron que es mejor usar USJ todo el camino.

Además, el uso adicional de USJ es que puede minificar toda su aplicación en un script pequeño (ilegible). También muéstreles los scripts para google.com / github.com (como un ejemplo), y señale que incluso ellos tienen el código comprimido, lo que siempre es mejor, ya que el espectador del sitio tendrá dificultades para descifrar las fallas de seguridad y utilícelos para comenzar un ataque completo en su sitio (asustarlos), aunque sea poco probable.

ACTUALIZACIÓN 2 : Por
cierto, no sabía que estaba haciendo USJ hasta que vi esta pregunta, así que gracias de alguna manera.

Los controladores de eventos en línea apestan porque:

• Sin delegación de eventos, lo cual es excelente cuando desea poder extraer elementos dentro y fuera de una página dinámicamente sin tener que volver a vincular.

• Ha vinculado el comportamiento a las etiquetas HTML en lugar de los atributos de clase / ID de las etiquetas HTML. Supongamos que tiene una clase de "combo_box" en toda su aplicación. De repente, en la mitad de sus páginas anteriores, desea una ligera variación en sus cuadros combinados cuando están en un contenedor diferente. Vinculado a una clase, puede alterar ese comportamiento según el contexto del contenedor, por ejemplo "#special_container .combo_box". Encuadernado dentro del maldito HTML, podría encontrarse rastreando cada pequeño cuadro de selección con una clase .combo_box en cualquier página de números para cambiar esas referencias de controlador una por una en lugar de ajustar o escribir un par de nuevas líneas de código para filtrar desde una sola ubicación de archivo .

• Si desea múltiples manejadores, debe envolverlos en una función y luego vincularlos innecesariamente a archivos HTML específicos. ¿Qué tan fácil de mantener es eso?

• Un punto más sutil es que es mucho más fácil / más fácil de mantener / flexible y robusto manejar el comportamiento con más mentalidad de panel de control. Al vincular desde una ubicación central, tiene un lugar donde puede obtener una visión general de todos los comportamientos que suceden en la página al mismo tiempo, lo cual es útil cuando, por ejemplo, necesita descubrir por qué ciertas páginas se ejecutan ocasionalmente en cierto error que es difícil de entender pero no en otros.

• Este es el lado del cliente. Tenemos varios navegadores que interpretan una gran complejidad en sus propias formas de dar cuenta. Escóndelo todo junto y deja que el IDE lo resuelva para ti. Las mentalidades no funcionan bien aquí. Mantener su código estricto, mínimo, poco acoplado y limpio no está de moda, es absolutamente esencial para establecer un front-end que sea fácil de modificar y actualizar y sí, ahí es donde entran los $$$, suponiendo que su gerente realmente tenga previsión .

• ¡Ya no lo es! @ # $ Ing 2002. Este argumento es tan antiguo como las tablas como el diseño. Supéralo y comienza a confiar en un desarrollador experimentado especializado en el lado del cliente que tú mismo contrataste expresamente porque carecías de su experiencia (no es que esté canalizando ningún enojo por experiencia personal ni nada).

Y para rebatir el argumento de su jefe, en realidad no es tan difícil rastrear qué clase o ID se está utilizando en la delegación de eventos o el enlace del controlador con CTRL + F y una herramienta que le permite ver todos los JS en la página como mi propia vergüenza personal. / versión de bookmarklet de solo prototipo improvisé rápidamente cuando la barra de herramientas de desarrollo web comenzó a fallarme (maldita codificación de colores). Marque desde el enlace en la página js fiddle o copie el JS y haga el suyo.

Un enlace de violín JS que presumiblemente caducará eventualmente

Una ventaja importante de su técnica sugerida es que solo tiene que vincular una vez el controlador de eventos a un padre como "documento" y este controlador podrá capturar los eventos provenientes de todos los niños que satisfacen el selector dado como "button.anyclass ". Ahorra memoria y se puede mantener de forma tal que solo necesita una instancia de edición y afecta a todos los elementos.

Con respecto a no poder reconocer de inmediato la función enlazada, su equipo podría estandarizar una forma de declarar tales funciones probablemente en la parte inferior de la página. Para que todos sepan dónde mirar, la convención de nomenclatura también es muy importante. Los comentarios serían muy beneficiosos, pero asegúrese de que el servidor lo elimine antes de servirlo como respuesta al navegador.

Además, si desea proporcionar ofuscación y minificación de javascript por motivos de seguridad, su técnica lo haría posible, a diferencia del estilo antiguo que su equipo todavía está utilizando.

La respuesta obvia es que solo puede vincular una función a su botón con el atributo onclick, mientras que el evento JQuery le permite vincular múltiples funciones. Un problema común con el evento de carga: si su documento está compuesto por más de un archivo, a menudo ocurren colisiones.

Otra solución que podría satisfacer tanto a usted como a su jefe es el uso de enlace de datos, con una biblioteca como Knockout o Angular, que mantendría un registro de las modificaciones en su vista y eliminaría la necesidad de una gran parte de los controladores de eventos.