angularjs - crear - Directivas angulares: ¿elemento o atributo?
directivas personalizadas angular 5 (4)
Soy parte de un equipo con aproximadamente 6 desarrolladores de UI, de calidad variable y sin experiencia angular. Muchos son contratistas, con poca experiencia con la base de códigos. La aplicación tiene una interfaz de usuario muy complicada. Es compatible con IE8 + (pronto con suerte IE9 +).
Estamos presentando Angular para una extensión importante de la aplicación, y me han pedido que escriba pautas sobre el uso de Angular para el equipo.
Usaremos directivas para crear elementos de interfaz de usuario elegantes, todos con el prefijo "ipwr" para evitar conflictos de nombres. Estoy tratando de decidir si se ordena o no que los desarrolladores den a sus directivas el "elemento" o "atributo" de restricción. Obligar a uno solo, para evitar el caos y la confusión.
Mi pregunta es: ¿qué restricción es mejor o más popular para las directivas, "elemento" o "atributo"? Mi principal preocupación es la facilidad de uso para personas con poca experiencia angular que son nuevos en la base de código de la aplicación, para reducir errores, copiar y pegar el comportamiento, etc.
La guía angular dice que debe usar la restricción de "elemento" siempre que la directiva tenga control total sobre su plantilla, lo que significa que tiene una plantilla que se está procesando, etc.
Para los atributos, sugieren usarlos solo cuando agrega "comportamiento" a un elemento existente o decora un elemento existente.
Por ejemplo, piense en la directiva ng-click, se usa un atributo no como un elemento porque la directiva click solo agrega el comportamiento de clic a algún elemento.
Otro ejemplo sería la directiva ng-repeat, también se utiliza como un atributo no como un elemento porque va a repetir el elemento en el que se está utilizando.
Ahora, esta guía es de la documentación angular; sin embargo, no sé necesariamente que el atributo elemento vs. va a darle un enfoque "mejor", es más una convención.
Ahora, si tiene que admitir navegadores más antiguos, puede considerar usar las directivas de comentarios o de clase.
Mi preferencia personal es simplemente usar la restricción de atributo; principalmente porque las personas que son nuevas en angular se sienten abrumadas al principio cuando ven el límite y las variaciones de las opciones que se pueden usar.
Si quiere mantener su HTML válido, debería usar atributos, por ejemplo, si tiene una directiva ipwr-modal, puede declararla como <div data-ipwr-modal="you-could-put-some-binding-here"></div> .
Sin embargo, al crear directivas con un diseño personalizado, será mejor que use la declaración de elemento (si no necesita tener su HTML válido). Esta es la forma más obvia de decir: "hey, tenemos un componente personalizado aquí".
Algunos puntos a considerar:
La mayoría de los atributos de tiempo es la mejor / la opción más conveniente (no es el valor predeterminado por casualidad).
Cualquier cosa que pueda hacer con las directivas vinculadas a elementos, también puede hacerlo con límite de atributos.
Las directivas vinculadas a elementos pueden ser más descriptivas / legibles a veces.
Si desea que su código pase ciertos tipos de validación, debe usar atributos.
Dado que desea admitir IE8, tenga en cuenta que las etiquetas personalizadas tienen una sobrecarga adicional ( más información ), lo que perjudica la capacidad de mantenimiento.
Por cierto, no puedes limitar las directivas solo a los elementos (sin afectar la funcionalidad), así que es más una cuestión de permitir ''elemento'' o no. Tenga en cuenta que un elemento a menudo tiene más de una directiva y directivas colocadas en el mismo elemento que pueden cooperar y aumentar el comportamiento del otro. Por lo tanto, limitar el uso de directivas a ''elemento'' significa limitar el número de directivas personalizadas por elemento a 1, lo que reduce severamente el potencial de funcionalidad.
Dicho esto, esto es lo que yo (d) haré:
Si IE8 no es un problema, permite ambos (principalmente atributos de uso).
Si IE8 (o la sobrecarga de etiquetas personalizadas) es un problema, use solo atributos.
En general, si solo se permite un formulario, debe ser atributos (funciona en cualquier lugar, sin gastos adicionales, ofrece toda la funcionalidad).
Normalmente me inclino por la guía de estilo John Papa AngularJS cuando tomo este tipo de decisiones. Él dice:
Inclínese hacia la implementación como un elemento cuando es independiente y como un atributo cuando mejora su elemento DOM existente.