Juntando areia em uma torre, fazendo um pequeno progresso todos os dias
⭐ Introdução à coluna
Jornada de entrada de front-end: Explore o maravilhoso mundo do desenvolvimento web Bem-vindo à jornada de entrada de front-end! Se você estiver interessado, pode assinar esta coluna! Esta coluna é feita sob medida para quem tem interesse em desenvolvimento web e acabou de entrar na área de front-end. Quer você seja um novato ou um desenvolvedor com algum conhecimento básico, aqui iremos fornecer-lhe uma plataforma de aprendizagem sistemática e amigável. Nesta coluna iremos atualizá-la todos os dias na forma de perguntas e respostas, apresentando pontos de conhecimento front-end selecionados e respostas às perguntas mais frequentes. Através do formato de perguntas e respostas, esperamos responder mais diretamente às perguntas dos leitores sobre tecnologia front-end e ajudar todos a estabelecer gradualmente uma base sólida. Seja HTML, CSS, JavaScript ou vários frameworks e ferramentas comuns, explicaremos os conceitos de uma forma simples e fácil de entender e forneceremos exemplos práticos e exercícios para solidificar o que você aprendeu. Ao mesmo tempo, também compartilharemos algumas dicas práticas e práticas recomendadas para ajudá-lo a compreender e aplicar melhor diversas tecnologias no desenvolvimento front-end.
Além disso, também lançaremos regularmente alguns tutoriais práticos de projetos para que você possa aplicar o conhecimento que aprendeu no desenvolvimento real. Através da prática de projetos reais, você será capaz de compreender melhor o fluxo de trabalho e a metodologia de desenvolvimento front-end, e desenvolver sua própria capacidade de resolver problemas e desenvolver de forma independente. Acreditamos que somente através da acumulação e prática contínuas poderemos realmente dominar a tecnologia de desenvolvimento front-end. Então, prepare-se para o desafio e embarque com coragem nesta jornada de entrada inicial! Esteja você procurando uma mudança de carreira, aprimoramento de habilidades ou satisfação de interesses pessoais, estamos empenhados em fornecer a você os melhores recursos e suporte de aprendizagem. Vamos explorar juntos o maravilhoso mundo do desenvolvimento web! Junte-se à jornada de entrada no front-end e torne-se um excelente desenvolvedor front-end! Vamos começar a jornada do front-end . A imagem abaixo apresenta outras colunas que o blogueiro está produzindo além desta coluna; (pule a imagem abaixo e vamos começar o texto de hoje!!!)
A programação orientada a eventos em JavaScript é um paradigma de programação comum baseado no mecanismo de eventos e funções de retorno de chamada para lidar com operações assíncronas e interativas. Na programação orientada a eventos, o fluxo de execução do programa é acionado principalmente por eventos externos, em vez de sequência de código linear, o que o torna muito adequado para lidar com interação do usuário, solicitações assíncronas, processamento de eventos, etc.
⭐Evento
Um evento é algo que pode ser sentido e respondido, geralmente como resultado da interação com o ambiente externo. Em JavaScript, os eventos podem incluir:
- Eventos do navegador : por exemplo, clique, movimento do mouse, pressionamento de tecla do teclado e outros eventos que ocorrem quando o usuário interage com a página da web.
- Eventos personalizados : eventos personalizados criados por meio da API Event do JavaScript, usados para comunicação entre componentes ou objetos personalizados.
- Operações assíncronas : por exemplo, temporizador (setTimeout), mudança de estado de promessa, conclusão de solicitação HTTP, etc., também podem ser consideradas eventos.
⭐ Ouvinte de eventos
Ouvintes de eventos são funções que escutam eventos específicos. Ele pode addEventListener()anexar ouvintes de eventos a elementos DOM específicos ou outros alvos de eventos por meio do método. Os ouvintes de eventos geralmente consistem nas três partes a seguir:
- Tipo de evento : O tipo de evento a ser monitorado, por exemplo, "clique", "keydown", etc.
- Função de retorno de chamada : uma função a ser executada quando ocorre um evento, geralmente chamada de função de retorno de chamada.
- Opções opcionais : Opções de configuração incluindo fase de captura e fase de bolha.
element.addEventListener('click', function() {
// 这里是回调函数，处理点击事件的响应
});
⭐ Função de retorno de chamada
Uma função de retorno de chamada é uma função passada como parâmetro para outras funções e chamada quando ocorre um evento específico ou uma condição é atendida. Na programação orientada a eventos, as funções de retorno de chamada são usadas para lidar com respostas a eventos, como lidar com ações após clicar em um botão ou processar após a conclusão de uma solicitação assíncrona.
function handleClick() {
// 这是一个回调函数，处理点击事件的响应
}
element.addEventListener('click', handleClick);
⭐ Não bloqueador e assíncrono
A programação orientada a eventos normalmente é sem bloqueio e assíncrona. Isso significa que um programa pode lidar com vários eventos e tarefas simultaneamente, sem ter que esperar a conclusão de cada evento. Por exemplo, em um navegador, vários eventos de clique de usuário, eventos de timer e solicitações de rede podem ser tratados simultaneamente sem bloquear a execução de outro código.
⭐Loop de eventos
O loop de eventos é um mecanismo para ouvir e processar continuamente eventos em uma fila de eventos. Em JavaScript, o loop de eventos é o mecanismo principal usado para lidar com vários eventos. Ele verifica continuamente a fila de eventos e, se houver um evento que precise ser processado, o ouvinte de evento ou função de retorno de chamada correspondente será chamado.
⭐ Evento de gatilho
Acionar um evento significa acionar manualmente um evento por meio de código quando uma condição específica for atendida, executando assim o ouvinte de evento associado ao evento. Isso é útil para manipulação de eventos personalizados.
// 创建一个自定义事件
var customEvent = new Event('custom');
// 触发自定义事件
element.dispatchEvent(customEvent);
⭐ Padrão de publicação/assinatura
O padrão publicar/assinar é um padrão de programação comum orientado a eventos que permite que objetos (publicadores/assinantes) registrem-se e recebam notificações de eventos específicos. Os editores são responsáveis pela publicação dos eventos, enquanto os assinantes recebem notificações ao se inscreverem em eventos de interesse.
// 发布者
var publisher = {
subscribers: [],
subscribe: function(callback) {
this.subscribers.push(callback);
},
publish: function(data) {
this.subscribers.forEach(function(callback) {
callback(data);
});
}
};
// 订阅者
function subscriber1(data) {
console.log('Subscriber 1 received data: ' + data);
}
function subscriber2(data) {
console.log('Subscriber 2 received data: ' + data);
}
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);
publisher.publish('Some data');
Através desses títulos, você pode aprender mais sobre os principais conceitos e mecanismos da programação orientada a eventos em JavaScript. Isso é útil para desenvolvimento front-end, desenvolvimento back-end e outros
⭐Escreva no final
Esta coluna é adequada para uma ampla gama de leitores e é adequada para iniciantes em front-end; ou aqueles que não aprenderam front-end e estão interessados em front-end, ou estudantes de back-end que desejam se mostrar melhor e expandir alguns pontos de conhecimento de front-end durante o processo de entrevista, então se você tem o básico de front-end e segue esta coluna, ela também pode ajudá-lo em grande medida a verificar se há omissões e preencher as lacunas. Já que o próprio blogueiro faz isso a saída do conteúdo, se houver alguma falha no artigo, você pode entrar em contato comigo pelo lado esquerdo da página inicial., vamos progredir juntos e, ao mesmo tempo, também recomendo várias colunas para todos. Parceiros interessados podem se inscrever: Além das colunas abaixo, você também pode acessar minha página inicial para ver outras colunas;
Jogos front-end (gratuitos) Esta coluna o levará a um mundo cheio de criatividade e diversão. Usando o conhecimento básico de HTML, CSS e JavaScript, construiremos juntos vários jogos de páginas interessantes. Quer você seja iniciante ou tenha alguma experiência em desenvolvimento front-end, esta coluna é para você. Começaremos com o básico e orientaremos você nas habilidades necessárias para criar um jogo de página. Através de casos práticos e exercícios, você aprenderá como usar HTML para construir a estrutura da página, usar CSS para embelezar a interface do jogo e usar JavaScript para adicionar efeitos interativos e dinâmicos ao jogo. Nesta coluna, cobriremos vários tipos de minijogos, incluindo jogos de labirinto, quebra de tijolos, cobra, caça-minas, calculadoras, batalhas de avião, jogo da velha, quebra-cabeças, labirintos e muito mais. Cada projeto orienta você através do processo de construção em etapas concisas e claras, com explicações detalhadas e exemplos de código. Ao mesmo tempo, também compartilharemos algumas dicas de otimização e práticas recomendadas para ajudá-lo a melhorar o desempenho da página e a experiência do usuário. Se você está procurando um projeto interessante para exercitar suas habilidades de front-end ou está interessado no desenvolvimento de jogos de páginas, a coluna de jogos de front-end será sua melhor escolha. Clique para assinar a coluna de jogos front-end
Tutorial transparente do Vue3 [de zero a um] (pago) Bem-vindo ao tutorial transparente do Vue3! Esta coluna tem como objetivo fornecer a todos um conhecimento técnico abrangente relacionado ao Vue3. Se você tem alguma experiência com Vue2, esta coluna pode ajudá-lo a dominar os principais conceitos e uso do Vue3. Começaremos do zero e guiaremos você passo a passo para construir um aplicativo Vue completo. Através de casos práticos e exercícios, você aprenderá como utilizar a sintaxe do template do Vue3, desenvolvimento de componentes, gerenciamento de estado, roteamento e outras funções. Também apresentaremos alguns recursos avançados, como Composition API e Teleport, para ajudá-lo a entender e aplicar melhor os novos recursos do Vue3. Nesta coluna, orientaremos você em cada projeto em etapas concisas e claras, com explicações detalhadas e exemplos de código. Ao mesmo tempo, também compartilharemos alguns problemas e soluções comuns no desenvolvimento do Vue3 para ajudá-lo a superar dificuldades e melhorar a eficiência do desenvolvimento. Se você deseja aprender Vue3 em profundidade ou precisa de um guia completo para construir um projeto front-end, a coluna do tutorial completo do Vue3 se tornará um recurso indispensável para você. Clique para assinar a coluna Vue3 Transparent Tutorial [From Zero to One]
Guia de primeiros passos do TypeScript (gratuito) é uma coluna projetada para ajudá-lo a começar e dominar rapidamente as tecnologias relacionadas ao TypeScript. Por meio de uma linguagem concisa e clara e de um rico exemplo de código, explicaremos detalhadamente os conceitos básicos, a sintaxe e os recursos do TypeScript. Quer você seja um desenvolvedor iniciante ou experiente, você pode encontrar aqui um caminho de aprendizagem adequado para você. Desde recursos básicos, como anotações de tipo, interfaces e classes, até desenvolvimento modular, configuração de ferramentas e integração com estruturas front-end comuns, cobriremos todos os aspectos de forma abrangente. Ao ler esta coluna, você poderá melhorar a confiabilidade e a capacidade de manutenção do código JavaScript e fornecer melhor qualidade de código e eficiência de desenvolvimento para seus projetos. Vamos embarcar juntos nesta jornada emocionante e desafiadora do TypeScript! Clique para assinar a coluna Guia de primeiros passos do TypeScript
