Cómo mejorar la eficiencia del desarrollo de los ingenieros de front-end, todo está aquí

El ingeniero front-end es en realidad un puesto muy complicado. Además de ser responsable de cortar imágenes y escribir HTML/css/js, también tiene que resolver una serie de compatibilidad del navegador, optimización del rendimiento de la página web y. Otros temas, por lo que es imperativo mejorar la eficiencia del desarrollo de los ingenieros de front-end y también es una manifestación de la ingeniería de front-end.

Mi comprensión personal de la eficiencia del desarrollo es

Eficiencia del desarrollo = la eficiencia de agregar código, la eficiencia de modificar el código y la eficiencia de mantener el código

Entonces cómo mejorar el desarrollo front-end La eficiencia se puede dividir según el concepto de ingeniería front-end. A continuación, presentaré 7 métodos para mejorar la eficiencia del desarrollo front-end.

1. Cortar

Cortar es la habilidad más básica en el front-end. Generalmente, podemos usar Photoshop o FireWorks para terminar básicamente los dibujos de diseño que nos entregan los diseñadores. necesita mejorar Si desea cortar imágenes de manera eficiente, debe usar algunos trucos, como usar acciones en PS para realizar la función de "corte de imágenes con un clic", además del corte de imágenes, también se introducen otros métodos y herramientas prácticos. aquí.

2. Codificación

Para la parte de codificación, primero debemos encontrar una herramienta IDE que se adapte a nosotros. Se recomienda no utilizar Notepad o Dreamweaver. Estas herramientas ya no están disponibles. Con la tendencia front-end y no se puede utilizar, escriba el código con elegancia. Aquí recomiendo principalmente Sublime Text, Atom o Webstrom, porque además de sus interfaces fáciles de usar y soporte para la mayoría del resaltado de sintaxis, también puedes instalar varios complementos para expandir tus herramientas IDE. Presentaré principalmente algunos de ellos a continuación. Complemento Sublime Text para mejorar la eficiencia del desarrollo:

El elemento se utiliza para escribir HTML/CSS rápidamente. Por ejemplo, ingrese ulgt; luego presione la tecla tab para generar una etiqueta ul que contenga un li. tag

JSFormat se usa para formatear JS; CSScomb se usa para ordenar atributos de estilo con un clic; HTML-CSS-JS Prettify puede estandarizar nuestro formato HTML/CSS/JS e incluso JSON con un solo clic; crear rápidamente un nuevo archivo HTML/CSS/JS. ColorPicker se utiliza para llamar a la función de paleta local. Estas herramientas son muy prácticas y pueden mejorar nuestra eficiencia de codificación hasta cierto punto.

3. Automatización

Hablando de mejorar la eficiencia del desarrollo, tenemos que mencionar algunas herramientas de automatización front-end. Después de todo, la automatización front-end es la tendencia actual y futura. Reducir en gran medida la carga de trabajo del front-end. La carga de trabajo innecesaria nos permite centrarnos en el front-end en sí.

Aquí podemos usar NPM para administrar los archivos de paquetes de nuestro proyecto; usar webpack para empaquetar y comprimir nuestro código; usar Node.js para construir servidores locales; usar Karma y Jasmine para probar nuestro código front-end.

Usar bien las herramientas de automatización front-end puede ayudarnos a lidiar con muchas cosas triviales, como la compresión de código e imágenes con un solo clic, la combinación de JS con un solo clic, la detección de actualizaciones de archivos, etc.

4. Modularización

Con el advenimiento de la era web 2.0, la tecnología Ajax se ha utilizado ampliamente, el código front-end se está expandiendo cada vez más y la modularización front-end puede facilitar nuestro mantenimiento. del código del proyecto., la carga bajo demanda también será de gran beneficio para nosotros a la hora de mejorar la eficiencia del desarrollo del proyecto a largo plazo.

Antes de que saliera ES6, cabe decir que el código front-end en sí no tenía la función de implementar módulos. Tuvimos que utilizar algunos cargadores modulares para implementarlo, como RequireJS, SeaJs, etc. . Con la popularidad de ES6, herramientas como RequireJS y SeaJs ya no son necesarias. Por lo tanto, en un entorno de desarrollo basado en ES6, recomiendo utilizar la función modular de ES6 para implementar nuestra modularidad front-end.

5. Componentización

El concepto de componente front-end existe desde hace mucho tiempo. Podemos lograr funciones comunes dividiendo nuestro código en diferentes componentes para la misma función. Podemos No es necesario que vuelva a escribir el mismo código y, al mismo tiempo, mejora la capacidad de mantenimiento y la claridad de su código front-end. El siguiente es un diagrama conceptual del componente de archivo único del actualmente popular marco front-end Vue:

Podemos extraer componentes comunes y dividir componentes grandes en componentes pequeños para lograr la componenteización del front-end. componentes Puede haber una relación padre-hijo o una relación fraternal. En el componente de archivo único de Vue, un componente contiene sus fragmentos de código HTML, CSS y JS.

6. Separación de front-end y back-end

Los proyectos que separan front-end y front-end son muy útiles para mejorar la eficiencia del desarrollo de front-end, porque el front-end Ya no es necesario configurar el enrutamiento, crear un entorno de servidor, escribir plantillas, etc. en segundo plano. De esta manera, la productividad del front-end se liberará en gran medida, pero los proyectos que separan el front-end y el back-end. tienen ventajas y desventajas, como se muestra en la siguiente figura:

Al final, debemos sopesar los pros y los contras de acuerdo con las necesidades del proyecto para decidir si usar el front-end y el back-end. Modo de extremo separado.

7. Normas y patrones

La colaboración en equipo es inseparable de la ayuda de los estándares de codificación y los patrones de desarrollo. Seguir los documentos de estándares de codificación puede ayudarnos a mejorar la eficiencia del desarrollo colaborativo durante el desarrollo del equipo. Un equipo que sigue un conjunto de estándares de codificación permite que todos escriban su propio código con su propio estilo, lo que hace que sea muy eficiente para los equipos revisar, probar y mejorar funciones entre sí. A continuación se muestran algunos documentos de especificación de codificación de front-end de código abierto:

Enlace a página web

Página de inicio-TGuide

Enlace a página web

Web enlace de página

Además de los estándares de codificación, a menudo seguimos algunos patrones existentes para resolver problemas durante el desarrollo. Por ejemplo, cuando escribimos cuadros emergentes en JS, a menudo usamos el patrón singleton y cuando escribimos animaciones. en CSS, aplicamos directamente animaciones. Atributos comunes, etc., ya no necesitamos pensar en la implementación de una determinada función desde cero. Este es el significado de patrones.

Conclusión

Por supuesto, además de los 7 puntos anteriores, todavía hay muchas áreas donde es necesario mejorar la eficiencia del desarrollo para el front-end, y todavía queda un largo camino. ir. Solo organizando las operaciones iniciales desordenadas y complicadas y utilizando herramientas para simplificar y estandarizar el proceso inicial podemos lograr la integración de la construcción, el desarrollo y el mantenimiento del proyecto. Espero que este artículo pueda inspirar a los estudiantes que son nuevos en el front-end y ponerlo en práctica.