¿Cómo deberían aprender los principiantes sin conocimientos?

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. Su valor fundamental radica en la búsqueda de la experiencia del usuario. Puede aprender el aprendizaje del sistema de acuerdo con las siguientes ideas:

Conocimientos básicos:

1. html css Se recomienda aprender esta parte en el tutorial en línea de w3school y puede practicar mientras aprendizaje.Hay pequeños capítulos después de cada capítulo. Luego, puedes imitar algunos sitios web y crear algunas páginas. 2. Hay mucho que aprender sobre JavaScript. Si no tiene la base de otros lenguajes de programación, puede que le cueste algo de esfuerzo aprenderlo. Se recomienda aprenderlo primero en w3school. Después de eso, le sugiero que lea "La esencia del lenguaje JavaScript" de inmediato. JS es un lenguaje muy confuso. Este libro puede ayudarlo a distinguir la esencia del lenguaje de la escoria. Siempre que pueda comprender el código escrito por otros, no es necesario que lo pruebe usted mismo.

Para los estudiantes que están acostumbrados a ver vídeos para aprender, el contenido anterior también se puede aprender en MOOC, la plataforma de aprendizaje de habilidades de TI más grande de China. Aunque no lo he usado, varios compañeros lo han recomendado y lo he leído brevemente. El contenido es bastante bueno.

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. A partir de hoy (08.12.2015), Tmall, Taobao y Alipay han dejado de admitir IE6 y 7. En el futuro, creo que la mayoría de los sitios web dejarán de admitir IE6 y 7. La participación de mercado de IE8 no es tan alta como antes. Hace dos años (Tmall está a punto de dejar de admitir IE8, 2016.12.13), y el kernel webkit se ha convertido en la corriente principal del mercado. Para el estudio de CSS, recomiendo dividirlo en tres partes: "Conceptos básicos", "Especificaciones CSS2.1" y "Especificaciones CSS3". Debe leer Mastering CSS (segunda edición) (Douban). 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. De hecho, este libro es un poco antiguo, pero los conceptos básicos se explican con mucha claridad y pueden considerarse un clásico. No es necesario leer contenido relacionado con IE6 y 7. Para la parte css3, consulte: Guía práctica de CSS3 (Douban). Este libro también es un poco antiguo, pero ninguno de los libros recién publicados me pareció particularmente bueno.

2. El contenido mencionado anteriormente no es suficiente para que seas competente en programación js. Después de tener los conceptos básicos, el contenido de aprendizaje adicional incluye:

a) Marco. Recomiende zepto, es simple y fácil de usar. Después de simplemente aprender js en w3school, puede iniciar zepto directamente para completar algunos proyectos simples. El código fuente de zepto es simple y claro, y adecuado para que lo lean los principiantes. Suplemento: puedes usar codecademy para aprender javascript y zepto. La experiencia del usuario es realmente buena (gracias TonyOuyang). Los marcos más populares recientemente son React, VUE y Angular. Puede aprender un poco sobre ellos según sea necesario. Con la disminución de la cuota de mercado de los navegadores IE y el desarrollo de terminales móviles, los js nativos estándar ya se pueden utilizar en proyectos reales (actualmente, todavía se necesitan es5shim, babel, etc.), y la atención se centra todavía en ES5, ES6 y ES7.

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 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 como lenguaje funcional.

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 recomiendo "Javascript orientado a objetos", que debería. Tiene una versión china. Para obtener más información sobre programación funcional, puede consultar este artículo: Práctica de programación funcional en JavaScript

c) El mecanismo interno del lenguaje JavaScript. Es necesario comprender los siguientes conceptos: el alcance de las variables en js, el método de paso de variables, el entorno de definición y entorno de ejecución de funciones, cierres, los cuatro métodos de llamada de funciones (funciones generales, métodos de objeto, aplicar, llamar) , y los cuatro En el modo de llamada, a quién apunta "esto". Aprenderá más sobre esta parte en "Javascript Language Essence".

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, la parte sobre programación DOM del libro "JavaScript de alto rendimiento" también es muy buena.

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. Además, ajax será reemplazado por Fetch Standard en los próximos años, por lo que es necesario comprenderlo. Además, también necesita conocimientos sobre xhr2, cors (intercambio de recursos entre sitios) y carga de archivos formData.

f) es5, es6. La mayoría de los js desarrollados actualmente se basan en es5, y es5-shim se usa para ie8 y versiones inferiores. Pero con algunas herramientas, ahora puedes escribir código es6 directamente, especialmente en proyectos de tipo reactjs y nodejs. Se necesita un aprendizaje sistemático para comprender los cambios en js en cada etapa de es5 a es6. El orden de aprendizaje recomendado es Conceptos básicos de JavaScript -gt; es5 -gt, cuanto antes, más importante. Algunos enlaces de referencia: Tabla de compatibilidad de ECMAScript 5ECMAScript 6 Introducción a ES5 Zhang Xinxu

3. Debe comprender qué API proporciona HTML y luego utilizarlas en el proyecto. No hay nada difícil de entender en esta parte. La clave está en poder utilizar html5 para resolver problemas comerciales y degradar soluciones para navegadores que no admiten html5. Esta parte refleja una idea del front-end: programar para el futuro, introducir nuevas tecnologías en el negocio lo antes posible, en lugar de considerar demasiado los problemas de compatibilidad, lo que lleva a programar para el pasado.

Pasando al siguiente nivel de código:

Con el conocimiento anterior, 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 más altos: 1. fácil mantenimiento, 2. comprobable, 3. alto rendimiento y 4. bajo 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. Es para garantizar que su código pueda comunicarse con las pruebas unitarias y cubrir todas las ramas.

3. "JavaScript de alto rendimiento" de lectura obligada

4. El lado móvil le presta más atención, pero el lado de la PC no necesita prestarle demasiada atención ahora

Pasando al siguiente nivel·Nivel de ingeniería:

Proyectos front-end También enfrenta varios aspectos del ciclo de vida del software, comenzando con el código. Para la administración, debes aprender a usar 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. Debe aprender a utilizar herramientas de construcción front-end como grunt, gulp. webpack y rollup, así como gestión de módulos front-end, amd, cmd, módulo es6, etc.

¿Y entonces qué?

El contenido anterior solo describe brevemente la secuencia del aprendizaje front-end. Consulte la estructura de conocimientos que deben tener los ingenieros de front-end aquí: JacksonTian/fks · GitHub

Para el desarrollo de front-end, este es el contenido básico. Puede aprender selectivamente el siguiente contenido según el suyo. 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. 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 aprender PHP en profundidad, que 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 conocer al menos un marco MVC, como ci, yii, yaf de PHP, etc. 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 Koa en Node para desarrollar algunos servicios de back-end.

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

4. Si puedes leer esto con atención, significa que tienes un verdadero amor por el front-end. Finalmente, una pregunta sobre los hábitos de programación definitivamente garantizará que tu trabajo sea seguro y haya menos fallas. . Se deben hacer tres cosas antes de enviar el código: A. git diff (svn diff) para verificar todos los cambios B. Ejecutar pruebas unitarias C. Ejecutar todas las demostraciones manualmente.