Xiaolu utilizó el tiempo fragmentado de los últimos días para organizar una ruta de desarrollo de autoaprendizaje frontal adecuada para la mayoría de los desarrolladores para todas las "novias" presentes.
Ya sea que sea una clase no disciplinaria, un estudiante universitario en la escuela o un desarrollador en otros campos, espero que esta ruta de desarrollo pueda ayudarlo mejor a establecer un sistema de conocimiento de desarrollo de front-end.
En este artículo, usaré mi experiencia de autoaprendizaje de front-end desde cero para aprender qué contenido se debe aprender en cada etapa de aprendizaje del front-end, y cuál es el requisito mínimo para dominar en cada etapa, y cómo todo el sistema de conocimiento aprende cíclica y progresivamente y se rompe a través de la jerarquía. Comparte con los grandes ~
Etapa de entrada
El contenido principal de la etapa introductoria es HTML y CSS.
Para un principiante, cuando entre por primera vez en contacto con la parte delantera, primero debe establecer una comprensión superficial de la parte delantera y saber para qué se utiliza. Por supuesto que es una página web, la mejor manera es construir su primera página a través de HTML y CSS, también para desarrollar mejor su confianza e interés en el aprendizaje front-end.
El aprendizaje de HTML es el siguiente:
Hay muchos editores HTML en el mercado, como VSCode, Hbuilder, SublimeText3, Atom, etc. De todos modos, hay muchos, así que puedes elegir el que más te guste.
Luego, aprenda los elementos, atributos, encabezados, tablas, listas, enlaces, imágenes, formularios, párrafos, encabezados, etc. más básicos de HTML. Los estudiantes enérgicos pueden aprender algunos conocimientos básicos en HTML5, como las etiquetas semánticas.
Después de tener una comprensión general del contenido básico anterior, comencé a aprender CSS, comenzando con la sintaxis de CSS, así como con modelos de caja, selectores, flotadores, posicionamiento, fuentes, texto, atributos básicos y varios diseños.
Sitios web recomendados : Cainiao Tutorial, Geek Academy, MOOC, etc.
Lo anterior es relativo al contenido muy básico, el propósito principal es desarrollar su entusiasmo y confianza en el aprendizaje de front-end y tener un conocimiento general y comprensión de las páginas web de front-end.
Los estudiantes capaces pueden aprender el contenido de la parte CSS del mapa mental. Esta parte es de los puntos de conocimiento más frecuentes que he resumido en entrevistas grandes y pequeñas.
Qué nivel de aprendizaje de HTML y CSS se considera calificado, como darle un sitio web, puede imitar rápidamente exactamente el mismo diseño y composición tipográfica.
Xiaolu preparó diez proyectos de combate reales para todos, y respondió en el trasfondo de la cuenta oficial de Xiaolu: "Actual Combat One" ~ "Actual Combat Ten" .
Si estos diez proyectos de combate reales se pueden completar por completo, felicitaciones, desde Xiaobai hasta la entrada del front-end.
Libros recomendados : "CSS World", "CSS Revealed", "Head First HTML and CSS (2nd Edition)" "CSS Definitive Guide (3rd Edition)"
Etapa avanzada
En la etapa avanzada, comience a atacar JS. Para los principiantes que son nuevos en JS, de hecho es más difícil que aprender HTML y CSS, pero mientras esté dispuesto a trabajar duro, esta parte no es un gran problema para usted.
Hay muchos puntos de conocimiento involucrados en el contenido de JS. Muchas personas en Internet sugieren que mantenga la "Programación avanzada de JavaScript" de principio a fin. Xiaolu no lo recomienda. Después de todo, cualquiera que sea nuevo en JS puede leerlo. No puedo y no hice eso.
La técnica de aprendizaje para esta parte es aumentar la frecuencia y reducir el contenido de una sola visualización. Es decir, por primera vez para aprender JS, échale un vistazo, échale un vistazo, ve al video y al sitio web para aprender, no se recomienda leer el libro directamente. Porque cuando no puedes leerlo, daña tu confianza en el aprendizaje.
Luego, a través de algunos pequeños ejemplos del sitio web, comencé a escribir el código a mano. Debemos practicar, practicar y practicar. Esta vez, es para familiarizarnos mejor con la sintaxis JS. No mire simplemente los puntos de conocimiento de un lado a otro. No es un buen hábito tener buenos ojos y manos bajas. He sufrido aquí, ¿sabe?
1 、
JavaScript y ES6
En este proceso, encontrará que hay muchos puntos de conocimiento de JS y no puede comprender mejor por qué se diseñó este diseño y cuáles son los beneficios de dicho diseño. Esto lo obliga a aprender los entresijos de este único punto de conocimiento, ¿dónde aprenderlo? Primero, libros, sé que no te gusta leerlos, así que tengo que prepararlos para ti.
Resolví los entresijos de cada punto importante de conocimiento básico en JS y lo escribí en un folleto, que se puede obtener de forma gratuita respondiendo al "front-end" en el backstage de la cuenta oficial de Xiaolu. Para decirte en secreto, estos son también los puntos de conocimiento que a menudo entrevistarás en varias fábricas en el futuro Este es también un resumen de mis muchas entrevistas.
De hecho, aprender JS está lejos de ser suficiente. Si realmente quieres aprender JS, aún no puedes escapar de la "Programación avanzada de JavaScript" de Ruby. Cada vez que lo leas, creo que obtendrás ganancias diferentes.
Libros recomendados: "Programación avanzada de JavaScript", "JavaScript que no conoce", "Arte de programación DOM de JavaScript (segunda edición)", "JavaScript de alto rendimiento"
Empecemos a trabajar en ES6. ES6 recomienda el tutorial escrito por el profesor Ruan Yifeng, que es muy detallado. Para algunos puntos de conocimiento de entrevistas comunes de ES6, también los he compilado para todos, y están todos en el "Folleto de entrevista inicial" que escribí.
Recomendación del libro: "Introducción a los estándares ES6 (3.ª edición)" "Comprensión profunda de ES6"
2 、
Estructuras de datos y algoritmos
Escuché a mucha gente decir que el front-end no necesita aprender algoritmos, y es inútil aprender. No escuches. Sufrirás en la entrevista. Los algoritmos a veces determinan si puedes ingresar a una buena empresa.
Aprender las estructuras de datos y los algoritmos es realmente doloroso, pero también es un obstáculo para futuras entrevistas, quien puede experimentar este dolor puede disfrutar de un tratamiento que otros no pueden disfrutar.
En cuanto a cómo aprender la estructura de datos, el siguiente artículo compartirá mi método de aprendizaje.
¿Cómo aprendo las estructuras de datos y los algoritmos?
Para la resolución algorítmica de problemas, Xiaolu es un problema clasificado. En primer lugar, los tipos de problemas clásicos de la "Oferta de dedo espada" son ahora, como si cada uno fuera un tipo de problema clásico, debe hacerse de forma clara y sencilla.
Luego clasifique y cepille las preguntas en el código de lectura, por ejemplo, cepille primero el contenido del árbol binario y luego resuma las rutinas y formas de estos tipos de preguntas cepillando las preguntas. Y hay múltiples soluciones para un problema, y la complejidad de tiempo y espacio de cada solución. Todas ellas se entrenan a través de una gran cantidad de preguntas. No hay una técnica particularmente buena, ¡solo cepillar! ¡cepillo! ¡cepillo! En ese momento, cepillé alrededor de 200, lo que en realidad no es demasiado para muchos expertos en algoritmos, pero afortunadamente, las entrevistas encontrarán muchas preguntas originales.
3 、
Principio de red
Los principios de la red no solo se preguntan con frecuencia en las entrevistas, sino que también se utilizan en el desarrollo diario, como la optimización del rendimiento, los proxies, el almacenamiento en caché, los algoritmos de cifrado, etc.
Si desea dominar esta parte del contenido de manera sistemática, no es nada fácil. Los puntos de conocimiento anteriores están
lejos de ser suficientes. Aún queda un largo camino por recorrer. Para las entrevistas, dominar lo anterior
no es un gran problema. Por supuesto, cuanto más domine, por supuesto El mejor.
4 、
Navegador
Como interfaz, a menudo tratará con el navegador, incluso si finge no saberlo, vendrá a usted todos los días, por lo que le aconsejo que comprenda el principio de implementación del navegador.
Hablando de navegadores, estudiemos el principio de implementación del motor V8 de Google. Creo que obtendrá una gran ventaja. Esta parte del mapa mental y la ruta de aprendizaje se están resolviendo. Después de clasificar, se compartirán sucesivamente en la cuenta pública. salga.
También hay muchos hoyos en el navegador, lo cual es suficiente para tirar por un tiempo. Recientemente, he estado tratando con el navegador y he experimentado profundamente el poder del navegador.
5、
Marco de front-end
Hay demasiados marcos de front-end. Realmente no puedo aprenderlo. No entre en pánico. De hecho, para los tres carros de front-end, Angular, React y Vue, siempre que comprenda uno de los marcos e implemente los principios subyacentes, no aprenderá los otros dos muy bien. Es un trabajo duro. También depende del marco en el que trabajes en el futuro. Por supuesto, cuanto más lo hagas, mejor, pero a menudo el tiempo de todos es limitado. Para estudiantes autodidactas o para aquellos que están a punto de una entrevista para un trabajo Por supuesto, debemos elegir un marco para profundizar.
Tomando Vue como ejemplo, organicé el siguiente sistema de conocimiento.
Con respecto al uso del marco, ya sea que veas el video o la documentación oficial, lo más importante es el principio de implementación del Vue anterior. Debes comprender y explorar el sistema de manera sistemática, lo que te dará una comprensión y comprensión más profunda de la implementación de todo el marco. .
6、
Webpack
Para las herramientas de empaquetado, organicé principalmente el sistema de conocimiento de Webpack.
Nuestro objetivo final es minimizar el tamaño del paquete del proyecto y lograr la mayor velocidad de construcción. Para las herramientas de empaque, no hay mucho que enfatizar, el contenido principal también se ha resuelto para todos y puede obtenerlo al final del artículo.
Avanzado avanzado
Después de trabajar, descubre que la mayoría de los problemas son la arquitectura del código y el mantenimiento y la escalabilidad, y luego conoce la importancia de los patrones de diseño.
La razón por la que lo atribuyo a avanzado avanzado es que realmente puede aplicar patrones de diseño de manera flexible, y realmente requiere mucha práctica, pensamiento y resumen del proyecto.
En segundo lugar, hay algunas cosas que son de más bajo nivel, como los principios de compilación. No tengo demasiado contacto, así que no diré más tonterías aquí. Cuando se trate de eso más adelante, lo compartiré con ustedes.
Al final
De acuerdo, este es el sistema de aprendizaje de front-end desde la entrada hasta el abandono. Todavía hay muchas cosas que no se han resuelto. Se puede considerar que Xiaolu está ordenando mientras aprende, y se mejorará gradualmente en el futuro. Creo que esto será suficiente para que aprendas por un tiempo, jajaja .
En el sistema de conocimiento anterior, muchos puntos de conocimiento se han actualizado en artículos históricos y se pueden ver a través de la barra de menú.
El mapa mental y el "folleto frontal" diseñados en el artículo se pueden responder a "PDF" y "Mapa mental" en el backstage de la cuenta pública de Xiaolu "Programación de animación de cervatillo" para obtener las imágenes y los folletos del artículo.
¡Hasta la próxima!