Una nueva mirada al estilo de código

¿Cómo puede el conocimiento de la neuropsicología ayudar a un programador a diseñar códigos? Antes de comenzar a programar, estudié neuropsicología durante mucho tiempo. Posteriormente, este conocimiento me ayudó a lograr altos resultados en el desarrollo en un corto período de tiempo.

En este artículo quiero compartir mi experiencia y enfoque para el estilo de código. Consideraremos la estilización en el lado de la programación, y luego tocaremos la neuropsicología para una comprensión más profunda del proceso y su grado de importancia para el desarrollador. El año pasado, estuve trabajando en Secreate, donde estoy desarrollando aplicaciones móviles usando el marco React Native, por lo que los ejemplos de código en este artículo estarán en Javascript. El conocimiento adquirido en este artículo se puede aplicar fácilmente a cualquier lenguaje de programación. Al final del artículo encontrará ejemplos útiles de estilo de código. ¡Disfruta leyendo!

¿Qué es la estilización?

code style. — , : , , , . , -. .

:

import {SomeClass} from ‘some/file’

:

import { SomeClass } from ‘some/file’

:

import {SomeClass, someFunction, someConst, AnotherClass       } from ‘some/file’

:

import {
  SomeClass,
  somefunction,
  someConst,
  AnotherClass,
       
} from ‘some/file’

:

function foo() {
  some code...
}

:

function foo ()
{
  some code…
}

:

condition ?
some very long long long long long expression :
another expression

:

condition
  ? some very long long long long long expression
  :  another expression

. , , , .

. , . . , . , , , . . , . . . , . — !

? , . . , , . ? , , .

, . . . , , . . , ( ).

. , . . , . . : , , . . , . , .

. , , . , . , ( ). ( ). , , . , , .

. , — , , . - . — . , , . - , , . , . .

, . , , . , , , . , “ ”.

, . , , . - , code style.

, . , , . , , . . , . , . .

, . , .

. , . ( ) .

2 . , .

:

<View>
  <Text>Some text</Text>
  <TouchableOpacity>
    <Text>Title</Text>
  <TouchableOpacity/>
</View>

Animated.timing(
  animatedValue,
  {
    toValue: someValue,
    duration: someDuration,
    anotherOptions,
  },
)

, .

const object = { field: value, anotherField: value }

, , .

const object = {
  field: value,
  anotherField: value,
  moreFields,
}

. .

:

function someFunction() {
  some code
}

Separe las palabras clave con una línea en blanco.

Ejemplo:

function sum(a, b) {
  const result = a + b

  return result
}

O:

if (condition) {
  do this

} else {
  do that
}

 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

Separa las declaraciones de funciones y acciones de diferentes tipos con una línea en blanco

Ejemplo:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

O:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

Secuencia de elementos

Sigue una secuencia estricta de elementos.

Un ejemplo de una clase de extensión React.Component:

1. Estático.
2. Campos de clase.
3. Constructor
4. Estado.
5. Funciones del ciclo de vida.
6. Funciones secundarias
7. Manejadores de acción.
8. Funciones de renderizado de ayuda.
9. Hacer.

Separe la etiqueta de cierre automático con un espacio.

Ejemplo:

<View style={styles.underline} />

Transfiere accesorios a la siguiente línea si hay más de uno

Ejemplo:

<TouchableOpacity
  style={styles.button}
  onPress={this.handlePress}
>
  <Text>Title</Text>
</TouchableOpacity>

Condiciones largas

Divida las condiciones largas en varias líneas, comenzando cada línea con un carácter condicional.

Ejemplo:

if (
  condition
  && anotherCondition
  && (
    value < anotherValue
    || someCondition
  )
) {
  do something
}

O:

<View>
  {
    this.state.isButtonVisible
      ? (
        <TouchableOpacity>
          <Text>Title</Text>
        </TouchableOpacity>
      )
      : null
  }
</View>

Separar caracteres condicionales con espacios

Ejemplo:

const sum = a + b

O:

return a < b ? a : b

O:

const object = {
  field: value,
  ...value > 0 ? { value } : {},
}