Cómo los ingenieros de front-end mejoran la eficiencia del desarrollo
(1) Cortar el mapa
Dibujar es la habilidad más básica del front-end. Generalmente, básicamente podemos obtener los dibujos de diseño entregados por el diseñador a través de Photoshop o FireWorks, pero si queremos mejorar la eficiencia del boceto, tenemos que usar algunos trucos, como usar acciones en PS para realizar el "boceto con un solo clic". " función. Para obtener más detalles, consulte mi artículo:/P /p/b7690cc8893f, que presenta otros métodos y herramientas prácticos además de dibujar.
(2) Escribir html/css/js
Para la parte de escritura de código, primero debe encontrar una herramienta IDE que se adapte a sus necesidades. Se recomienda no utilizar notepad++ o dreamweaver. Estas herramientas ya no se ajustan a la tendencia del front-end, por lo que no podemos escribir código con elegancia. Aquí recomiendo principalmente sublime text, atom o webstrom, porque además de su interfaz fácil de usar y su soporte destacado para la mayoría de las sintaxis, también pueden instalar varios complementos para ampliar sus herramientas IDE. Aquí, presento principalmente varios complementos de texto sublimes que mejoran la eficiencia del desarrollo:
Entre ellos, Element se usa para escribir HTML rápidamente, como ingresar ul > después de li, presionar la tecla tab para generar ul; que contiene la etiqueta li. Los documentos oficiales son: B se utiliza para ordenar atributos de estilo con un clic; HTML-CSS-JS pretify puede estandarizar nuestros formatos HTML/CSS/JS e incluso JSON con un clic; SublimeTmpl puede crear rápidamente nuevos archivos 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 front-end
Cuando se trata de mejorar la eficiencia del desarrollo, tenemos que mencionar algunas herramientas de automatización front-end. Después de todo, la automatización del front-end es la tendencia actual y futura, que puede reducir en gran medida la carga de trabajo innecesaria en el front-end, permitiéndonos 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.
Hacer un buen uso de las herramientas de automatización front-end puede ayudarnos a manejar muchas cosas triviales, como comprimir código e imágenes con un clic, fusionar JS con un clic, detectar actualizaciones de archivos, etc.
Modularización del front-end
La implementación de la modularización del front-end puede facilitar el mantenimiento del código de nuestro proyecto y permitir la carga bajo demanda. A la larga, será de gran ayuda para nosotros. para mejorar la eficiencia del desarrollo del proyecto.
Antes de que saliera ES6, hay que decir que el código front-end en sí no tenía la función de implementar módulos, y tenía que implementarse con la ayuda de algunas bibliotecas de complementos, como require.js, sea.js, etc. Con la popularidad de ES6, herramientas como require.js y sea.js 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.
(E) Componentes front-end
El concepto de componenteización front-end existe desde hace mucho tiempo. Podemos dividir nuestro código en diferentes componentes para lograr la universalidad y facilitar el mantenimiento, lo que también puede mejorar nuestra eficiencia de desarrollo. El siguiente es un diagrama conceptual de un componente de archivo único del popular marco de front-end Vue:
Por supuesto, además de los cinco puntos anteriores, todavía hay muchos lugares para mejorar la eficiencia del desarrollo del front-end. final y queda un largo camino por recorrer. Espero que los puntos anteriores puedan inspirar a los estudiantes que acaban de conocer el front-end y puedan practicarlo ellos mismos.