浅谈JavaScript 代码简洁之道(2)

日期：2020-05-11 栏目：程序人生浏览：次

避免无意义的前缀

如果创建了一个对象 car，就没有必要把它的颜色命名为 carColor。

Bad:

 const car = {
 carMake: 'Honda',
 carModel: 'Accord',
 carColor: 'Blue'
 };

 function paintCar(car) {
 car.carColor = 'Red';
 }

Good:

const car = {
 make: 'Honda',
 model: 'Accord',
 color: 'Blue'
};

function paintCar(car) {
 car.color = 'Red';
}

使用默认值

Bad:

function createMicrobrewery(name) {
 const breweryName = name || 'Hipster Brew Co.';
 // ...
}

Good:

function createMicrobrewery(name = 'Hipster Brew Co.') {
 // ...
}

函数

参数越少越好

如果参数超过两个，使用 ES2015/ES6 的解构语法，不用考虑参数的顺序。

Bad:

function createMenu(title, body, buttonText, cancellable) {
 // ...
}

Good:

function createMenu({ title, body, buttonText, cancellable }) {
 // ...
}

createMenu({
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
});

只做一件事情

这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用。

Bad:

function emailClients(clients) {
 clients.forEach((client) => {
 const clientRecord = database.lookup(client);
 if (clientRecord.isActive()) {
 email(client);
 }
 });
}

Good:

function emailActiveClients(clients) {
 clients
 .filter(isActiveClient)
 .forEach(email);
}
function isActiveClient(client) {
 const clientRecord = database.lookup(client); 
 return clientRecord.isActive();
}

顾名思义

看函数名就应该知道它是干啥的。

Bad:

function addToDate(date, month) {
 // ...
}

const date = new Date();

// 很难知道是把什么加到日期中
addToDate(date, 1);

Good:

function addMonthToDate(month, date) {
 // ...
}

const date = new Date();
addMonthToDate(1, date);

只需要一层抽象层

如果函数嵌套过多会导致很难复用以及测试。

Bad:

function parseBetterJSAlternative(code) {
 const REGEXES = [
 // ...
 ];

 const statements = code.split(' ');
 const tokens = [];
 REGEXES.forEach((REGEX) => {
 statements.forEach((statement) => {
 // ...
 });
 });

 const ast = [];
 tokens.forEach((token) => {
 // lex...
 });

 ast.forEach((node) => {
 // parse...
 });
}

转载注明出处：http://www.heiqu.com/90.html

浅谈JavaScript 代码简洁之道(2)

相关推荐