Переводчик: Front-end Xiaozhi
оригинал:Dev induct.com/blog post/22…
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
Введение
Если вы сосредоточитесь на самом коде и на том, как он написан, а не на том, работает ли он, тогда вы будете писать код определенного калибра. Профессиональные разработчики будут писать код для себя в будущем и для «других», а не только тот код, который работает сегодня.
Исходя из этого, лаконичный код можно определить как не требующий пояснений, простой для понимания и легко изменяемый или расширяемый.
Следующий список - хороший способ написать, только для справки, конечно, если у вас есть лучший способ, добро пожаловать, чтобы оставить сообщение.
Если вы хотите читать больше качественных статей, нажмите [Блог GitHub][1], и каждый год вас ждут сотни высококачественных статей!
1. Строгая проверка типов
использовать===заменять==
// 如果处理不当，它会极大地影响程序逻辑。这就像，你想向左走，但由于某种原因，你向右走
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false
// 例子
const value = "500";
if (value === 500) {
console.log(value);
// 条件不成立，不会进入
}
if (value === "500") {
console.log(value);
// 条件成立，会进入
}
2. Переменные
Назовите переменные хорошо известным и осмысленным образом, чтобы, увидев их, их было легко найти и понять.
Плохой способ:
let daysSLV = 10;
let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
ok = true;
}
Хороший способ:
const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();
...
const isUserOlderThanAllowed = user.age > MAX_AGE;
Не добавляйте в имена переменных лишних нежелательных слов.
Плохой способ:
let nameValue;
let theProduct;
Хороший способ:
let name;
let product;
Не сокращайте переменный контекст.
Плохой способ:
const users = ["John", "Marco", "Peter"];
users.forEach(u => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
// 当上面代码很多的时候 ，这 `u` 是什么鬼
register(u);
});
Хороший способ:
const users = ["John", "Marco", "Peter"];
users.forEach(user => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
register(user);
});
Не добавляйте ненужный контекст.
Плохой способ:
const user = {
userName: "John",
userSurname: "Doe",
userAge: "28"
};
...
user.userName;
Хороший способ:
const user = {
name: "John",
surname: "Doe",
age: "28"
};
...
user.name;
3. Функция
Используйте длинные описательные имена. Учитывая, что функция выражает какое-то поведение, имя функции должно быть глаголом или фразой, указывающей на ее намерение и назначение аргументов. Имена функций должны описывать то, что они делают.
Плохой способ:
function notif(user) {
// implementation
}
Хороший способ:
function notifyUser(emailAddress) {
// implementation
}
Избегайте использования большого количества параметров. В идеале функция должна указывать два или меньше аргументов. Чем меньше параметров, тем проще тестировать функцию, и объекты можно использовать для большего количества параметров.
Плохой способ:
function getUsers(fields, fromDate, toDate) {
// implementation
}
Хороший способ:
function getUsers({ fields, fromDate, toDate }) {
// implementation
}
getUsers({
fields: ['name', 'surname', 'email'],
fromDate: '2019-01-01',
toDate: '2019-01-18'
});
Вместо этого используйте параметры по умолчанию||действовать
Плохой способ:
function createShape(type) {
const shapeType = type || "cube";
// ...
}
Хороший способ:
function createShape(type = "cube") {
// ...
}
Функция должна делать только одну вещь, не делайте несколько вещей в одной функции.
Плохой способ:
function notifyUsers(users) {
users.forEach(user => {
const userRecord = database.lookup(user);
if (userRecord.isVerified()) {
notify(user);
}
});
}
Хороший способ:
function notifyVerifiedUsers(users) {
users.filter(isUserVerified).forEach(notify);
}
function isUserVerified(user) {
const userRecord = database.lookup(user);
return userRecord.isVerified();
}
Используйте Object.assign для установки значений объекта по умолчанию.
Плохой способ:
const shapeConfig = {
type: "cube",
width: 200,
height: null
};
function createShape(config) {
config.type = config.type || "cube";
config.width = config.width || 250;
config.height = config.height|| 250;
}
createShape(shapeConfig);
Хороший способ:
const shapeConfig = {
type: "cube",
width: 200
// Exclude the 'height' key
};
function createShape(config) {
config = Object.assign(
{
type: "cube",
width: 250,
height: 250
},
config
);
...
}
createShape(shapeConfig);
Не используйте флаги в качестве аргументов, потому что они говорят функции делать больше, чем следует.
Плохой способ:
function createFile(name, isPublic) {
if (isPublic) {
fs.create(`./public/${name}`);
} else {
fs.create(name);
}
}
Хороший способ:
function createFile(name) {
fs.create(name);
}
function createPublicFile(name) {
createFile(`./public/${name}`);
}
Не засоряйте глобальные переменные. Если вам нужно расширить существующий объект, используйте классы ES и наследование вместо создания функций в цепочке прототипов собственного объекта.
Плохой способ:
Array.prototype.myFunc = function myFunc() {
// implementation
};
Хороший способ:
class SuperArray extends Array {
myFunc() {
// implementation
}
}
4. Условия
Избегайте использования отрицательных условий.
Плохой способ:
function isUserNotBlocked(user) {
// implementation
}
if (!isUserNotBlocked(user)) {
// implementation
}
Хороший способ:
function isUserBlocked(user) {
// implementation
}
if (isUserBlocked(user)) {
// implementation
}
Используйте условное сокращение. Это может быть тривиально, но об этом стоит упомянуть. Используйте этот метод только для логических значений, и если вы уверены, что значение не будетundefinedилиnull, используйте этот метод.
Плохой способ:
if (isValid === true) {
// do something...
}
if (isValid === false) {
// do something...
}
Хороший способ:
if (isValid) {
// do something...
}
if (!isValid) {
// do something...
}
По возможности избегайте условных выражений и используйте вместо них полиморфизм и наследование.
Плохой способ:
class Car {
// ...
getMaximumSpeed() {
switch (this.type) {
case "Ford":
return this.someFactor() + this.anotherFactor();
case "Mazda":
return this.someFactor();
case "McLaren":
return this.someFactor() - this.anotherFactor();
}
}
}
Хороший способ:
class Car {
// ...
}
class Ford extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() + this.anotherFactor();
}
}
class Mazda extends Car {
// ...
getMaximumSpeed() {
return this.someFactor();
}
}
class McLaren extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() - this.anotherFactor();
}
}
5. Класс
class— это новый синтаксический сахар в JavaScript. Все работает так же, как и предыдущий прототип, только теперь он выглядит иначе, и вы должны предпочесть их обычным функциям ES5.
Плохой способ:
const Person = function(name) {
if (!(this instanceof Person)) {
throw new Error("Instantiate Person with `new` keyword");
}
this.name = name;
};
Person.prototype.sayHello = function sayHello() { /**/ };
const Student = function(name, school) {
if (!(this instanceof Student)) {
throw new Error("Instantiate Student with `new` keyword");
}
Person.call(this, name);
this.school = school;
};
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };
Хороший способ:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
/* ... */
}
}
class Student extends Person {
constructor(name, school) {
super(name);
this.school = school;
}
printSchoolName() {
/* ... */
}
}
Используйте ссылку. Многие библиотеки (например, jQuery и Lodash) используют этот шаблон. В классе просто возвращайтесь в конце каждой функцииthisВы можете связать с ним больше методов этого класса.
Плохой способ:
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
}
setAge(age) {
this.age = age;
}
save() {
console.log(this.name, this.surname, this.age);
}
}
const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();
Хороший способ:
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
// Return this for chaining
return this;
}
setAge(age) {
this.age = age;
// Return this for chaining
return this;
}
save() {
console.log(this.name, this.surname, this.age);
// Return this for chaining
return this;
}
}
const person = new Person("John")
.setSurname("Doe")
.setAge(29)
.save();
Суммировать
Это лишь малая часть улучшения кода. В обычной жизни упомянутые здесь принципы — это принципы, которым люди обычно не следуют. Они пытаются это делать, но по разным причинам не придерживаются этого. Возможно, в начале проекта код лаконичен, но когда дело доходит до соблюдения сроков, эти принципы часто игнорируются и переносятся в раздел «TODO» или «REFACTOR». На этом этапе ваш клиент предпочитает, чтобы вы укладывались в срок, а не писали чистый код.
общаться
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.