Perguntas e respostas da entrevista de front-end da Web de 2023 (2)

1. Descreva resumidamente o entendimento do BFC, como criar o BFC e suas funções

BFC - Block Formatting Context (BFC) faz parte da renderização visual CSS da página Web. É a área onde as caixas em nível de bloco são geradas durante o processo de layout, e também é a área limitada para interação entre elementos flutuantes e outros. elementos.

Condições para criação do BFC :

• Elemento raiz: corpo;
• Configuração do elemento float: valor flutuante diferente de nenhum;
• Elementos definem posicionamento absoluto: posição (absoluta, fixa);
• Os valores de exibição são: inline-block, table-cell, table-caption, flex, etc.;
• Os valores de overflow são: oculto, automático, rolagem; 

Função BFC

• Evite que as margens se sobreponham. As margens dos subelementos pertencentes ao mesmo bfc causadas pela sobreposição do bfc (a distância vertical da caixa é determinada pela margem. As margens de duas caixas adjacentes pertencentes ao mesmo BFC se sobreporão).Podemos embrulhar um contêiner fora do div e acione o contêiner para gerar um BFC. Então as duas divs não pertencem ao mesmo BFC e não ocorrerá sobreposição de margens.
• Limpe o impacto da flutuação: os elementos filhos no nível do bloco estão flutuando. Se o elemento pai no nível do bloco não definir uma altura, sua altura entrará em colapso. Motivo: depois que os elementos filhos flutuam, o BFC é ativado e o elemento pai não será expandido pelos elementos filhos. Solução: No cálculo da altura do BFC, os elementos flutuantes também participam do cálculo. Portanto, basta definir o contêiner pai como bfc para incluir os elementos filhos: esse contêiner conterá os elementos filhos flutuantes e sua altura será expandida para conter seus elementos filhos, portanto, neste BFC esses elementos retornarão ao fluxo regular do documento da página.
• Evitar quebra automática de texto

2. Quais são as formas de atrasar o carregamento de scripts Javascript?

 1. Carregamento assíncrono

Carregue arquivos JavaScript de forma assíncrona adicionando o atributo "async" para evitar bloquear o download e a renderização de outros recursos durante o carregamento da página. O carregamento assíncrono não garante a ordem de execução dos scripts, mas é adequado para componentes independentes e bibliotecas de ferramentas.

<script src="../test.js" assíncrono/>

2. Carregamento diferido

Atrase o carregamento de arquivos JavaScript adicionando o atributo "defer" para garantir que outros recursos na página sejam carregados e renderizados primeiro. Ao contrário do carregamento assíncrono, o carregamento lento garante que os scripts sejam executados na ordem em que aparecem, por isso é mais adequado para componentes e bibliotecas dependentes que precisam ser carregados em ordem.

<script src="../test.js" defer="defer"/>

3. Carregamento Dinâmico

Adicione ou remova tags HTML dinamicamente por meio de código JavaScript para carregar ou descarregar arquivos de script. Essa abordagem é adequada para situações em que componentes e funcionalidades precisam ser carregados e descarregados com base no comportamento do usuário ou nas necessidades de negócios.

4. Carregamento lento

Carregue arquivos JavaScript quando necessário, não quando a página for carregada inicialmente. O carregamento lento pode reduzir o tamanho e o tempo de carregamento da página inicial e otimizar a experiência do usuário. Normalmente, o carregamento lento é adequado para imagens, vídeos, anúncios e alguns códigos JavaScript não críticos.

3. Use 5 para selecionar aleatoriamente 10 números entre 10 e 100, armazená-los em uma matriz e classificá-los

    function randomNub(arr,len,min,max){
        //如果给的长度大于取值范围，则超出提示
        if(len>=(max-min)){
            return "超过"+min+"-"+max+"之间的个数范围"+(max-min-1)+"个的总数";
        }
        //从小到大排序，实现该数组的降序排列
        if(arr.length>=len){
            arr.sort(function(a,b){
                return a-b;
            });
            return arr;
        }
        //定义当前的数字
        var nowNub=parseInt(Math.random()*(max-min-1))+(min+1);
        //当生产的随机数==数组中的一个数字时，
        for(var j=0;j<arr.length;j++){
            if(nowNub==arr[j]){
                randomNub(arr,len,min,max);
                return;
            }
        }
        arr.push(nowNub);
        randomNub(arr,len,min,max);
        return arr;
    }
    var arr=[];
    //调用该函数，实现功能
    console.log(randomNub(arr,10,10,100))

4. JS implementa uma cópia profunda

Cópia profunda : uma nova matriz ou objeto composto será construída e a cópia continuará ao encontrar o tipo de dados de referência apontado pela referência.

Cópia superficial : refere-se à cópia apenas do primeiro nível de um objeto ou array, e os outros níveis copiam o endereço de memória armazenado.

方式一：通过JSON对象的stringify和parse方法实现
let obj = {

name: '小红',

age: 13,

arr: [3, 4],

}

let obj1= JSON.parse( JSON.stringify(obj) )

方式二：jquery的extend()方法进行深拷贝（推荐在JQ中使用）
仅适用于JQuery构建的项目。JQuery自身携带的extend
let newObj = $.extend(true, {}, obj);
 //拷贝完成obj.b = 20;console.log(newObj.b); //输出 4

5. Extraia os resultados ["2023","09","15","09","10","23"] de "2023-09-15T09:10:23 Europe/Paris"

    let str = '2023-09-15T09:10:23 Europe/Paris';
    let arr2 = str.match(  /\d{1,}/g);

// \d:返回的是数字
// {1,} 至少返回的是由一个长度的数据

6. Implemente uma função de ligação

Explicação do site oficial: O método bind() cria uma nova função. Quando bind() é chamado, este desta nova função é especificado como o primeiro parâmetro de bind(), e os parâmetros restantes serão usados ​​como parâmetros do nova função.usado ao chamar.

• 1. Bind é um atributo de Function.prototype na cadeia de protótipos de função. É uma função que modifica o ponteiro this, mescla os parâmetros e os passa para a função original, e o valor de retorno é uma nova função.
• 2. A função retornada por bind pode ser chamada através de new.Neste momento, o parâmetro fornecido é ignorado e aponta para o novo objeto gerado por new. A simulação interna implementa o novo operador.

concluir:

①

Primeiro implemente o mais simples fn.bind(context). Como mencionado anteriormente, binda função retornará uma função. Esta função thisé o que você passa context. Então podemos retornar uma callfunção que é chamada. Mas o que precisa ser observado aqui é que porque bindo método de chamada em si é fn.bind(context), então bindna verdade existe um dentro da função thiseste thisé fn, não contextconfunda com:

 

② Implementação fn.bind(context, p1, p2): Este requisito é muito simples, só precisamos bindpassar todos os parâmetros recebidos pela função, exceto o primeiro parâmetro, para a função retornada internamente, como segue

③

Na implementação fn.bind(context, p1, p2)(p3, p4), esse requisito é semelhante ao segundo requisito, exceto que a posição onde os parâmetros são recebidos passa a ser a bindfunção retornada, então basta passar os parâmetros da função retornada para ela this.call: 

7. Descreva o mecanismo Eventloop

O loop de eventos é uma forma de executar código de forma assíncrona, o que permite ao JavaScript lidar com eventos simultâneos em um ambiente de execução de thread único. Quando um evento assíncrono é encontrado, ele será colocado na fila de eventos EventQueue para aguardar a execução e será retirado e executado pelo Eventloop quando apropriado. EventLoop é um processo em execução contínua que verificará constantemente se o evento na fila de eventos precisa ser executado.Se O evento será retirado e executado até que não haja mais eventos na fila de eventos.

O mecanismo de loop de eventos nos ajuda a escrever código assíncrono eficiente sem nos preocupar com sincronização de threads e problemas de bloqueio, porque o mecanismo Javascript irá lidar com eles automaticamente.

8. Descreva resumidamente as diferenças entre MVC, MVP e MVVM

O nome completo do MVC é Model View Controller, que é a abreviatura de model-view-controller. É um modelo de design de software que organiza o código usando um método que separa a lógica de negócios, os dados e a exibição da interface. A lógica de negócios é reunida em um componente, e não há necessidade de reescrever a lógica de negócios enquanto melhora e personaliza a interface e a interação do usuário. O MVC foi desenvolvido exclusivamente para mapear funções tradicionais de entrada, processamento e saída em uma estrutura lógica de interface gráfica do usuário.

 Padrão MVP  : Model-View-Presenter; MVP evoluiu a partir do padrão clássico MVC. Suas ideias básicas são semelhantes. Controller/Presenter é responsável pelo processamento lógico, Model fornece dados e View é responsável pela exibição.

MVVM é a abreviatura de Model-View-ViewModel. É essencialmente uma versão melhorada do MVC. O MVVM abstrai o estado e o comportamento da Visualização, permitindo-nos separar a UI da visualização e a lógica de negócios. Claro, o ViewModel já fez essas coisas para nós: ele pode retirar os dados do Modelo e ajudar a lidar com a lógica de negócios envolvida na Visualização devido à necessidade de exibição de conteúdo. O WPF da Microsoft traz novas experiências técnicas, como Silverlight, áudio, vídeo, 3D, animação..., o que resulta na camada UI do software mais detalhada e personalizável. Ao mesmo tempo, no nível técnico, o WPF também traz novos recursos como Binding, Propriedade de Dependência, Eventos Roteados, Comando, DataTemplate, ControlTemplate e assim por diante. A origem do framework MVVM (Model-View-ViewModel) é um novo framework arquitetônico que evoluiu a partir do método de aplicação de combinação do padrão MVP (Model-View-Presenter) com WPF. Baseia-se na estrutura original do MVP e incorpora os novos recursos do WPF para lidar com mudanças cada vez mais complexas nas necessidades dos clientes.

9. Descreva a sequência de execução do ciclo de vida dos componentes pai e filho

1. Carregando e renderizando o processo
pai antes de criar-> pai criado-> pai antes de montar-> filho antes de criar-> filho criado-> filho antes de montar-> filho montado-> pai montado 2.
Processo de atualização do componente filho
pai antes de atualizar-> filho antes de atualizar-> filho atualizado->pai atualizado
3. Processo de atualização do componente pai
pai beforeUpdate->pai atualizado
4. processo de destruição
pai beforeDestroy->child beforeDestroy->filho destruído->pai destruído

10. Descreva o princípio da vinculação bidirecional de dados Vue

O princípio da ligação de dados bidirecional : usando "sequestro de dados" combinado com o modelo "editor-assinante", usando o método "Object.defineProperty ()" para sequestrar os setters e getters de cada propriedade e publicar mensagens aos assinantes quando os dados mudam ou acione o retorno de chamada de escuta correspondente.

Processo de implementação

Já sabemos que para implementar a ligação bidirecional de dados, devemos primeiro sequestrar e monitorar os dados, por isso precisamos configurar um Observador para monitorar todas as propriedades. Se o atributo for alterado, você precisará informar ao Observador do assinante para ver se ele precisa ser atualizado. Como há muitos assinantes, precisamos de um Dep de assinantes de mensagens para coletar especificamente esses assinantes e, em seguida, gerenciá-los uniformemente entre o Observador e o Observador. Em seguida, também precisamos de um analisador de instruções compilado para digitalizar e analisar cada elemento do nó, inicializar as instruções relevantes em um observador de assinante e substituir os dados do modelo ou vincular a função correspondente. Neste momento, quando o observador de assinante ao receber a alteração de o atributo correspondente, a função de atualização correspondente será executada para atualizar a visualização. Portanto, a seguir executamos as três etapas a seguir para obter a vinculação bidirecional de dados:

1. Implemente um ouvinte Observer para sequestrar e monitorar todas as propriedades. Caso haja alguma alteração, o assinante será notificado.

2. Implemente um observador de assinante que possa receber notificações de alteração de propriedade e executar funções correspondentes para atualizar a visualização.

3. Implemente um analisador, Compile, que possa varrer e analisar as instruções relevantes de cada nó e inicializar os dados do modelo e os assinantes correspondentes de acordo com a inicialização.

11. Como monitorar mudanças no array em vue2?

No Vue 2, a camada inferior serve para monitorar as mudanças no array, substituindo o método de protótipo do array.

Especificamente, ao chamar os métodos de mutação do array (como push, pop, shift, unshift, splice, sort e reverse), o Vue executará as seguintes etapas:

1. Chame o método do array original e execute as operações de mutação correspondentes no array.

2. Depois de realizar a operação de mutação, o Vue irá acionar uma notificação para notificar as dependências relacionadas (como visualizações) para atualização.

3. Durante o processo de notificação, o Vue percorrerá todos os observadores (Observer) do array e chamará seus métodos de atualização para atualizar as dependências relacionadas.

Dessa forma, o Vue pode capturar alterações no array em tempo real e atualizar as dependências relacionadas em tempo hábil, conseguindo assim monitoramento e resposta ao array.

Deve-se notar que o Vue 2 só pode detectar alterações no array por meio de métodos de mutação, mas não pode detectar alterações no array modificando diretamente um elemento do array ou usando métodos sem mutação (como filtro, concat, etc.). Se precisar monitorar essas alterações de array não mutadas, você pode usar a opção watch ou o método $watch para monitorar manualmente as alterações de array.

12. Como o vue-router define o roteamento dinâmico e como obter os parâmetros dinâmicos passados?

Definição: no arquivo index.js no diretório do roteador, adicione /:id ao atributo path. 

Use o params.id do objeto roteador. Por exemplo: this.$route.params.id

Obter parâmetros: $route  é um "objeto de informações de roteamento", incluindo caminho, parâmetros, hash, consulta, fullPath, correspondência, nome e outros parâmetros de informações de roteamento.

13. Descreva o que o NextTick faz no Vue?

Definição oficial: execute um retorno de chamada atrasado após o próximo ciclo de atualização do DOM. Use este método imediatamente após modificar os dados para obter o DOM atualizado.

As operações DOM realizadas na função de gancho criada() do ciclo de vida Vue devem ser colocadas na função de retorno de chamada de Vue.nextTick()

Usado Vue.nextTick()para obter o DOM atualizado.
Tempo de disparo: após os dados serem alterados no mesmo loop de eventos, o DOM conclui a atualização e Vue.nextTick()o retorno de chamada é executado imediatamente.