Шесть идей, которые помогут вам писать хороший код

внешний интерфейс

Это раздел о том, как писать хороший код, в моем «Руководстве по самообучению для начала работы с чрезвычайно упрощенными внешними интерфейсами».
это руководствоЦелится на«Дайте людям готовы войти в область переднего конца очень упрощенного пути обучения».
цель«Позвольте читателям выполнить основные требования к работе после обучения».
Материал написан на основе моего личного опыта
Если вам понравилось, пожалуйста, не скупитесь на лайки👍 и делайте репост 🚀
Ваша поддержка - моя самая большая поддержка и мотивация для обновления

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

В первые дни моей карьеры программиста среди книг по программированию, которые я читал, я больше склонялся к таким типам, как «Энциклопедия кода» и «Путь чистого кода», но я читал меньше книг, связанных с конкретными техническими деталями.

В этой главе я расскажу об основной логике написания хорошего кода.

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

Правила бойскаутов

Я впервые столкнулся с этой идеей в книге «Чистый код», и вся идея состоит всего в одном предложении:

Сделайте лагерь чище, чем когда вы пришли.

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

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

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

шесть простых идей

Я следую нескольким простым идеям о том, как писать код.

1 Очистить имя

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

Не требующий пояснений код сначала требует от вас четкого объявления переменных, методов и т. д. в коде.

Я не рекомендую называть их на английском языке, вы можете называть свои переменные или методы любым «символом», который вам нравится, если язык программирования это поддерживает.

Но обратите внимание на одну вещь,Пожалуйста, полностью опишите значение переменной или метода.

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

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


// bad
function change(bool) {
  value = bool;
}

function baDXFangBX() {
  kaiBX();
  fangDX();
  guanBX();
}

// good
function putElephantIntoFridge() {
  openFridge();
  putElephantIn();
  closeFridge();
}
​
function baDaXiangFangJinBingXiang() {
  daKaiBingXiang();
  fangJinDaXiang();
  guanBiBingXiang();
}
​
function 把大象放进冰箱() {
  打开冰箱();
  放进大象();
  关闭冰箱();
}

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

2 Простой семантический код

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

for (const item of array) {
  // do sth
}
​
array.forEach((item) => {
  // do sth
})

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

// first
const target = array.find(item => item === 0)
if (target) {
  // do sth
}
​
// second
const hasTarget = array.map(item => item === 0 ? item : undefined).filter(item => item).length > 0
if (hasTarget) {
  // do sth
}

Первый абзац означает найти элемент равный 0, и если да, то что-то сделать.

Вторая часть логики заключается в том, чтобы найти в массиве элементы, равные 0, отфильтровать и определить длину массива, и если длина отфильтрованного массива больше 0 (есть элементы, равные 0), сделать что-то.

Хотя функция двух кодов одинакова, но значение второго абзаца более «свернутых» некоторых.

3 Модульный код

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

метод разделения

Разделение многострочных операторов на методы является распространенным методом разделения. Это позволяет выразить логику нескольких строк кода в одном предложении.

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

function dealRoomData(data) {
  // ... other codes
  
  this.setCombineFlag(selectedRooms, fields);
  this.setCombineStatus(fields);
  this.emitSelectionChange();
  this.calculateCellWidth([]);
}

Выровнять код

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

Для метода, независимо от того, какой из следующих методов вы используете, все в порядке, в основном зависит от общего стиля проекта.

Но какой бы ни был, в нем подразумевается понятие «модуль».

Для первого,fuctionинициалыfда и}Выровненный, во всей этой области, т.е.fooлогика.

Второй также находится между двумя фигурными скобками. (ПС:jsВы столкнетесь с ошибками, вызванными автоматическим завершением точек с запятой, поэтому первым рекомендуется первый)

// first
function foo() {
  // other codes
}
​
// second
function foo()
{
  // other codes
}

То же самое верно и для меток.В закрытой области содержится содержимое той же функции.

<component-name
  :disabled="disabled"
  class="some-classes"
  :value="value"
  @change="handleChange"
>
  <other-component></other-component>
  <other-component></other-component>
</component-name>
​
<component-name
  :disabled="disabled"
  class="some-classes"
  :value="value"
  @change="handleChange"
/>
<other-component></other-component>
<other-component></other-component>

Если она есть в форме ниже, по крайней мере, на мой взгляд, я хочу найти ее всю сразуcomponent-nameРаздел свойств этого тега менее интуитивно понятен.

В голове мне нужно сравнить эту область и понять: «О, этот кусок кода вместе».

// first
<component-name
  :disabled="disabled"
  class="some-classes"
  :value="value"
  @change="handleChange"/>
<other-component></other-component>
<other-component></other-component>
​
// second
<component-name
  :disabled="disabled"
  class="some-classes"
  :value="value"
  @change="handleChange">
  <other-component></other-component>
  <other-component></other-component>
</component-name>

То же самое верно для вызовов функций и JSX, я позволю себе(а также)Две круглые скобки выровнены, чтобы сформировать область, чтобы «заключить» одну часть.

this.selectedRooms.forEach((block) => {
  block.children.forEach((room) => {
    this.resetRowPrice(room);
  });
});
​
function isMoreThanCurrentDate() {
  return (
    time.getTime() > new Date().getTime()
  );
}

Пусть каждая строчка кода имеет свое значение

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

Например код ниже.

Для свойств компонента каждая строка представляет собой настройку определенного свойства, просто просмотрите ее по вертикали, и сразу будет ясно, какие свойства установлены.

В вызове метода также можно интуитивно увидеть, какой контент передается в первом параметре.

<component-name
  :disabled="disabled"    // 设置禁用属性
  class="                 // 设置class
    class1
    class2
  "
  :value="value"          // 绑定 value
  @change="handleChange"  // 绑定 change 事件
/>

renderSomeComponent(
  id,
  getName(someCondition, anotherCondition),
  age,
  icon,
  getAddress(id, name, age)
)

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

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

<component-name :disabled="disabled" class="class1 class2" :value="value" @change="handleChange">
  
renderSomeComponent(id, getName(someCondition, anotherCondition), age,
  icon, getAddress(id, name, age))
renderSomeComponent(anotherId, getName(someCondition, anotherCondition), age,
  icon, getAddress(anotherId, name, age))

4 Соответствующие аннотации

Когда в коде можно четко выразить то, что он делает, нет необходимости в дополнительных комментариях для его объяснения, но это не означает, что комментарии никогда не должны быть написаны.

Код может только донести до читателя, что он делает, но зачем это делается, можно объяснить читателю только через комментарии.

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

// 计算表格列宽。
// 防止单元格内容因宽度不够，被遮挡的问题。
calculateCellWidth(currView) {
  // 计算单元格列宽代码
  this.checkTableWidthGap();
},
  
 // 在 body 宽度与表头宽度不足一个单元格时，将剩余宽度补足。
checkTableWidthGap() {
  // 列宽补足代码
},

Так же есть комментарии для общения между программистами 🤪.

/***
 * 这个公司没有年终奖的,兄弟别指望了,也别来了,我准备辞职了
 * 另外这个项目有很多*Bug* 你坚持不了多久的,拜拜!
 */

5 Единственная ответственность

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

При следовании такой простой концепции все, от одной строки кода до целого проекта, имеет свое значение.

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

6 Уменьшите количество повторений

Когда есть повторяющиеся части кода, пора подумать о разделении.

Связанные свойства и методы разделены вместе, то естьДобрый; Шаблон + логика + стиль разделены вместе, то естькомпоненты; Код, относящийся к функции, разбит на файл, которыйфайл модуля.

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

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

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

Здесь всего две строки, я встречал семь или восемь строк кода, например, при изменении логики значения становитсяi + 1, то все части значения необходимо изменить один раз.

for (let i = 0; i < people.length; i++) {
  somebody.id = people[i].id;
  somebody.name = people[i].name;
}

Метод разделения тоже одинаков: если нужно изменить какой-то кусок одной и той же логики кода, то все места должны быть изменены один раз.

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

Метрики качества кода

В конце я хотел бы дать вам список этих 7 метрик для измерения качества кода.

Существует 7 общепринятых стандартов:

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

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

Эпилог

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

Сфокусируйся наЯ получаю последние новости этого урока вовремя
Если у вас есть что-то, что вы хотите сообщить, вы можете оставить это в области комментариев или добавить мой vx:vWetoria.
Оставь свой, если хочешьНравится ❤️Приходи и поддержи меня.
Или сделать репост, чтобы его увидело больше людей. (●'◡'●)ﾉ♥

Категории