Lo que los ingenieros de front-end web deben dominar en la etapa inicial

Hoy, el editor ha seleccionado para usted el contenido que los ingenieros de front-end web deben dominar en la etapa inicial. Espero que lo lea detenidamente y vea hasta dónde llega el conocimiento. Los puntos que dominas son diferentes de lo que está escrito en el artículo. ¡Ven y echa un vistazo con el editor a continuación!

1. ¿Qué es un ingeniero front-end web junior?

Según mi idea, divido a los ingenieros front-end en cuatro niveles: básico, junior, intermedio y senior.

El nivel de entrada se refiere a comprender qué es el front-end (muchas personas aún no saben qué es el front-end) y comprender la sintaxis básica de HTML, CSS y JavaScript (hay muchas cosas sobre estos lenguajes). ​​​Se puede encontrar en línea si los busca. La sintaxis básica es lo más importante en todo el sistema técnico

Tutorial de tecnología web líder), puede crear páginas basadas en los dibujos de diseño del diseñador. considerando la compatibilidad. He aprendido algo al respecto. El uso de frameworks (como jQuery, zepto,

bootstrap, etc., que son terribles pero aún así impresionantes).

Después de haber pasado por la etapa de nivel básico, haber comprendido lo que hace el front-end, haber aprendido la sintaxis básica y poder crear algunas páginas simples de forma independiente, entonces necesita continuar aprendiendo a Alcanzar el nivel de un ingeniero de front-end junior, hay muchas cosas que los ingenieros de front-end junior necesitan saber. Deben tener una comprensión clara de todo el front-end y ser competentes en el uso de diversas tecnologías. los estudiantes de la escuela pueden aprobar la prueba escrita BAT para el reclutamiento escolar cuando alcanzan el nivel junior.

Entrevistado.

Ingeniero front-end junior: lo primero que debe saber es cómo lidiar con la compatibilidad de varios navegadores (por ejemplo, cuál es la diferencia entre createElement en el navegador IE, etc.). todas las empresas al contratar, requerirán dominio de HTML5,

css3 y JavaScript. Este dominio significa que puede dominarlo al alcance de su mano.

A continuación se hablará sobre los conocimientos específicos que los ingenieros junior de front-end deben aprender, y luego deben comprender varios preprocesadores y posprocesadores de CSS, así como el marco MV* que utiliza front-ends comunes (angularjs). ,

backbone, reactjs, etc.) y conocer los principios de estos marcos. Además, debe dominar el uso de nodejs y poder utilizar varias herramientas de construcción front-end basadas en node

(gruñido, trago, etc., etc.), dominar el uso de github o gitlab y tener un conocimiento relativamente profundo de la modularización, la componenteización, la ingeniería y la semántica. Finalmente, debe saber cómo desarrollar dispositivos móviles. páginas

y cómo optimizar el rendimiento de una página.

2. Sistema técnico para ingenieros junior de front-end web

(1) parte HTML

En primer lugar, es necesario dominar el uso de algunos elementos comunes. etiquetas y sus diversos atributos. He resumido estas etiquetas comúnmente utilizadas de la siguiente manera:

html: el elemento raíz de la página. head: la etiqueta de encabezado de la página, que es el contenedor de todos los elementos del encabezado. cuerpo: la etiqueta principal de la página, donde se coloca el contenido que se muestra en la página. título: El título de la página. meta: Ubicado al principio del documento, proporciona metainformación sobre la página, incluidas palabras clave, descripciones, etc. enlace: Define la relación entre el documento y los recursos externos. El uso más común es introducir hojas de estilo. script: etiqueta script. Puede colocar el código del script js en esta etiqueta, o puede usar el atributo src de esta etiqueta para introducir una etiqueta externa. estilo: etiqueta de estilo, el código CSS se puede escribir en esta etiqueta. a: Hipervínculo, el atributo href representa el lugar al que se vinculará y el atributo de destino representa el método de apertura. img: etiqueta de imagen, el atributo src indica la ubicación de la imagen. formulario: elemento de formulario, su entrada interna, selección, área de texto y otras etiquetas son relativamente importantes.

div: define la partición o sección del documento. Puede utilizar div para realizar el diseño de página y otras operaciones. Además, las etiquetas como ul, li, p, botón, iframe, p y tabla también se utilizan comúnmente. También es necesario comprender las etiquetas semánticas como navegación, sección, artículo, encabezado, aparte y pie de página.

Además de comprender las etiquetas anteriores, también es necesario tener cierto conocimiento de algunas API HTML5 nuevas:

·etiquetas de audio y vídeo.

·Lienzo: define gráficos, como cuadros y otras imágenes.

·El atributo de aceptación de la etiqueta de entrada, correo electrónico, teléfono, URL y otros tipos.

·getElementByClassName obtiene un nodo de elemento basado en el nombre de la clase.

·Multiplefileselection múltiples atributos de selección de archivos.

·importación html, plantilla

·etiqueta de proceso, WebGL y otros contenidos.

También hay algunos puntos de conocimiento que debes conocer:

1.

El papel del tipo de documento. 2. Los principios y diferencias entre unicode, utf8 y otras codificaciones. 3. Cómo optimizar el rendimiento de la página. 4. Diferentes ventajas de los formatos de imagen como png, jpg, Webp y gif. 5. La diferencia entre elementos HTML en línea y elementos a nivel de bloque. 6. Etiquetas principales de uso común en el desarrollo web móvil. 7. Semántica web. 8. Principio de almacenamiento en caché en los navegadores

(2) Parte CSS

Con respecto a CSS, mi opinión es descargar un manual de referencia de CSS en formato chm en línea y luego seguir el manual Escriba todo escrito en él.

CSS se divide aproximadamente en los siguientes puntos de conocimiento:

① Diseño de posicionamiento

1. Los 7 valores del atributo de posición (estático| relativo|absoluto| ¿Cuáles son las funciones y diferencias de la página fija|central|

pegajosa)?

2. Implementar el diseño de glifos o el diseño de tres columnas (los anchos izquierdo y derecho son fijo, y el medio se adapta a la pantalla).

3. Métodos flotantes y flotantes claros, diseño flexible, diseño de cuadrícula.

②Modelo de caja

1. Margen, relleno y borde son tres atributos.

2. Contenido relacionado con la caja retráctil.

3.Multi-columnLayoutModule modelo de diseño de varias columnas.

③Fuente del texto

1. Forzar saltos de línea o ningún salto de línea, borrar espacios en blanco.

2. Alineación del texto, tamaño (cómo configurar fuentes Chrome de menos de 12 píxeles), sangría y conversión.

3. Unidad (em, rem, px, etc.), color (rgb, rgba, hls).

④Transformación, transición y animación

1. El papel y la compatibilidad de varios valores de transformación.

2.Tipo de animación de transición, el principio de la curva de Bézier.

3. Varias configuraciones de animación, reglas @keyframes.

4. Redibujado y reorganización del navegador.

⑤Selector

1. Clasificación, peso y prioridad de los selectores.

2. Qué atributos se pueden heredar y qué atributos no se pueden heredar.

3. Qué son las pseudoclases y los pseudoelementos, y cuáles son sus funciones.

Todo lo anterior son cosas básicas. Además de estos contenidos básicos, debe comprender los preprocesadores de CSS como Less, Sass y stylus. Esto mejorará en gran medida la eficiencia de su desarrollo de CSS. Consulte Autoprefixer, PostCSS y otros postprocesadores CSS.

(3) Parte de JavaScript

Aquí no hablaré sobre el conocimiento básico de js. Dividí js en dos partes principales según el nivel de sintaxis y el nivel de uso. .

Según el nivel de sintaxis:

El primero es el aspecto orientado a objetos de JavaScript: implementar encapsulación, herencia y polimorfismo en JavaScript.

① Encapsulación: en js, la encapsulación se puede lograr mediante cierres, alcances y cadenas de alcance, el papel de const y let de ES6. ②

Herencia: herencia basada en cadena de prototipos, herencia basada en constructores, herencia combinada, herencia parasitaria, etc., más las palabras clave de clase ES6, prototipo y __proto__. ③

Polimorfismo: en JavaScript, el polimorfismo se implementa utilizando argumentos. Se derivará mucho contenido sobre los argumentos: 1. El papel de la persona que llama, la persona que llama y otros métodos de argumentos. 2. Las funciones de los métodos de aplicación y llamada son diferentes. 3. Utilice Array.prototype.slice.call para convertir un objeto de matriz en una matriz. 4. Varios métodos de matriz, como desplazamiento, empalme, inserción, filtrado, mapeo, reducción, forEach, etc.

Luego están los patrones de diseño JS, como los tres patrones de fábrica, los patrones de construcción, etc.

Finalmente, ¿qué representa esto en diferentes situaciones?

Según el nivel de uso:

Lo primero y más importante es ajax, el principio de ajax y el método de dominio cruzado de ajax: jsonp, ubicación.hash usando iframe, postMessageAPI, Websocket, servidor proxy, etc.

Luego están los encabezados de protocolo, los códigos de estado y otros contenidos del protocolo tcp, el protocolo udt y el protocolo http. Caché del navegador, contenido de almacenamiento del cliente: almacenamiento local, almacenamiento de sesiones, indexDB, cookies, etc.

Finalmente, hay algunas API js nuevas, como lectura de archivos (fileReader), recuperación, Promise, Web

Sockets, etc. Puedes ir a caniuse para ver qué hay nuevas. están disponibles algo.

Lo que mencioné anteriormente son solo algunos conceptos generales. He enumerado algunas de las cosas que deben dominarse en HTML, CSS y JavaScript front-end. Todavía hay muchos conocimientos que necesitamos. Lo sabes en el campo front-end. Todos deben resumirlo ellos mismos en el proceso de aprendizaje y trabajo.

Lo anterior es el artículo que el editor compartió con usted hoy sobre lo que los ingenieros de front-end web deben dominar en la etapa inicial. Espero que este artículo pueda ser útil para los amigos que están trabajando en front-end web. fin Quiero obtener más información sobre el conocimiento relacionado con el front-end web, recuerde prestar atención al sitio web oficial de Beida Jade Bird Web Training. Por último, ¡les deseo a todos mucha suerte en su trabajo!