Registro de estágio front-end - especificação de código e convenção de codificação e otimização de desempenho

Razão para escrever este artigo        

Este artigo é para registrar alguns problemas de especificação de código encontrados no projeto após a entrada na empresa, as especificações ensinadas pelo líder e algumas especificações de código que aprendi em particular.As especificações de código são muito importantes! !

Três dias depois de entrar na empresa, comecei a entrar em contato com o projeto. O projeto é de desenvolvimento ágil. A tarefa do nosso departamento é iterar o projeto para a próxima versão estável. Foi aí que o pesadelo começou. Depois que comecei a iterar a versão, finalmente entendi por que esses programadores experientes valorizam tanto as especificações de código. Como eles não prestam atenção às especificações de código, realmente leva muito tempo para entender o que os outros escreveu! ! !

A maior parte deste projeto não tem comentários , nomes de classes comuns (como "main", "container"), indentação inconsistente , nomes estranhos de variáveis ​​e nomes de métodos (todos os nomes de métodos como "OK") Espere, ainda há muitas perguntas. Em seguida, compartilharei algumas especificações de código que aprendi até agora, esperando ajudar a todos.

1. Convenção de nomenclatura Sass & BEM

Sass site oficial: Poke me to go

Sass (também chamado scss) é muito fácil de usar. É muito mais conveniente escrever do que css. Depois disso, a maior parte do trabalho deve ser feito com sass. Começar também é muito simples. Eu usei sass para projetos da empresa, então Passei dois dias para Depois de estudar o site oficial, dá para entender tudo que foi usado nos projetos básicos.

BEM: B (Bloco), E (Elemento), M (Modificador), é um método de nomenclatura CSS front-end proposto pela equipe Yandex. Geralmente, é nomeado assim: B__E-M, diretamente no exemplo:

Por exemplo, eu tenho uma estrutura html assim: o primeiro div que escrevi é Test.Na empresa, geralmente escrevemos ou escrevemos o nome do arquivo desse arquivo de acordo com a função específica.

    <div class="Test">
        <div class="Test__fiflter">
            <div class="Test__fiflter-content">
            </div>
        </div>
        <div class="Test__searchResult"></div>
    </div>

Então você pode combinar Sass para escrever estilos:

    <style scoped lang="scss">
        .Test{
            /* todo */
            &__fiflter{
                /* todo */
                &-content{
                    /* todo */
                }
            }
            &__searchResult{
                /* todo */
            }
        }
    </style>

Esta é apenas a função mais básica, o objetivo é tornar a estrutura mais clara e conveniente ao escrever estilos, mas o BEM não pode ser nomeado a qualquer momento. Ele deve ser usado quando a estrutura tiver um relacionamento estrutural em cascata claro e depende sobre a situação em outros momentos.

"&" é a função mais básica do sass. Sass desempenha um papel importante no projeto, como definir variáveis ​​globais de estilo. Nunca entendi porque é tão complicado escrever um estilo para defini-lo como global, como como definir uma cor " "branco" é escrito como "cor primária". Mais tarde, o líder me disse que é para conveniência de manutenção ao iterar posteriormente. e código sustentável !

O Sass tem muitas funções. Sugiro que todos acessem o site oficial para aprender duas vezes. Se quiser usar depois, mesmo que esqueça de dar uma olhada no site oficial, será muito rápido!

2. Algumas especificações básicas do código JS

Explicação: A maioria deles é aprendida no site oficial do W3C e no livro ruby .

1) Nomes de variáveis ​​e nomes de funções são escritos em maiúsculas;        

2) Use substantivos para nomes de variáveis;       

3) O nome da função começa com um verbo; como: getName(), isDisabled()

4) O valor constante é capitalizado e conectado com um sublinhado;

5) Deixe espaços ao redor dos operadores;       

6) Use 4 espaços para recuo do código, não use tabulações;

7) Os comentários devem ser escritos nos seguintes lugares: funções e métodos, grandes blocos de código, algoritmos complexos;

8) Transparência do tipo variável; como let flag = false // valor booleano let name = "" // string

3. Convenções de codificação

1) Não declare variáveis ​​globais

• Por um lado, variáveis ​​globais e funções globais podem ser substituídas, portanto, não é seguro.
• Por outro lado, está relacionado ao mecanismo de coleta de lixo do JS . Variáveis ​​globais são variáveis ​​sob a janela. Contanto que a janela em si não seja eliminada, as variáveis ​​globais não desaparecerão, então um "vazamento de memória" é causado, como o de uma de suas variáveis. Você só quer usar o valor uma vez e, se o declarar como um valor global, ele sempre existirá e ocupará memória. O mecanismo de coleta de lixo não reciclará variáveis ​​globais regularmente, mas apenas reciclar variáveis ​​locais.
• Outro ponto é mencionado em "Evitando pesquisas globais" no desempenho.

Portanto , use variáveis ​​locais em vez de variáveis ​​globais .

2) Use const, deixe em vez de var

No projeto, muitas vezes vejo que o código escrito pelos predecessores basicamente usa let e const, e raramente usa var.

Todos nós conhecemos suas diferenças. Por exemplo, let e const têm escopo de nível de bloco e var tem escopo de função. No entanto, eu só conhecia "esta frase" antes e não entendia para que ela servia. Agora deixe-me dizer-lhe.

• Há também uma parte da razão para o mecanismo de coleta de lixo, porque const e let estão relacionados ao escopo de nível de bloco, o mecanismo de coleta de lixo pode encontrar as variáveis ​​declaradas por essas duas palavras-chave anteriormente e reciclá-las (porque na maioria dos casos o bloco -level escopo termina antes do escopo da função).
• Use const primeiro, deixe o segundo. Não sei se você conhece a análise de código estático. Usar const é benéfico para as ferramentas de análise de código estático para nos ajudar a analisar o código. Quando sabemos que um valor será alterado no futuro, usamos let, que é muito útil para inspeção de código posterior.

Essas convenções de codificação ajudam a melhorar o desempenho, especialmente o hábito de usar var deve ser alterado.

3) Não novo objeto ()

Imagem do site oficial do W3C

razão:

•  new Object() é essencialmente uma chamada de método, então você precisa encontrar esses Arrays, RegExps, etc. termina. Tão demorado.
• New String, Number e Boolean retornam suas instâncias correspondentes, que podem ser entendidas observando os tipos impressos abaixo:

          let obj = new Number('25')
          console.log(typeof(obj)) // object
          let obj1 = Number('25')
          console.log(typeof(obj1)) // number
  
          let str = new String('123') 
          console.log(typeof(str)) // object
          let str1 = String('123')
          console.log(typeof(str1)) // string
  
          let bool = new String(true)
          console.log(typeof(bool)) // object
          let bool1 = Boolean(true)
          console.log(typeof(bool1)) // boolean

• Existe outro aspecto da "minimização de instrução", que será mencionado na performance abaixo.

4) Não use eval() e with()

• A função eval() é usada para executar texto como código, definitivamente não é segura, não a use!
• Pessoalmente, acho que a função with é inútil, pois facilita principalmente o uso de uma determinada variável, mas o uso de variáveis ​​locais também pode obter o mesmo efeito. A instrução with criará seu próprio escopo, o que aumentará a cadeia de escopo no código, portanto, é melhor não usá-la!

As convenções de codificação mais importantes são tão importantes por enquanto, e as novas serão atualizadas no futuro.

5) Não atribua continuamente

Por exemplo , deixe a = b = c = 1;

Esta linha de código atribui 1 a a, b e c, mas b e c serão declarados como variáveis ​​globais.

4. Otimização de desempenho

1) Simplifique a instrução de loop

Essa otimização não é aplicável apenas ao JS, qualquer linguagem pode acelerar fazendo isso. Eu também vi quando vi os grandões fazendo otimização quando eles escovaram o botão liga / desliga. Em um loop for, toda vez que o loop é executado, cada instrução no loop é executada .

for(let i = 0; i < arr.length； i++)； 

Esta instrução de loop for obterá o comprimento de arr todas as vezes, portanto, repetirá as coisas, portanto, deve ser modificada:

deixe eu;

deixe len = arr.comprimento;

for(i = 0; i < len; i++);

Isso requer apenas uma visita. Na verdade, qualquer valor como esse que precise ser usado mais de duas vezes deve ser armazenado em uma variável separada, o que agilizará a execução.

2) As declarações são minimizadas

Cada linha de código JS precisa ser analisada pelo mecanismo JS, e atingir a meta com a menor quantidade de código é o que os desenvolvedores desejam.

Os dois exemplos a seguir: Ao declarar arrays e objetos, uma linha de código substitui as quatro linhas de código acima.

// bad  new object
let arr = new Array(3)
arr[0] = 1
arr[1] = 2
arr[2] = 3

// good 字面量方式
let arr = [1, 2, 3]

// bad
let student = new Object();
student.name = "xx";
student.age = 11;
student.sayHello = function(){ console.log("Hello") };

// good
let student = {
    name:"xx",
    age:11,
    sayHello:function(){
        console.log("Hello")
    }
};

Declarar variáveis:

// bad
let name = "xxx";
let name1 = "zzz";
let name2 = "ccc";

// good
let name  = "xxx", 
    name1 = "zzz",
    name2 = "ccc"; 

3) Conscientização do escopo — evite pesquisas globais

Obrigado Ruby Books! Eu nunca pensei sobre este problema.Usar variáveis ​​globais e funções globais é definitivamente mais lento do que local, porque acessar variáveis ​​globais requer uma busca de escopo camada por camada, e o escopo global sempre será encontrado.

Dê um exemplo de vue:

Quando você define um estado como nome em vuex, se quiser obter esse estado no componente, deve obtê-lo diretamente assim:

this.$store.state.name, toda vez que você usar um ponto, você deve procurar o escopo correspondente. Se você também usar o módulo, será mais problemático escrever. Se você adicionar o nome do módulo como teste, então o valor no componente deve ser assim Pick:

this.$store.test.state.name, que é ainda mais problemático.

Pense em escrever uma lista tão longa toda vez que um valor é obtido, o que não é apenas difícil de escrever, mas também consome desempenho . Então vuex fornece uma solução para pegarmos o valor assim:

Use mapState, então para pegar esse valor em vuex depois, basta usar "name" diretamente.

computed:{
    ...mapState({
        name: (state) => state.test.name
    })
}

Em JS, basta usar variáveis ​​locais para salvar, então você precisa pegar o escopo de pesquisa global uma vez. Então, depois de aprender JS, é realmente muito mais fácil entender os princípios subjacentes do Vue.

Se houver algo errado, espero que vocês possam me corrigir muito!