¿Cómo aprender a desarrollar front-end? ¿Puedes recomendar una ruta de aprendizaje?

Conocimientos básicos

1.

HTML CSS Se recomienda aprender esta parte a través de tutoriales en línea y practicarla mientras aprende. puedo imitarlo más tarde. Algunos sitios web crean algunas 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

versión china. Este libro lo explica con demasiado detalle y no pude aceptarlo". Lea atenta y pacientemente. Puedes considerarlo según la situación.

2. Realmente hay mucho que aprender sobre Javascript. Si no tiene la base de otros lenguajes de programación, puede que necesite algo de esfuerzo para aprender. Se recomienda leer "Javascript Language Essence". JS es un lenguaje muy confuso. Este libro puede ayudarte a distinguir la esencia del lenguaje y la escoria. Debes estudiar la esencia del lenguaje en profundidad. Siempre que pueda comprender el código escrito por otros, no es necesario que lo pruebe usted mismo.

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. 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. 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.

Se recomienda jQuery, es simple y fácil de usar. Puedes completar algunos proyectos simples con jQuery. El método de aprendizaje también es muy sencillo. Simplemente siga la documentación del producto.

Solo unas pocas páginas son suficientes. No es necesario que lo cubra todo cuando tenga problemas en el futuro. 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 lenguajes de programación funcionales. Incluso si no usa lenguajes orientados a objetos, puede entenderlo completamente como un lenguaje de programación funcional.

Muchas de las características del lenguaje de 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 y polimorfismo. Wikipedia y la Enciclopedia Baidu serán sus ayudas. También recomendamos "Orientado a objetos". Javascript", debería haber 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

, el método para pasar variables, el entorno de definición y el entorno de ejecución de funciones, cierres y los cuatro métodos de llamada de funciones (funciones generales , métodos de objeto, aplicar, llamar) y a quién apunta 'esto' en los cuatro métodos de llamada

. 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, y el libro "Javascript de alto rendimiento" también habla muy bien sobre la programación DOM.

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 entre navegadores. 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.

Indo un paso más allá · Nivel de código:

Con los conocimientos anteriores, deberías 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) Testabilidad.

3) Alto rendimiento. "Javascript de alto rendimiento" de lectura obligada

4) Poco tráfico. El terminal móvil llama más la atención.

5) Para los estudiantes que quieran aprender front-end, especialmente los compañeros de autoestudio, el autoestudio no es permanente. Si no está decidido, debe buscar una institución de capacitación.

Ir un paso más allá · Nivel de ingeniería:

Los proyectos front-end también enfrentan varios aspectos del ciclo de vida del software. El primero es la gestión de código. . 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.