Cómo aprender el front-end de forma sistemática y eficaz

El desarrollo de sitios web se divide a grandes rasgos en front-end y back-end. El front-end es el principal responsable de lograr efectos visuales e interactivos, comunicarse con el servidor y completar la lógica empresarial. El valor central del front-end radica en la búsqueda de la experiencia del usuario. El desarrollo del front-end web evolucionó a partir de la producción de páginas web. ¡Los principiantes pueden consultar los siguientes tutoriales para el aprendizaje preliminar del sistema! Conocimientos básicos 1. HTML CSS Se recomienda aprender esta parte en el tutorial en línea de W3school y practicarla mientras aprende. Hay una pequeña prueba después de cada capítulo. Luego, puedes imitar algunos sitios web y crear páginas. Después de acumular algo de experiencia en la práctica, puede leer uno o dos libros de forma sistemática. Recomiendo "Head First HTML y CSS Chinese Edition". Este libro es demasiado detallado y no tuve la paciencia para leerlo detenidamente. Puedes considerarlo según la situación. 2. Hay mucho que aprender sobre Javascript. Si no tiene la base de otros lenguajes de programación, puede que le lleve un poco de esfuerzo aprenderlo. Se recomienda aprenderlo primero en W3school. Después de eso, se recomienda leer "La esencia del lenguaje Javascript" de inmediato. JS es un lenguaje muy confuso. Este libro puede ayudarlo a distinguir cuál es la esencia del lenguaje y cuál es la escoria. lenguaje en profundidad. Siempre que pueda comprender el código escrito por otros, no es necesario que lo pruebe usted mismo. Avanzado Con la base anterior, puedes llevar a cabo un diseño web estático general, pero necesitas más aprendizaje para páginas complejas. 1. CSS. Una lectura obligada es "Dominar CSS". Después de leer este libro, debe tener una buena comprensión de conceptos como modelo de caja, flujo, bloque, en línea, cascada, prioridad de estilo, etc. Como ejercicio, puedes leer el libro "CSS Craftsman", que tiene una introducción detallada a temas como títulos, fondos, esquinas redondeadas, barras de navegación, tablas, formularios, etc. 2. JavaScript. El contenido mencionado anteriormente no es suficiente para hacerte competente en programación JS. Después de tener los conceptos básicos, el contenido de aprendizaje adicional incluye: a) Marco. Recomendamos jQuery, que es simple y fácil de usar. Después de simplemente aprender js en W3school, puede completar algunos proyectos simples usando jQuery directamente. El método de aprendizaje también es muy simple. Simplemente siga la documentación del producto y cree algunas páginas. No es necesario que cubra todo. Si encuentra problemas en el futuro, simplemente consulte la documentación. Los marcos pueden ayudarle a bloquear las diferencias entre navegadores, permitiéndole centrarse más en la esencia del aprendizaje sobre desarrollo web. Suplemento: puedes usar Codecademy para aprender Javascript y jQuery. La experiencia del usuario es realmente buena (gracias a TonyOuyang). b) Paradigma del lenguaje Javascript. Puede que este nombre no sea apropiado, pero no puedo encontrar un concepto que pueda describir los dos conceptos de "orientado a objetos" y "funcional". Javascript no es completamente un lenguaje orientado a objetos. Muchos de sus conceptos de diseño tienen la sombra de un lenguaje de programación funcional. Incluso se dice que si no estás orientado a objetos, puedes entenderlo completamente como un lenguaje de programación funcional. Muchas características del lenguaje Javascript existen debido a sus características funcionales del lenguaje. En esta parte, se recomienda aprender primero la teoría básica de la orientación a objetos y comprender conceptos como encapsulación, herencia, polimorfismo, etc. Wikipedia y la Enciclopedia Baidu serán sus ayudas. También recomendamos "Javascript orientado a objetos", que debería. Tiene una versión china. No sé mucho sobre programación funcional sistemáticamente, por lo que no puedo decir mucho al respecto. Puedes buscarlo tú mismo en Baidu. c) Mecanismo interno del lenguaje Javascript. Es necesario comprender los siguientes conceptos: el alcance de las variables en JS, los métodos de transferencia de variables, el entorno de definición de funciones y el entorno de ejecución, cierres, cuatro métodos de llamada de funciones (funciones generales, métodos de objeto, aplicar, llamar) y cuatro en el modo de llamada, a quién apunta "esto". Aprenderá más sobre esta parte en "Javascript Language Essence". Además, debes entender json. d) Programación DOM, una de las habilidades centrales de este ingeniero front-end web.

"El arte de la programación Dom" es una lectura obligada. Además, el libro "Javascript de alto rendimiento" sobre programación DOM también es muy bueno. e) Programación Ajax, esta es otra tecnología central. Ajax recomienda consultar cierta información en Internet para comprender los pormenores de este concepto. El contenido de la Enciclopedia Baidu y Wikipedia es suficiente. La programación real es muy fácil. Hoy en día, casi todos los marcos tienen una buena encapsulación de Ajax y la programación no es complicada. f) Comprender las diferencias del navegador. Esta parte incluye CSS y js. Hay muchas diferencias entre los navegadores. Se recomienda acumular más en la práctica. Además, se deben estudiar sistemáticamente el modo de representación del navegador, DOCTYPE y otros contenidos. 3. HTML5 y CSS3. La especificación HTML5 se publicó el 28 de octubre de 2014. HTML5 y CSS3 móviles se han utilizado ampliamente, por lo que debe conocerlos. Con el conocimiento anterior a nivel de código, debería poder escribir código funcional para la mayoría de los sitios web pequeños. Pero si quieres convertirte en un front-end más profesional, aún debes seguir trabajando duro. Probablemente existan cuatro requisitos superiores: 1) fácil mantenimiento, 2) comprobable, 3) alto rendimiento y 4) poco tráfico (terminal móvil). 1) Fácil de mantener. Para las páginas, debes comprender la separación de "estilo", "datos" y "comportamiento", que por supuesto corresponden a CSS, HTML y js. Para el código js, ​​será mejor que comprenda los patrones de diseño, refactorización, MVC, etc. 2) Comprobabilidad. 3) Alto rendimiento. Debe leerse "Javascript de alto rendimiento" 4) Poco tráfico. El terminal móvil llama más la atención. Los proyectos front-end a nivel de ingeniería también enfrentan varios aspectos del ciclo de vida del software. El primero es la gestión de código. Debe aprender a utilizar Svn y Git. El segundo es la construcción de código. Hoy en día, la construcción de código front-end ya no es una simple cuestión de compresión. Requiere gestión de dependencias, fusión de módulos y varias compilaciones. Requiere aprender a usar herramientas de construcción front-end como Grunt y Gulp. ¿Entonces qué? El contenido anterior solo describe brevemente la secuencia del aprendizaje front-end. Para el desarrollo front-end, este es el contenido básico. Puede aprender selectivamente el siguiente contenido según sus propios intereses y pasatiempos. 1. Diseño de interacción. Las grandes empresas todavía tienen profesionales que hacen esto, pero un front-end que no comprende la interacción definitivamente no es un buen front-end. Recomiende "La simplicidad primero". 2. Servidor. Cabe decir que los ingenieros de front-end deben conocer al menos un lenguaje de back-end, pero si estás interesado, también puedes aprenderlo en profundidad. PHP es probablemente el más fácil para empezar. Esta parte se puede dividir en dos tipos: basada en páginas y basada en marcos. Todos los proyectos a gran escala se desarrollan en base a marcos. Se recomienda comprender al menos un marco MVC, como Ci, Yii, Yaf, etc. de PHP. Afortunadamente, las ideas de diseño de los marcos son similares. Hoy en día, NodeJs se ha utilizado ampliamente en grandes empresas. Se recomienda utilizar el marco Express en Node para desarrollar algunos servicios de back-end. 3. Desarrollo de Android e IOS. Hoy en día, el campo del trabajo front-end se ha vuelto muy extenso. El desarrollo de interfaces nativas es esencialmente desarrollo front-end. Todas las grandes empresas enfrentan el problema de mantener las páginas del entorno nativo y web al mismo tiempo. unificado, habrá un gran valor. Los estudiantes que tienen espacio para aprender deben comprender el proceso básico del desarrollo nativo y al menos comprender la tecnología de construcción de interfaces. Jaja, en realidad no entiendo el tutorial anterior. Si estás interesado en el desarrollo front-end, si quieres convertirte en un maestro del desarrollo front-end, ¡también puedes aprender de él!