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

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

Good:

function parseBetterJSAlternative(code) {
 const tokens = tokenize(code);
 const ast = lexer(tokens);
 ast.forEach((node) => {
 // parse...
 });
}

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

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

 return tokens;
}

function lexer(tokens) {
 const ast = [];
 tokens.forEach((token) => {
 ast.push( /* ... */ );
 });

 return ast;
}

删除重复代码

很多时候虽然是同一个功能，但由于一两个不同点，让你不得不写两个几乎相同的函数。

要想优化重复代码需要有较强的抽象能力，错误的抽象还不如重复代码。所以在抽象过程中必须要遵循 SOLID 原则（SOLID 是什么？稍后会详细介绍）。

Bad:

function showDeveloperList(developers) {
 developers.forEach((developer) => {
 const expectedSalary = developer.calculateExpectedSalary();
 const experience = developer.getExperience();
 const githubLink = developer.getGithubLink();
 const data = {
 expectedSalary,
 experience,
 githubLink
 };

 render(data);
 });
}

function showManagerList(managers) {
 managers.forEach((manager) => {
 const expectedSalary = manager.calculateExpectedSalary();
 const experience = manager.getExperience();
 const portfolio = manager.getMBAProjects();
 const data = {
 expectedSalary,
 experience,
 portfolio
 };

 render(data);
 });
}

Good:

function showEmployeeList(employees) {
 employees.forEach(employee => {
 const expectedSalary = employee.calculateExpectedSalary();
 const experience = employee.getExperience();
 const data = {
 expectedSalary,
 experience,
 };

 switch(employee.type) {
 case 'develop':
 data.githubLink = employee.getGithubLink();
 break
 case 'manager':
 data.portfolio = employee.getMBAProjects();
 break
 }
 render(data);
 })
}

对象设置默认属性

Bad:

const menuConfig = {
 title: null,
 body: 'Bar',
 buttonText: null,
 cancellable: true
};

function createMenu(config) {
 config.title = config.title || 'Foo';
 config.body = config.body || 'Bar';
 config.buttonText = config.buttonText || 'Baz';
 config.cancellable = config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

Good:

const menuConfig = {
 title: 'Order',
 // 'body' key 缺失
 buttonText: 'Send',
 cancellable: true
};

function createMenu(config) {
 config = Object.assign({
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
 }, config);

 // config 就变成了: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
 // ...
}

createMenu(menuConfig);

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

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

相关推荐