Cómo escribir la experiencia del proyecto en un currículum de ingeniero front-end
Hay muchos ingenieros front-end que se preocupan a la hora de redactar currículums. Cómo escribir y describir los elementos de su currículum. Siento que aunque llevo varios años trabajando y he hecho muchos proyectos, siento que nunca he hecho nada de alto nivel, así que naturalmente siento que no hay nada que escribir. O tal vez siento que todo lo que hago es igual, y lo mismo sigue siendo igual una y otra vez.
¡Aquí muestro mi vergüenza y aporto algunos pequeños ejemplos de cómo escribir experiencias de proyectos!
1. El primer proyecto de estilo: Descripción del trabajo de animación front-end de Tencent Butler: este proyecto restaura una animación de trama flash completa en una animación front-end implementada por JS + CSS3.
Enlace: https://dxb123456.github.io/tengxun/
Tecnología de implementación: CSS+HTML+JS+H5+CSS3+jqury;
Dificultades del proyecto:
1. Borrar el temporizador
Algunos efectos de animación deben ser generados automáticamente por js. El control de tiempo utiliza timeout e internaltal, donde timerout incluye internaltal, eventos de clic y temporización. El temporizador no está en el mismo archivo js. Al hacer clic hacia adelante y hacia atrás rápidamente, el borrado del temporizador no funciona.
Solución: vincule todos los temporizadores de la página correspondiente a li a li y borre el tiempo de espera y el valor interno cada vez que se haga clic en él.
2. Procesamiento de movimiento de polilínea de sombra
Para la p inclinada, cambie su altura a través de js y cambie los valores superior e izquierdo de acuerdo con la lógica matemática, la p lo hará. aparecen cuando se mueve desplazamiento y fluctuación.
Solución: asigne a p un punto de referencia de movimiento, de modo que p no necesite cambiar los valores superior e izquierdo al moverse, solo sea necesario cambiar el ancho o el alto.
3. Movimiento parabólico
El movimiento de dos puntos en CSS es un movimiento lineal.
Solución: Dale al punto inicial un ángulo de rotación para que parezca una parábola.
4. Procesamiento de la capa de máscara
En la representación HTML de varios niveles, no se puede lograr el efecto de máscara de la capa intermedia.
Solución: La capa de máscara se puede usar en la capa inferior, pero el efecto de máscara en el nivel medio requiere procesar la imagen, cambiarla a una imagen png y luego realizar operaciones CSS.
5. Procesamiento de tartamudeo
En Firefox e IE, el efecto de movimiento lento de los iconos pequeños se bloqueará.
Solución: Al dar tiempo de ejercicio, determine si no es un navegador Chrome y reduzca el tiempo de ejercicio.
6. Optimización del rendimiento
El uso de imágenes ralentiza la carga de animaciones, afectando a la experiencia del usuario.
Solución: utilice p para generar algunas imágenes que puedan ser reemplazadas por p, y comprima y cargue profundamente códigos e imágenes. 2. El segundo estilo de proyecto Proyecto 1: Yishang Descripción del proyecto: este proyecto es una aplicación móvil, creada utilizando el marco vue, que involucra el módulo deslizante táctil swiper y se utiliza tecnología de carga diferida entre las subpáginas deslizantes para garantizar la experiencia del usuario. iscroll pull-up carga el módulo de actualización desplegable, el módulo de carrito de compras y el módulo de registro de inicio de sesión, todos utilizan tecnología de almacenamiento local.
Responsabilidades laborales: principalmente responsable del diseño de la página y la representación de datos, y de cooperar con la aplicación para completar el anidamiento de la página.
Arquitectura del proyecto:
1. Utilice vue framework y vue-router para crear una aplicación de una sola página.
2. El proyecto usa vuex para manejar la comunicación entre componentes, vue-resource para manejar solicitudes, usa algunas funciones en la biblioteca de componentes mint-ui para un desarrollo rápido y usa vue-cli para construir rápidamente un desarrollo. ambiente.
3. Adopte la solución de adaptación móvil de Taobao.
4. Utilice la biblioteca de iconos vectoriales de Alibaba.
Requisitos técnicos:
Utilice etiquetas semánticas HTML5 + nuevas funciones CSS3 para el diseño de la página para lograr efectos dinámicos en la página, mejorar la claridad y la calidad del código y hacer que la página sea más completa. el código es más robusto.
Desarrollado utilizando vue.js, adoptando el modelo de desarrollo de separación front-end y back-end.
Utilice las instrucciones y servicios en vue.js para conectarse con la interfaz de backend, realizar interacción de datos, realizar representación de páginas y realizar el juicio de módulos funcionales.
Utilice JavaScript para implementar el procesamiento lógico de determinadas funciones y efectos dinámicos de determinadas páginas.
En la fase de prueba del proyecto, puede utilizar el nodo para conectarse a la base de datos para el acoplamiento de la interfaz y la simulación de representación de datos para probar si los módulos funcionales están completos y si el procesamiento lógico es correcto.
Utiliza el marco Swiper para diseñar algunas páginas.
Utilice sass para escribir código y utilice gulp para organizar y comprimir el código. Proyecto 2: Descripción del proyecto diario para ahorrar dinero: Este proyecto es una aplicación móvil para un sitio web de recomendación de productos promocionales. Es una aplicación de una sola página creada con vue+webpack. El proyecto utiliza la sintaxis vuex, vue-route, vue-resource y ES6. y adopta la componenteización. Todo el proyecto se construye con ideas, por lo que los componentes son altamente reutilizables y el código es muy conciso.
Responsabilidades laborales: Principalmente responsable del diseño y la representación de datos de la página del proyecto, completar el acoplamiento de la interfaz con el back-end, cooperar con el acoplamiento del back-end y la depuración conjunta, y resolver el problema de la confusión. diseños de página en diferentes navegadores o diferentes teléfonos móviles.
Arquitectura del proyecto:
1. Utilice vue framework y vue-router para crear una aplicación de una sola página.
2. Utilice vue+webpack para crear el entorno del proyecto.
3. Adopte la solución de adaptación móvil de Taobao.
4. Utilice la biblioteca de iconos vectoriales de Alibaba.
Requisitos técnicos:
1. El proyecto utiliza nodo (express framework) + mysql para construir el servidor backend
2. Construya el proyecto y configúrelo; basado en webpack Complementos de terceros
3. Utilice el marco vue, vue-router para crear enrutamiento de proyectos y vuex para realizar la separación de componentes y datos de un solo archivo
4. Utilice Swiper para implementar el cambio de carrusel del banner de la página de inicio, iscoll combinado con ajax para implementar la carga desplegable y la actualización desplegable
5. Utilice correctamente las funciones de enlace para realizar el seguimiento de datos y la representación de páginas y creación de instancias de nodos de página.