О том, как элегантно написать код, который не будет побит

JavaScript
О том, как элегантно написать код, который не будет побит 
参照github明星项目之一 `nocode`，给出以下建议。

No Code

No code is the best way to write secure and reliable applications. Write nothing; deploy nowhere.

Getting Started

Start by not writing any code.

This is just an example application, but imagine it doing anything you want. Adding new features is easy too:

The possibilities are endless.

Building the Application

Now that you have not done anything it's time to build your application:

Yep. That's it. You should see the following output:

Deploying

While you still have not done anything it's time to deploy your application. By running the following command you can deploy your application absolutely nowhere.

Я не знаю, забьют ли вас до смерти ваши коллеги, но вас забьет до смерти ваш начальник, это точно.

Ну а выше это просто шутка, вот прикрепилnocodeАдрес, вы можете посмотреть его, когда у вас будет время.

Теперь переходите к делу. Много раз мы сталкиваемся с ситуацией изменения кода других людей или добавления функций в код другой стороны.Я думаю, что большинство людей должны быть такими в то время.


Так как же максимально защитить себя?

  1. Спасибо моим коллегам, что не убили меня, я обычно кормлю больше вкусняшек.
  2. Пишите хороший код.

Я лично надеюсь, что вы сможете успокоиться и внимательно попробовать его.Если вы что-то узнали, пожалуйста, поставьте автору большой палец вверх и дайте мне знать, что есть и другие, кто получил знания отсюда. Как ни банально это может быть, также возможно, что вы тратите впустую восемь драгоценных минут своей жизни.

поклясться в завете

спецификация языка

Цитировать

const и let оба относятся к блоку, var относится к функции

  • Используйте const для всех неизменяемых ссылок, пусть для изменяемых ссылок, не используйте var
// bad
var a = 1
var b = 2
if (b < 10) {
  b += 1
}

// good
const a = 1
let b = 2
if (count < 10) {
  count += 1
}
  • связанное назначение Цепное присваивание легко ухудшит читабельность кода, и было принято решение запретить использование цепного присваивания.
不推荐

let a = b = c = 1
推荐

let a = 1
let b = 1
let c = 1

объект

  • Пожалуйста, используйте литеральные значения для создания объектов
// bad
const a = new Object{}

// good
const a = {}
  • Пожалуйста, используйте сокращение для значений свойств объекта
  • Добавьте запятую в конце каждой строки свойств объекта, см. ниже Запятые в конце
  • После объявления переменной добавляется точка с запятой.Если соблюдается спецификация Стандарта, этот пункт игнорируется.
  • Если существует единая спецификация, пожалуйста, игнорируйте два вышеуказанных.
const job = 'FrontEnd';

// bad
const item = {
  job: job
}

// good
const item = {
  job,
};

Вы никогда не можете гарантировать, что этот объект будет иметь дополнительные свойства, поэтому горячо помогите своим коллегам расставить запятые в каждой строке~
В противном случае, если ваш коллега случайно включит проверку кода, он, скорее всего, вас побьет.

множество

  • Создайте массив с литеральными значениями
  • При добавлении элементов в массив используйте метод push
// bad
const items = new Array();
items[items.length] = 'test';


// good
const items = [];
items.push('test');
  • Используйте оператор распространения... для копирования массивов
const items = [];
const itemsCopy = [];
const len = items.length;
let i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = [...items];

Эм. . . Я не думаю, что должен быть плохой способ написать это сейчас. . возможно?

  • Используйте forEach, some, every и т. д. вместо циклов for.
const items = [];
const len = items.length;

// bad
for (i = 0; i < len; i++) {
 // todo something for items[i]
}

// good
items.forEach((item, index) => {
    // todo something for items
});
  • При использовании метода карты массива используйте оператор return, если это один оператор оператора, вы можете опустить return
// good
[1, 2, 3].map(x => {
  const y = x + 1
  return x * y
});

// good
[1, 2, 3].map(x => x + 1);
  • При использовании метода сокращения массива присвойте начальное значение и используйте оператор return.Если это один оператор оператора, вы можете опустить return
// good
const flat = [[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item)
  return flatten
}, []);

Я знаю, что здесь есть большие парни, но что, если сюда примешается что-то странное?

  • При использовании метода фильтра массива используйте единственное суждение, чтобы гарантировать, что он всегда будет возвращать false/true в конце
// bad
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee'
  } else {
    return false
  }
})

// good
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee'
  }
  return false
})

присваивание деструктуризации

  • Используйте назначение деструктурирования, когда вам нужно использовать несколько свойств объекта
// bad
function getFullName (user) {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}

// good
function getFullName (user) {
  const { firstName, lastName } = user

  return `${firstName} ${lastName}`
}

// better
function getFullName ({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}
  • Когда требуется несколько значений массива, используйте назначение деконструкции.
const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr
  • Когда функция требуется вернуть несколько значений, используйте деконструкцию объекта, а не массив деконструкции
// bad
function doSomething () {
  return [top, right, bottom, left]
}

// 如果是数组解构，那么在调用时就需要考虑数据的顺序
const [top, xx, xxx, left] = doSomething()

// good
function doSomething () {
  return { top, right, bottom, left }
}

// 此时不需要考虑数据的顺序
const { top, left } = doSomething()

Классический случай:

// 在使用callback形式的时候，我经常会想，我定义的第一个参数是err还是data。。。
function handle(){
    // todo something
    if(err){
        return [null,err];
    }
    // todo something
    return [data,err];
}

function handle1(){
    // todo something
    if(err){
        return [err,null];
    }
    // todo something
    return [err,data];
}

нить

  • Строки заключаются в одинарные кавычки ''
// bad
const department = "JDC"

// good
const department = 'JDC'
  • Если строка слишком длинная, не используйте символ конкатенации строк для переноса \, а используйте +
const str = '一键三连～' +
  '键三连～ 三连～ ' +
  '连～'
  • При программном создании строк используйте шаблонные строки.
const test = 'test'

// bad
const str = ['a', 'b', test].join()

// bad
const str = 'a' + 'b' + test

// good
const str = `ab${test}`
  • Используйте стандартные методы при чтении символов в строке
// 优先使用 
string.charAt(3) 

// 而不是 
string[3]

функция

  • Не используйте аргументы, при желании используйте...

arguments - это просто массив, похожий на массив, а ... - настоящий массив

// good
function test (...args) {
  return args.join('')
}
  • Не изменять значение параметров функции
// bad
function test (opts) {
  opts = opts || {}
}
// bad
function test1 (opts) {
  if(!ops){
      ops = {};
  }
}

// good
function test (opts = {}) {
  // ...
}

Стандарты кодирования

однострочный кодовый блок

  • Используйте пробелы в однострочных блоках кода
// 不推荐
function foo () {return true}
if (foo) {bar = 0}

// 推荐
function foo () { return true }
if (foo) { bar = 0 }

С обеих сторон фигурных скобок должны быть пробелы, но не в конце каждой строки.
Лично не рекомендую однострочный блок кода, потому что всегда будут случаи, когда к нему добавляется инструкция

стиль скобки

В программировании стиль фигурных скобок тесно связан со стилем отступов, и существует много способов описать положение фигурных скобок относительно блоков кода. В JavaScript есть три основных стиля:

// One True Brace Style
if (foo) {
  bar()
} else {
  baz()
}

// Stroustrup
if (foo) {
  bar()
}
else {
  baz()
}

// Allman
if (foo)
{
  bar()
}
else
{
  baz()
}

Рекомендуется использовать первый стиль, обратите внимание на пробелы по обеим сторонам фигурных скобок и не добавляйте пробелы в начале и конце строки.

именование переменных

При именовании переменных мейнстрим делится на два лагеря: верблюжий регистр (variableName) и подчеркивание (variable_name).

Обычные переменные и формальные параметры названы в верблюжьем регистре.
Поскольку он включает в себя внутреннюю разработку, он дополняется соглашением, согласно которому параметры базы данных именуются символами подчеркивания.

запятая

  • замыкающая запятая
    Завершающие запятые в литералах объектов допустимы в ECMAScript 5, но в IE8 (режиме документа, отличном от IE8) возникает ошибка при наличии замыкающих запятых.

Пример завершающей запятой:

var foo = {
  name: 'foo',
  age: '22',
}

Преимущество завершающих запятых заключается в том, что они упрощают добавление или удаление элементов из объектов и массивов.Нам нужно только изменить вновь добавленные строки, не увеличивая количество дифференцированных строк кода.

По соглашению используется завершающая запятая, когда последний элемент или атрибут находится в строке, отличной от закрывающей скобки ] или }.
Завершающие запятые запрещены, когда они находятся на одной строке.

  • запятая

Пробел до и после запятой может улучшить читаемость кода Команда соглашается использовать пробел после запятой и не использовать пробел перед запятой.

// 不推荐
var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2

// 推荐
var foo = 1, bar = 2

Запятые должны стоять в текущей строке

Пространства для вычисляемых свойств

Пробелы запрещены в вычисляемых свойствах объектов

Рекомендуемое прямое использование, когда имя атрибута не содержит специально обработанных строк и т. д.obj.foo

// 不推荐
obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

// 推荐
obj['foo']

завершающая новая строка

Наличие завершающих строк в непустых файлах является распространенным стилем UNIX, и его преимущество заключается в том, что он удобен для объединения и добавления файлов без прерывания командной строки. В ежедневных проектах преимущество сохранения завершающих строк новой строки заключается в том, что это может уменьшить конфликты кода во время контроля версий.

不推荐

function func () {
  // do something
}
推荐

function func () {
  // do something
}
  // 此处是新的一行

то есть каждый файл содержит пустую строку в конце

отступ

Последовательный отступ кода — профессиональное качество инженера и гарантия снижения конфликтов слияния.
Соглашение состоит в том, чтобы использовать пробелы для отступа, а два пробела используются для отступа.

Вкладку можно установить на 2 пробела, установив IDE

отступ ключ-значение для литералов объектов

Между двоеточием и значением литерала объекта по соглашению есть пробел.

// 不推荐
var obj = { 'foo' : 'haha' }

// 推荐
var obj = { 'foo': 'haha' }

пространство оператора

Требуется добавить пробелы до и после условного оператора

// 不推荐
var sum = 1+2

// 推荐
var sum = 1 + 2

Сделать заглавной первую букву конструктора

Первая буква обычного конструктора должна быть заглавной, чтобы отличить конструктор от обычной функции.

Использование заглавных букв в имени класса также определено ~

// 不推荐
var fooItem = new foo()

// 推荐
var fooItem = new Foo()

пустая строка

Пустые строки полезны для разделения логики кода, но слишком много пустых строк занимают место на экране и ухудшают читаемость.

  • По соглашению максимальное количество последовательных пустых строк равно 2.
  • Согласовано, что первая строка внутри функции не является пустой строкой.
  • Используйте пустые строки для разделения функций

Космос

  1. С обеих сторон фигурных скобок должны быть пробелы, за исключением начала и конца каждой строки.

function foo () { return true } if (foo) {
  bar()
} else {
  baz()
}

  1. Добавляйте пробелы до и после оператора

const sum = 1 + 2

  1. Добавляйте пробелы после запятых и двоеточий

const cat = { name: nico, color: 'white' }

  1. комментарии на уровне строк//добавить пробелы до и после

const a = 1; // определяем переменную a

гид по стилю

Хороший стиль программирования может напрямую влиять на чувства коллег

Примечания

Обязательно пишите заметки!
Обязательно пишите заметки!
Обязательно пишите заметки!

Независимо от того, какой фреймворк вы используете, какую IDE используете, используете ли вы ts или нет, помните:

  • Должны использоваться аннотации файлов, классов, функцийJSDocспецификация, используйте /*содержание/, метод // xxx не должен использоваться.
  • Для однострочного комментария внутри метода начните новую строку над закомментированным оператором, используйте // comment.
  • Все поля типа перечисления должны быть аннотированы, описывая назначение каждого элемента данных.
  • Лучше использовать китайские аннотации, чтобы проблема была понятна
  • Хорошее название, структура кода не требует пояснений, не используются бессмысленные комментарии.

Независимо от того, насколько вы заняты, обязательно напишите записку, иначе через несколько месяцев вы даже не будете знать, о чем думаете. . .

/**
 * 处理所有关于数值计算的问题
 * 
 * @author XXX
 */
 
/**
 * 求和函数
 * @param { number } a 
 * @param { number} b
 * @returns {number} sum
 */
function sun(a, b) {
  return a + b;
}

Функция извлечения

  • Максимально возможное извлечение функциональных функций из одной функции
    • Операции с различными типами данных, запрашиваемые при загрузке страницы, извлекаются в функции соответственно ->, чтобы гарантировать, что каждый запрос может гибко изменять логику
    • Операции состояния, которые необходимо установить при уничтожении страницы, извлекаются в функции -> могут обеспечить унифицированную запись, чтобы предотвратить пропуск некоторых операций.
    • Операции, которые контролируют состояние компонентов, извлекаются в функции -> легко перехватывать и добавлять операции в процессе.
  • Не пишите много операторов непосредственно в любой функции жизненного цикла фреймворка -> это действительно будет побито.
  • Инкапсулируйте возможные изменения в функции -> требования всегда меняются, знаете ли.
  • В структуре данных следует учитывать будущее расширение функции -> то же, что и выше

Условные операторы

  • Условные операторы должны иметь фигурные скобки
// bad
function test (opts) {
  if(opts.length > 0)
    // todo something
  // todo other
}


// good
function test (opts) {
  if(opts.length > 0) {
      // todo something
  }
  // todo other
}

Определить класс инструмента

Определите свой собственный класс инструментов, постарайтесь не вызывать напрямую сторонние классы инструментов в бизнес-коде.
Такие как:

  • Обработка строк: определить, соответствует ли строка спецификации
  • Определите, является ли это объектом json

Совет: Пожалуйста, напишите комментарий и расскажите всем о вашей функции, иначе -> почти то же самое, как если бы вы ее не писали

Комментируйте код экономно.

  • Разработайте выше, а не просто комментируйте.
  • Устаревшие методы или устаревшие файлы должны быть прокомментированы или удалены.

Иногда я сталкиваюсь с ошибкой после изменения кода в течение длительного времени, и результат не изменится, а затем я с удивлением обнаруживаю, что этот метод был заброшен. . .

Наконец, рекомендуемый метод третий: ts/eslint включить проверку перед запуском, если не пройдет, то пройдет

Пожалуйста, используйте его в новых проектах, или вы побьете себя

Вышеизложенное, следуйте по мере необходимости, самое главное, чтобы все были рады писать код

В будущем я буду добавлять новые места, где я хочу поругать людей, пожалуйста, дайте мне три клика подряд~~~

Связанные серии:Путешествие по построению фундамента с нуля (отличное, постоянное обновление ~)

Справочная документация:
Дорогой.Bump.IO/docs/is/cod…
Руководство по Java-разработке на Alibaba

Категории