Diagrama de la estructura del árbol de conocimiento del front-end
0 Informe
Esta plantilla es ideal para organizar sistemas de conocimiento de front-end. Desglosa el contenido relacionado con el front-end en capas mediante una estructura de árbol (como fundamentos de HTML, estilos y diseños CSS, lenguaje JavaScript, principios de navegador e ingeniería front-end, etc.), lo que ayuda a construir sistemáticamente un marco de conocimiento de front-end.
Recomendaciones relacionadas
Otras obras del autor
Esquema/Contenido
Ver más
Fundamentos y semántica de HTML
Estructura del documento HTML y etiquetas
Tipos de documentos HTML5 y estructura básica
Scenarios de uso de etiquetas semánticas
encabezado, navegación, principal, artículo, sección, lado, pie de página
figura, figuracapción, marca, tiempo, metro
Elemento de formulario y tipo de entrada
Tipo de entrada: texto, correo electrónico, tel, número, fecha
textarea, selecciona, datalista, salida
Elementos multimedia y gráficos
Elementos de audio y video y sus propiedades
Escenarios de aplicación básicos de canvas y svg
Accesibilidad (ARIA)
Roles y atributos de ARIA
El atributo role define el rol del elemento
aria-label, aria-labelledby, aria-describedby
Navegación de teclado y gestión de enfoque
Uso de la propiedad tabindex
Secuencia de enfoque e indicaciones visuales
Estilos CSS y layouts
Conceptos básicos y selectores CSS
Modelo de caja y formato visual
Modelo de caja estándar y modelo de caja extraña
Propiedades de visualización: block, inline, inline-block, flex, grid
Selector y prioridad
Selector de base: elemento, clase, ID, atributo
Selector de combinación y pseudo-clase, pseudo-elemento
Reglas de cálculo de precedencia del selector CSS
Esquema de diseño moderno
Diseño flexible Flexbox
Propiedades de contenedor: flex-direction, justify-content, align-items
Propiedades del proyecto: flex-grow, flex-shrink, flex-basis
Grid Layout
Definir contenedores de malla y orbitales
Línea de cuadrícula, área de cuadrícula y colocación del proyecto
El uso de grid-template - areas
Diseño Responsive y Media Query
Estrategia de consulta de medios móviles primero
Unidad de vista y unidad relativa
Animación y transformación CSS
Animación de transiciones y keyframes
Configuración del atributo de transición
Transformaciones 2D y 3D
Propiedades transform: translate, rotate, scale, skew
Transform-origin y transform-style
Lenguaje de programación JavaScript
Sintaxis y tipos de datos de JavaScript
Variables, Alcance y Cierre
Diferencia entre var, let y const
Principio de formación de cadenas de alcance y cierre
Tipos de datos y operadores
Tipos originales y tipos de referencia
Operador de conversión y comparación de tipos
Deconstruir operadores de asignación y expansión
Función y contexto de ejecución
Declaraciones de funciones, expresiones y funciones de flecha
Reglas de enlace para esta palabra clave
Stack de llamadas y contexto de ejecución
Operaciones DOM y manejo de eventos
Selección y operación del nodo DOM
document.querySelector y querySelectorAll
Creación, inserción, eliminación y reemplazo de nodos
Modelos de eventos y delegación de eventos
Mecanismo de captura de eventos y burbuja
Atributos y métodos comunes del objeto evento
Optimizar el rendimiento con la delegación de eventos
Programación asíncrona y solicitudes de red
Promesa y funciones asíncronas
Llamadas de estado y cadena de Promise
Azúcar de sintaxis async / wait
API AJAX y Fetch
Uso del objeto XMLHttpRequest
Manejo de solicitudes y respuestas de la API Fetch
Manejo de solicitudes de dominio cruzado (CORS)
ES6 + Nuevas características y modularidad
Programación orientada a objetos y clases
La sintaxis de la clase
Herencia y palabras clave super
Desarrollo modular
Importación y exportación de módulos ES6
Cargador de módulos y herramientas de empaquetado
Ingeniería front-end y cadena de herramientas
Gestión de paquetes y herramientas de construcción
Administrador de paquetes npm y yarn
Análisis de archivos package.json
Administración de dependencias y control de versiones
Herramientas de construcción: Webpack y Vite
Conceptos básicos de Webpack: portal, salida, cargador, plug-in
El servidor de desarrollo y el principio de construcción de Vite
Calidad de código y colaboración
Estilo de código y comprobación estática
Configuración y reglas de ESLint
Formato de código Prettier
Control de versiones y flujo de trabajo Git
Comandos básicos de Git: add, commit, push, pull
Gestión de sucursales y estrategias de fusión
Automatización y CI / CD
Construcción automática
Pruebas automáticas
Automatización de despliegue
Gestión de entorno y configuración
Configuración de entornos múltiples (dev / test / prod)
Gestión de variables ambientales
Configuración de separación
Versión y despliegue
Paquete y liberación
Gestión de versiones
Proceso de implementación
Frameworks y bibliotecas front-end
Conceptos básicos de React Framework
Componentes y sintaxis JSX
Componentes de función y clase
Expresiones JSX y renderizado condicional
Gestión del estado y ciclo de vida
UseState y useEffect Hooks
Método de ciclo de vida para componentes de clase
Esquema de gestión de estado
Context API Comunicación entre componentes
Biblioteca de gestión de estado de Redux
Vue.js Framework Conceptos básicos
Sistemas responsivos y sintaxis de plantillas
Enlaces de datos e instrucciones
Computación de propiedades y oyentes
Sistema de componentes y API combinatoria
Estructura de componente de archivo único
Función de configuración y función combinatoria
Vue Router y administración de estado
Configuración de ruta y guardianes de navegación
Biblioteca de gestión de estado de Pinia
0 Comentarios
Página siguiente