¿Qué conocimientos se necesitan para el desarrollo web front-end?

Habilidades básicas que se deben dominar:

HTML4, sintaxis HTML5, etiquetas, semántica

CSS2.1, especificaciones CSS3, combinadas con HTML para lograr varios diseños. , efecto

El núcleo del lenguaje de javascript definido por Ecma-262, javascript de cliente nativo, operaciones DOM, nuevas características de HTML5

Una biblioteca de javascript de cliente maduro, se recomienda jquery

Un lenguaje del lado del servidor: si tiene experiencia en desarrollo del lado del servidor, puede usar el lenguaje que ya conoce. Si no tiene experiencia en el desarrollo del lado del servidor, puede elegir Servlet si está familiarizado con Java. Si no está familiarizado con él, puede elegir PHP, que puede lograr un inicio de sesión simple. La función de registro es suficiente para admitir el desarrollo front-end. Es posible que deba continuar aprendiendo en el futuro. simulación de funciones.

HTTP

Después de dominar las habilidades básicas anteriores, encontrará problemas en el trabajo. También podrá aprender las técnicas necesarias rápidamente.

Herramientas de desarrollo básicas

Las herramientas adecuadas pueden mejorar eficazmente la eficiencia del aprendizaje, centrarse en el conocimiento en sí y localizar y resolver rápidamente problemas cuando surgen.

, lo siguiente Estas son las herramientas de desarrollo front-end que personalmente considero necesarias:

Editor de texto: se recomienda Sublime Text, admite varios complementos, temas y configuraciones, y es fácil de usar

Navegador: se recomienda Google Chrome, se actualiza rápidamente y proporciona muy buen soporte para varios estándares de interfaz de usuario

Herramientas de depuración: recomendamos las herramientas de desarrollo de Chrome que vienen con Chrome. Puede ver fácilmente la estructura DOM. y estilo, y generar información de depuración a través de la consola. Depurar javascript, verificar la red, etc.

Herramientas auxiliares: PhotoShop para editar imágenes, elegir colores, medir tamaños con Fireworks, comparar tamaños con AlloyDesigner y el. Herramientas de desarrollo de Chrome mencionadas anteriormente,

Herramientas FQ: linterna, Gecko Walking

Métodos de aprendizaje y objetivos de aprendizaje

Métodos:

Lea el Repita la versión china de los libros clásicos en la etapa de entrada y practique cada ejemplo del libro. Implemente y vea el efecto en el navegador.

Una vez que tenga cierta base, puede buscar varios tutoriales y demostraciones en línea para comprender el uso real de varias funciones y los métodos de implementación de funciones comunes

Leer los estándares HTML, CSS y Javascript de manera integral mejorar los puntos de conocimiento

Leer blogs y artículos de expertos en front-end para mejorar su comprensión del conocimiento

Hacer un buen uso de los motores de búsqueda

Objetivo:

Memorizar los conceptos importantes en los puntos de conocimiento anteriores y obtener su propia comprensión basada en su experiencia de aprendizaje

Familiarícese con los métodos de implementación de funciones comunes, como diseños CSS comunes, controles de pestañas, etc.

El camino para comenzar

Los siguientes son buenos libros y materiales para la etapa de nivel inicial

HTML primero lea "HTML y CSS: diseño y compilación". Sitios web" 1-9 Capítulo 1-4 de "HTML5: El manual que falta".

Para CSS, primero lea "CSS: El manual que falta", luego "La guía definitiva para CSS"

Para javascript, primero lea "Programación avanzada de JavaScript", luego "La guía definitiva" Guía de JavaScript"

HTTPConsulte la guía autorizada de HTTP

Durante todo el proceso de aprendizaje, habrá muchos lugares donde HTML, CSS y JavaScript deberán combinarse entre sí. Este también es el caso en el trabajo real. Un módulo funcional simple requiere la combinación de los tres.

La práctica es una parte importante del aprendizaje. Los libros se centran en explicar los puntos de conocimiento y los ejemplos pueden no ser suficientes. Por lo tanto, es necesario utilizar motores de búsqueda para encontrar algunos tutoriales sencillos y seguirlos para implementarlos. funciones. Los siguientes son algunos mejores sitios web de tutoriales

Puede buscar preguntas de entrevistas de pruebas escritas de reclutamiento en el campus de las principales empresas como preguntas de práctica o preguntas de entrevistas de inicio resumidas por otros y preguntas de entrevistas resumidas personalmente (con referencia respuestas)

Blogs.com/ o / respuestas de alta calidad y las preguntas se pueden buscar directamente aquí. Si tiene la energía, registrar una cuenta para responder preguntas de otros también puede mejorar en gran medida sus habilidades personales.

Después de familiarizarte con los libros clásicos, puedes abrir el enlace a la sección anterior de habilidades básicas esenciales. Lea atentamente los estándares correspondientes y domine el conocimiento de manera integral

Continuar mejorando

Después de tener la base anterior, el front-end es básicamente una introducción. En este momento, todos pueden tener algo. instrucciones de aprendizaje en mente. Si aún no hay nada.

Puedes consultar los dos proyectos mencionados en la sección anterior de habilidades esenciales y elegir algunos de ellos para desarrollar y aprender.

Aquí hay algunos buenos aspectos:

Grunt: herramienta de automatización front-end para mejorar la eficiencia del trabajo

menos CSS: excelente preprocesador de CSS

bootstrap: excelente marco de CSS, muy bueno para equipos sin diseñadores, perfecto cuando se combina con menos

requirejs: cargador de módulos estándar de AMD, una herramienta esencial para la tendencia de modularización front-end

Node .js: JavaScript también puede se puede utilizar en el backend y el estado de los ingenieros de front-end mejora aún más

AngularJS: una buena herramienta para aplicaciones de una sola página

Desarrollo web móvil: la popularidad de los teléfonos inteligentes ha hecho El tráfico móvil está alcanzando gradualmente al lado de la PC

Gestión de memoria de JavaScript: el funcionamiento a largo plazo de SPA requiere atención a las pérdidas de memoria

JavaScript de alto rendimiento (construcción de interfaces de aplicaciones web más rápidas)

Prácticas recomendadas para acelerar su sitio web: habilidades importantes

####tools

Herramientas de desarrollo de Chrome: herramientas de depuración y desarrollo front-end, centradas en varias funciones:

liveload: se actualiza automáticamente después de modificar la página, no es necesario presionar F5

dimensiones: una poderosa herramienta para medir directamente en la página

livestyle : entra en vigor automáticamente después de modificar el estilo CSS, no es necesario actualizarlo, los elementos también se pueden sincronizar con el código después de la modificación

Herramienta de imagen: medición, selección de color

Código QR UC : necesario para la depuración y el escaneo de dispositivos móviles

pagespeed, YSlow: complemento de optimización y análisis del rendimiento de la página

Mark Feixiang: excelente editor de rebajas en línea, escribe rápidamente informes semanales y toma notas

ver expresión: ver la memoria actual a través de expresiones El valor en

pila de llamadas: ver la pila de llamadas, activar asíncrono, puede ver la pila de llamadas asíncronas (esto es muy útil, especialmente al depurar ajax)

variables de alcance: variables de cadena de alcance activadas, muy útiles

elementos de consola (sin sentido)

elementos: ajuste de estilo de elemento, muy utilizado

fuentes: agregue puntos de interrupción al código, depuración en un solo paso y vea objetos en la memoria durante la depuración en un solo paso

Red: capture paquetes para ver cada solicitud, muy importante, necesaria para el frente -Depuración conjunta de extremo y back-end

Cronología: analiza el renderizado, la ejecución de js y otras etapas, una poderosa herramienta para optimizar el rendimiento

Emulación: simula el entorno móvil, esencial para las páginas móviles desarrollo

Algunos complementos:

texto sublime2: conveniente para codificar, muchos complementos, velocidad rápida y buen rendimiento

emmet: necesario para mejorar el velocidad de codificación html

sublimelinter lint y sugerencia en varios idiomas: corrección de errores de código

Algunos fragmentos: finalización automática, mejora la eficiencia del desarrollo

Intellij IDEA y WebStorm: entorno de desarrollo integrado, que integra varias funciones, el desarrollo es más conveniente que sublime, pero costará más rendimiento

Mark Men: una poderosa herramienta para medir, seleccionar colores y marcar El primer software que se abre después de obtenerlo. el borrador visual

GFW Fucker: Yo uso Hongxing Si es posible, compro un servidor virtual para usarlo como escalera

iHosts: Muy buen software de administración de hosts, fácil.

Modificar hosts, esencial para el desarrollo y la depuración

Charles: La mejor herramienta de análisis y captura de paquetes para la plataforma Mac

Rythem: Software proxy de captura de paquetes producido por AlloyTeam, muy liviano y fácil de install Es muy útil para el desarrollo y depuración de terminales móviles (máquinas reales).

Wunderlist: una muy buena lista de tareas pendientes, que es muy conveniente de administrar cuando hay muchas tareas y necesidades.

####HABILIDADES

De hecho, existen muchas habilidades de front-end además de JavaScript (incluido NodeJS), HTML y CSS.

De hecho, el árbol de habilidades de front-end es muy grande. Aquí solo puedo enumerar algunas de las que he visto durante el desarrollo

#####Conceptos básicos del lenguaje

JavaScript:

Cadena de alcance, cierre, contexto de tiempo de ejecución, esto

Cadena de prototipo, herencia

Conceptos básicos de NodeJS y API comunes

CSS:

Selector

Compatibilidad del navegador y procesamiento de pirateo común

Métodos y principios de diseño CSS (modelo de caja, BFC, IFC, etc.)

CSS 3, como animación, degradado, etc.

HTML:

Etiquetas semánticas

#####Avanzado

JavaScript:

Control asíncrono (Promise, generador ES6, Async)

Método de desarrollo modular (AMD, CMD, KMD, etc.)

Explicación de JavaScript Algunos conocimientos relevantes de el servidor

Implementación de IO asincrónica

Recolección de basura

Cola de eventos

Uso de marcos comunes y sus principios

jQuery: un marco basado en selectores, pero personalmente creo que no se puede llamar marco. Debería considerarse una biblioteca de herramientas porque no tiene un mecanismo de carga de módulos. El código fuente es muy adecuado para leer y estudiar. >

Marcos MVVM como AngularJS/Avalon: concéntrese en comprender el concepto del patrón MVVM en sí y la implementación del enlace bidireccional, y cómo desacoplarlo

subrayado: excelente biblioteca de herramientas, fácil comprender la implementación de fragmentos de código de herramientas comunes

polímero/React: desarrollo basado en componentes, de cara al futuro, comprensión de los principios del desarrollo basado en componentes

CSS y HTML: principalmente características de CSS3 y HTML5, así como el proceso de procesamiento del navegador y los principios de dibujo

árbol DOM, árbol CSSOM, proceso de construcción del árbol de representación y proceso de representación de páginas

Bloqueo causado al analizar HTML, CSS, JavaScript

Relacionado con HTML5

Principios de gráficos vectoriales y SVG

Principios de desarrollo de lienzos y animación (animación de fotogramas)

Vídeo y audio

Método de diseño de caja flexible

icono Uso de fuentes

Paquetes NodeJs de uso común:

koa

express

guión bajo

async

trago

gruñido

solicitud de conexión

Algunas ideas:

Web responsivo

Degradación elegante, mejora progresiva

No me hagas pensar

Usabilidad de la página web , accesibilidad y su importancia

Optimización de motores de búsqueda SEO, comprensión de los principios de los motores de búsqueda

Beneficios y problemas de SPA

Optimización del rendimiento:

Reducir el número de solicitudes (sprite, combo)

Hacer un buen uso del caché (caché de aplicaciones, s: método de desarrollo de componentes orientado al futuro

Plantilla HTML

Shadow DOM

Elementos personalizados

Importación HTML

Desarrollo nativo de terminal móvil: esto también es algo que debes comprender en el futuro. Los ingenieros finales a menudo se ocupan de la vista web y también deben comprender el desarrollo nativo.