Reuniendo arena para formar una torre, progresando un poco cada día.
⭐ Introducción de la columna
Viaje de entrada al front-end: explore el maravilloso mundo del desarrollo web. Recuerde hacer clic en el enlace de arriba o a la derecha para suscribirse a esta columna. Geometry lo llevará en un viaje de entrada al front-end.
¡Bienvenido al viaje de entrada frontal! Esta columna está hecha a medida para aquellos que están interesados en el desarrollo web y acaban de ingresar al campo del front-end. Ya sea que sea un completo novato o un desarrollador con algunos conocimientos básicos, aquí le brindaremos una plataforma de aprendizaje sistemática y amigable. En esta columna, la actualizaremos todos los días en forma de preguntas y respuestas, presentándole puntos de conocimiento de front-end seleccionados y respuestas a preguntas frecuentes. A través del formato de preguntas y respuestas, esperamos responder más directamente a las preguntas de los lectores sobre la tecnología front-end y ayudar a todos a establecer gradualmente una base sólida. Ya sea HTML, CSS, JavaScript o varios marcos y herramientas comunes, explicaremos los conceptos de una manera simple y fácil de entender, y brindaremos ejemplos y ejercicios prácticos para solidificar lo que ha aprendido. Al mismo tiempo, también compartiremos algunos consejos prácticos y mejores prácticas para ayudarlo a comprender y aplicar mejor diversas tecnologías en el desarrollo front-end.
No solo eso, también lanzaremos periódicamente algunos tutoriales prácticos de proyectos para que puedas aplicar los conocimientos que has aprendido al desarrollo real. A través de la práctica de proyectos reales, podrá comprender mejor el flujo de trabajo y la metodología del desarrollo front-end y desarrollar su propia capacidad para resolver problemas y desarrollarse de forma independiente. Creemos que sólo mediante la acumulación y la práctica continuas podremos dominar verdaderamente la tecnología de desarrollo front-end. Entonces, ¡prepárate para el desafío y embárcate con valentía en este viaje de entrada frontal! Ya sea que esté buscando un cambio de carrera, mejorar sus habilidades o satisfacer sus intereses personales, estamos dedicados a brindarle los mejores recursos de aprendizaje y apoyo. ¡Exploremos juntos el maravilloso mundo del desarrollo web! ¡Únase al viaje de entrada al front-end y conviértase en un destacado desarrollador de front-end! Comencemos el viaje frontal
⭐ Obtenga el valor del parámetro URL de la página actual
Para obtener el valor del parámetro URL de la página actual, puede usar JavaScript para analizar window.location.search
. Este atributo contiene la parte de la cadena de consulta de la URL (excluyendo el signo de interrogación ?
). Luego puede analizar la cadena de consulta en un objeto o utilizar métodos como expresiones regulares para extraer el valor de un parámetro específico.
⭐ Analizar cadena de consulta
Primero, veamos cómo analizar la cadena de consulta y convertirla en un objeto para obtener fácilmente los valores de los parámetros.
// 获取当前页面的查询字符串
const queryString = window.location.search;
// 解析查询字符串为对象
function parseQueryString(queryString) {
const params = {
};
if (queryString) {
queryString = queryString.substring(1); // 去除问号
const paramPairs = queryString.split("&");
for (const pair of paramPairs) {
const [key, value] = pair.split("=");
const decodedKey = decodeURIComponent(key);
const decodedValue = decodeURIComponent(value || "");
params[decodedKey] = decodedValue;
}
}
return params;
}
// 获取当前页面的所有参数
const queryParams = parseQueryString(queryString);
// 例如,获取名为 "id" 的参数值
const idParam = queryParams.id;
⭐ Utilice expresiones regulares para analizar los valores de los parámetros
Si prefiere usar expresiones regulares, aquí hay un ejemplo de cómo usar expresiones regulares para analizar valores de parámetros:
// 获取当前页面的查询字符串
const queryString = window.location.search;
// 使用正则表达式解析查询字符串并提取参数值
function getParameterByName(name) {
name = name.replace(/[\[\]]/g, "\\$&");
const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
const results = regex.exec(queryString);
if (!results) return null;
if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// 例如,获取名为 "id" 的参数值
const idParam = getParameterByName("id");
Ambos métodos pueden ayudarle a obtener el valor del parámetro URL de la página actual. Dependiendo de sus preferencias y necesidades del proyecto, puede elegir uno de estos métodos para implementar.
⭐Escribe al final
Esta columna es adecuada para una amplia gama de lectores y es adecuada para principiantes en front-end; o aquellos que no han aprendido front-end y están interesados en front-end, o estudiantes de back-end que desean mostrarse mejor y expandirse. algunos puntos de conocimiento de front-end durante el proceso de entrevista, por lo que si tiene los conceptos básicos de front-end y sigue esta columna, también puede ayudarlo en gran medida a verificar omisiones y llenar los vacíos. El resultado del contenido, si hay algún defecto en el artículo, puede contactarme a través del lado izquierdo de la página de inicio, avancemos juntos y, al mismo tiempo, también recomiendo varias columnas a todos. Los socios interesados pueden suscribirse: Además de las columnas siguientes, también puedes ir a mi página de inicio para ver otras columnas;
Juegos front-end (gratis) Esta columna lo llevará a un mundo lleno de creatividad y diversión. Utilizando los conocimientos básicos de HTML, CSS y JavaScript, crearemos juntos varios juegos de páginas interesantes. Si es principiante o tiene experiencia en desarrollo front-end, esta columna es para usted. Comenzaremos con lo básico y lo guiaremos a través de las habilidades que necesita para crear un juego de páginas. A través de casos prácticos y ejercicios, aprenderá a usar HTML para crear estructuras de páginas, usar CSS para embellecer la interfaz del juego y usar JavaScript para agregar efectos interactivos y dinámicos al juego. En esta columna, cubriremos varios tipos de minijuegos, incluidos juegos de laberintos, rompeladrillos, serpientes, buscaminas, calculadoras, batallas de aviones, tres en raya, rompecabezas, laberintos y más. Cada proyecto lo guía a través del proceso de construcción en pasos claros y concisos, con explicaciones detalladas y ejemplos de código. Al mismo tiempo, también compartiremos algunos consejos de optimización y mejores prácticas para ayudarle a mejorar el rendimiento de la página y la experiencia del usuario. Ya sea que esté buscando un proyecto interesante para ejercitar sus habilidades de front-end o esté interesado en el desarrollo de juegos de páginas, la columna de juegos de front-end será su mejor opción. Haga clic para suscribirse a la columna de juegos front-end
Tutorial transparente de Vue3 [De cero a uno] (de pago) ¡Bienvenido al tutorial transparente de Vue3! Esta columna tiene como objetivo proporcionar a todos conocimientos técnicos integrales relacionados con Vue3. Si tiene algo de experiencia con Vue2, esta columna puede ayudarle a dominar los conceptos básicos y el uso de Vue3. Comenzaremos desde cero y lo guiaremos paso a paso para crear una aplicación Vue completa. A través de casos prácticos y ejercicios, aprenderá a utilizar la sintaxis de plantillas, el desarrollo de componentes, la gestión de estado, el enrutamiento y otras funciones de Vue3. También presentaremos algunas funciones avanzadas, como Composition API y Teleport, para ayudarlo a comprender y aplicar mejor las nuevas funciones de Vue3. En esta columna, lo guiaremos a través de cada proyecto en pasos claros y concisos, con explicaciones detalladas y código de muestra. Al mismo tiempo, también compartiremos algunos problemas y soluciones comunes en el desarrollo de Vue3 para ayudarlo a superar las dificultades y mejorar la eficiencia del desarrollo. Ya sea que desee aprender Vue3 en profundidad o necesite una guía completa para crear un proyecto front-end, la columna de tutoriales completos de Vue3 se convertirá en un recurso indispensable para usted. Haga clic para suscribirse a la columna Tutorial transparente de Vue3 [De cero a uno]
La Guía de introducción a TypeScript (gratuita) es una columna diseñada para ayudarle a empezar y dominar rápidamente las tecnologías relacionadas con TypeScript. A través de un lenguaje conciso y claro y un rico código de muestra, explicaremos en profundidad los conceptos básicos, la sintaxis y las características de TypeScript. Ya sea un principiante o un desarrollador experimentado, aquí puede encontrar el camino de aprendizaje que más le convenga. Desde características principales como anotaciones de tipo, interfaces y clases hasta el desarrollo modular, la configuración de herramientas y la integración con marcos de front-end comunes, cubriremos todos los aspectos de manera integral. Al leer esta columna, podrá mejorar la confiabilidad y la capacidad de mantenimiento del código JavaScript y proporcionar una mejor calidad del código y eficiencia de desarrollo para sus proyectos. ¡Embárquemonos juntos en este emocionante y desafiante viaje de TypeScript! Haga clic para suscribirse a la columna de la Guía de introducción a TypeScript