Собираем песок в башню, каждый день добиваемся небольшого прогресса.
⭐ Введение в колонку
Путешествие по фронтенду: исследуйте чудесный мир веб-разработки. Не забудьте нажать на ссылку выше или справа, чтобы подписаться на эту колонку. Geometry отправит вас в путешествие по фронтенду.
Добро пожаловать в путешествие по фронтенду! Эта колонка создана специально для тех, кто интересуется веб-разработкой и только начинает работать в области фронтенда. Независимо от того, являетесь ли вы новичком или разработчиком с некоторыми базовыми знаниями, здесь вам будет предоставлена систематическая и удобная платформа для обучения. В этой колонке мы будем обновлять ее каждый день в виде вопросов и ответов, предоставляя вам избранные знания по интерфейсу и ответы на часто задаваемые вопросы. С помощью формата вопросов и ответов мы надеемся более непосредственно ответить на вопросы читателей о интерфейсных технологиях и помочь каждому постепенно заложить прочную основу. Будь то HTML, CSS, JavaScript или различные распространенные платформы и инструменты, мы объясним концепции простым и понятным способом, а также предоставим практические примеры и упражнения для закрепления изученного. В то же время мы также поделимся некоторыми практическими советами и лучшими практиками, которые помогут вам лучше понять и применить различные технологии во фронтенд-разработке.
Мало того, мы также будем регулярно запускать практические руководства по проектам, чтобы вы могли применить полученные знания в реальной разработке. Благодаря практике реальных проектов вы сможете лучше понять рабочий процесс и методологию фронтенд-разработки, а также развить свои собственные способности решать проблемы и развиваться самостоятельно. Мы считаем, что только путем постоянного накопления и практики мы можем по-настоящему овладеть технологией фронтенд-разработки. Итак, будьте готовы к испытаниям и смело отправляйтесь в это увлекательное путешествие! Если вы ищете смену карьеры, повышение квалификации или реализацию личных интересов, мы стремимся предоставить вам лучшие учебные ресурсы и поддержку. Давайте вместе исследовать удивительный мир веб-разработки! Присоединяйтесь к началу пути к началу работы с интерфейсом и станьте выдающимся интерфейсным разработчиком! Начнем путешествие по интерфейсу
⭐ Получить значение параметра URL текущей страницы.
Чтобы получить значение параметра URL-адреса текущей страницы, вы можете использовать JavaScript для анализа window.location.search. Этот атрибут содержит часть URL-адреса, содержащую строку запроса (за исключением вопросительного знака ?). Затем вы можете преобразовать строку запроса в объект или использовать такие методы, как регулярные выражения, для извлечения значения определенного параметра.
⭐ Разбор строки запроса
Сначала давайте посмотрим, как проанализировать строку запроса и преобразовать ее в объект, чтобы легко получить значения параметров.
// 获取当前页面的查询字符串
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;
⭐ Используйте регулярные выражения для анализа значений параметров.
Если вы предпочитаете использовать регулярные выражения, вот пример использования регулярных выражений для анализа значений параметров:
// 获取当前页面的查询字符串
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");
Оба метода могут помочь вам получить значение параметра URL-адреса текущей страницы. В зависимости от ваших предпочтений и потребностей проекта вы можете выбрать для реализации один из этих методов.
⭐Напишите в конце
Эта рубрика подходит для широкого круга читателей, и подойдет новичкам фронтенда, или тем, кто не изучал фронтенд, но интересуется фронтендом, или студентам бэкенда, которые хотят лучше проявить себя и расшириться. некоторые знания о интерфейсе во время процесса собеседования, поэтому, если вы владеете основами интерфейса и следите за этой колонкой, это также может в значительной степени помочь вам проверить наличие упущений и заполнить пробелы. Поскольку блоггер сам это делает вывод контента, если в статье есть какие-либо недостатки, вы можете связаться со мной через левую часть главной страницы. , давайте вместе добиваться прогресса, и в то же время я также рекомендую всем несколько рубрик. Заинтересованные партнеры могут подписаться: Помимо столбцов ниже, вы также можете перейти на мою домашнюю страницу, чтобы просмотреть другие столбцы;
Интерфейсные игры (бесплатно) Эта рубрика перенесет вас в мир, полный творчества и веселья. Используя базовые знания HTML, CSS и JavaScript, мы вместе создадим различные интересные страничные игры. Независимо от того, являетесь ли вы новичком или имеете опыт фронтенд-разработки, эта колонка для вас. Мы начнем с основ и познакомим вас с навыками, необходимыми для создания страничной игры. С помощью практических примеров и упражнений вы научитесь использовать HTML для построения структуры страницы, использовать CSS для украшения интерфейса игры и использовать JavaScript для добавления в игру интерактивных и динамических эффектов. В этой статье мы рассмотрим различные типы мини-игр, в том числе игры-лабиринты, разрушение кирпичей, змею, тральщик, калькуляторы, сражения на самолетах, крестики-нолики, головоломки, лабиринты и многое другое. Каждый проект проведет вас через процесс сборки в кратких и ясных шагах с подробными объяснениями и примерами кода. В то же время мы также поделимся некоторыми советами и рекомендациями по оптимизации, которые помогут вам улучшить производительность страницы и удобство для пользователей. Если вы ищете интересный проект для тренировки своих навыков интерфейса или интересуетесь разработкой страничных игр, рубрика «Внешние игры» станет вашим лучшим выбором. Нажмите, чтобы подписаться на рубрику фронтенд-игр
Прозрачное руководство по Vue3 [От нуля до единицы] (Платное) Добро пожаловать в прозрачное руководство по Vue3! Цель этой статьи — предоставить каждому исчерпывающие технические знания, связанные с Vue3. Если у вас есть некоторый опыт работы с Vue2, эта статья поможет вам освоить основные концепции и использование Vue3. Мы начнем с нуля и шаг за шагом проведем вас по созданию полноценного приложения Vue. С помощью практических примеров и упражнений вы научитесь использовать синтаксис шаблонов Vue3, разработку компонентов, управление состоянием, маршрутизацию и другие функции. Мы также представим некоторые расширенные функции, такие как Composition API и Teleport, которые помогут вам лучше понять и применить новые функции Vue3. В этой колонке мы кратко и ясно покажем вам каждый проект с подробными пояснениями и примером кода. В то же время мы также поделимся некоторыми общими проблемами и решениями при разработке Vue3, чтобы помочь вам преодолеть трудности и повысить эффективность разработки. Если вы хотите углубленно изучить Vue3 или вам нужно подробное руководство по созданию внешнего проекта, подробная колонка с учебными пособиями по Vue3 станет для вас незаменимым ресурсом. Нажмите, чтобы подписаться на колонку Vue3 Transparent Tutorial [От нуля к единице]
Руководство по началу работы с TypeScript (бесплатно) — это статья, призванная помочь вам быстро начать работу и освоить технологии, связанные с TypeScript. С помощью краткого и ясного языка и богатого примера кода мы подробно объясним основные концепции, синтаксис и функции TypeScript. Независимо от того, являетесь ли вы новичком или опытным разработчиком, здесь вы можете найти подходящий вам путь обучения. Мы подробно рассмотрим все аспекты: от основных функций, таких как аннотации типов, интерфейсы и классы, до модульной разработки, настройки инструментов и интеграции с общими интерфейсными платформами. Прочитав эту колонку, вы сможете повысить надежность и удобство сопровождения кода JavaScript, а также обеспечить лучшее качество кода и эффективность разработки ваших проектов. Давайте вместе отправимся в это захватывающее и сложное путешествие по TypeScript! Нажмите, чтобы подписаться на колонку «Руководство по началу работы с TypeScript»
