Front-end autodidacta, ¿cuál es la ruta de aprendizaje para el desarrollo front-end?

El autoestudio de front-end es realmente muy difícil. Requiere un fuerte autocontrol y perseverancia en el aprendizaje, y un plan de estudio detallado y una implementación estricta, lo siguiente; La ruta de aprendizaje puede resultarle útil.

Ruta completa de aprendizaje front-end

La primera etapa:

HTML CSS: HTML avanzado, CSS avanzado, diseño div css, desarrollo completo del sitio HTML css.

Conceptos básicos de JavaScript: tutorial básico de Js, métodos comunes de objetos integrados de js, operaciones comunes del árbol DOM, ECMAscript, DOM, BOM, temporizador y mapa de enfoque.

Efectos especiales básicos de JS: efectos especiales comunes, como pestañas, navegación, desplazamiento de página completa, imágenes en carrusel, diapositivas JS, capas emergentes, menús de acordeón, diseño de flujo en cascada, eventos de desplazamiento y desplazamiento. vistas.

Características avanzadas de JS: expresiones regulares, algoritmo de clasificación, algoritmo recursivo, cierre, limitación de funciones, cadena de alcance, marco de movimiento basado en distancia, base orientada a objetos.

JQuery: Uso básico de hangers, operaciones DOM, efectos especiales y animaciones, cadenas de métodos, arrastrar y soltar, transformación y uso básico de componentes JQueryUI.

Fase 2: HTML5 y desarrollo web móvil

HTML5: nuevas etiquetas semánticas HTML5, formularios HTML5, audio y vídeo, almacenamiento local y fuera de línea, SVG, Web Socket, Canvas.

CSS3: Nuevo selector CSS3, pseudoelemento, representación de color, borde, sombra, cambio de atributos de serie de fondo, transición, animación, profundidad de campo y transparencia de profundidad, producción de efectos 3D, framework Velocity.js, elemento entrada, estrategia de entrada, producción genial de páginas web CSS3.

Bootstrap: conceptos responsivos, consultas de medios, producción de sitios web responsivos, sistema de eliminación de cuadrículas, principios del sistema de eliminación de cuadrículas, plantillas Bootstrap comunes, LESS y SASS.

Desarrollo web móvil: introducción a WEB entre terminales y dispositivos convencionales, ventana gráfica, diseño fluido, caja flexible, rem, eventos JavaScript de terminal móvil, producción de efectos JS comunes en teléfonos móviles, Zepto.js, Juhuasuan móvil Las páginas y los teléfonos móviles se desplazan.

La tercera etapa: servicio HTTP y programación AJAX

Conceptos básicos del servidor WEB: conceptos básicos del servidor, introducción al servidor Apache y otros servidores WEB, construcción del servidor Apache, introducción a HTTP.

Conceptos básicos de PHP: sintaxis básica de PHP, uso de PHP para manejar solicitudes GET o POST simples.

Parte 1 de AJAX: Introducción a Ajax y el concepto de asíncrono, encapsulación del marco Ajax, introducción detallada al objeto XMLHttpRequest, métodos de procesamiento de compatibilidad, encapsulación del marco Ajax, problemas de almacenamiento en caché en Ajax, introducción y uso de XML.

AJAX Parte 2: análisis JSON y JSON, enlace de datos y tecnología de plantilla, JSONP, tecnología entre dominios, prelectura de imágenes y tecnología de carga diferida, AjaxAPI en el marco JQuery, uso de Ajax para lograr explosivos Crecimiento Cantidad de casos de flujo.

La cuarta etapa: orientada a objetos avanzada

El artículo definitivo sobre orientación a objetos: desde la perspectiva de la memoria hasta la comprensión de la orientación a objetos JS, tipos básicos, tipos complejos, cadenas de prototipos y orientado a objetos en ES6, permisos de lectura y escritura de atributos, definidor, descriptor de acceso.

Tres características principales de la orientación a objetos: herencia, polimorfismo, encapsulación e interfaz.

Patrones de diseño: pensamiento de programación orientada a objetos, modo singleton, modo fábrica, modo estrategia, modo observador, modo método plantilla, modo agente, modo decorador, modo adaptador, programación orientada a aspectos.

La quinta etapa: encapsule su propio marco

Conceptos básicos de la encapsulación de marcos: flujo de eventos, burbujeo, captura, objeto de evento, marco de evento, marco de selección.

Nivel intermedio de encapsulación de fotogramas: principio de movimiento, fotograma de movimiento de un solo objeto, fotograma de movimiento de múltiples objetos, encapsulación de fotograma de movimiento orientada a objetos.

Encapsulación de marco avanzada y complementaria: el prototipo, la escalabilidad, la modularidad y la encapsulación del marco JQuery pertenecen al propio marco de Chuanzhi.

La sexta etapa: desarrollo de componentes modulares

Programación orientada a componentes: métodos de programación orientada a componentes, principios de implementación de programación orientada a componentes, práctica de programación orientada a componentes y desarrollo de sitios web basados ​​en Aplicación de ideas orientadas a componentes.

Programación orientada a módulos: especificaciones de diseño AMD, especificaciones de diseño CMD, RequireJS, LoadJS, SeaJS de Taobao.

Etapa 7: Marcos populares convencionales

Flujo de trabajo de desarrollo web: GIT/SVN, andamio Yeoman, herramienta de gestión de dependencias NPMer, Grunt/Gulp/Webpack.

Marco MVC/MVVM/MVW: Angular.js, Backbone.js, Knockout/Ember.

Bibliotecas de uso común: React.js, Vue.js, Zepto.js.

La octava etapa: desarrollo de aplicaciones móviles nativas HTML5

Cordova: Introducción a WebApp/NativeApp/HybirdApp, introducción a Cordova, relación con PhoneGap, construcción del entorno de desarrollo, combate real de Cordova (creación Proyecto, configuración, compilación, depuración, despliegue y lanzamiento).

Ionic: introducción de Ionic y comparación de categorías similares, análisis de proyectos de plantilla, componentes y uso comunes, creación de aplicaciones con Angular, efectos comunes (desplegar hacia abajo para actualizar, tirar hacia arriba para cargar, navegación lateral deslizante, pestaña) .

React Native: Introducción a React Native, configuración del entorno React Native, creación de proyectos, configuración, compilación, depuración, implementación y lanzamiento, módulos nativos y componentes de UI, y API nativas de uso común.

HTML5: HTML5 China Industry Alliance, entorno de ejecución HTML5 Plus, herramientas de desarrollo HBuilder, marco MUI, desarrollo e implementación de H5.

Etapa 9: Desarrollo completo de Node.js:

Inicio rápido: desarrollo de Node.js, ecosistema, Io.js, configuración del entorno Linux/Windows/OS X, entorno REPL y programas de consola, programación asincrónica, E/S sin bloqueo, conceptos de módulos, herramientas de gestión de módulos, proceso de desarrollo, depuración y pruebas.

Módulos y objetos principales: objetos globales, proceso, consola, utilidad, controlador de eventos, emisor de eventos, cifrado y descifrado, operación de ruta.

¡Te deseo éxito en tus estudios!