干净的代码

最新推荐文章于 2024-06-16 12:11:30 发布
最新推荐文章于 2024-06-16 12:11:30 发布
阅读量238 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/steven_jxy/article/details/115658001
版权

变量

  1. 使用有意义的明显的变量名

好的

const yyyymmdstr = moment().format("YYYY/MM/DD");

坏的

const currentDate = moment().format("YYYY/MM/DD");
  1. 对相同类型的变量使用相同的词汇表

坏的

getUserInfo （）; 
getClientData （）; 
getCustomerRecord （）;

好的


getUser （）;
  1. 使用可以搜索的名称
  • 我们将阅读比编写更多的代码。我们编写的代码具有可读性和可搜索性，这一点很重要。通过不命名最终对理解我们的程序有意义的变量，我们伤害了我们的读者。使您的名字可搜索。

坏的

// 这个86400000 用途是什么？
setTimeout(blastOff, 86400000);

好的

//将它们声明为大写的命名常量。
const  MILLISECONDS_IN_A_DAY  =  86 _400_000 ;

setTimeout （blastOff ， MILLISECONDS_IN_A_DAY ）;
  1. 使用解释变量

坏的

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);

好的

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);
  1. 避免思维导图
  • 显式胜于隐式。

坏的

const locations = ["Beijing", "Shanghai", "Guangdong"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // 等待，什么是 ‘l’ 
  dispatch(l);
});

好的

const locations = ["Beijing", "Shanghai", "Guangdong"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});
  1. 不要添加不需要的上下文
  • 如果您的类/对象名称告诉您某些内容，请不要在变量名称中重复。

坏的

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

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

好的

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car) {
  car.color = "Red";
}
  1. 使用默认参数代替短路或条件
  • 默认参数通常比短路更干净。请注意，如果使用它们，则函数将仅提供undefined参数的默认值。其他“falsy”的价值观，如’’，""，false，null，0，和NaN，不会被默认值代替。

坏的

function createCode(name) {
  const breweryName = name || "Hello World";
  // ...
}

好的

function createCode(name = "Hello World") {
  // ...
}

函数

  1. Functions
函数参数（理想情况下为2个或更少）
限制功能参数的数量非常重要，因为它使功能测试变得更加容易。超过三个会导致组合爆炸，您必须使用每个单独的参数测试大量不同的案例。

一个或两个参数是理想的情况，如果可能，应避免三个参数。除此以外的任何事情都应该加以巩固。通常，如果您有两个以上的参数，则您的函数将尝试执行过多操作。在没有这种情况的情况下，大多数情况下，更高级别的对象作为参数就足够了。

由于JavaScript允许您快速创建对象，而无需大量的类模板，因此如果发现自己需要大量参数，则可以使用对象。

为使函数具有明显的属性，您可以使用ES2015 / ES6解构语法。这有一些优点：

当某人查看函数签名时，可以立即清除正在使用的属性。
它可以用来模拟命名参数。
解构还会克隆传递到函数中的参数对象的指定原始值。这可以帮助防止副作用。注意：不会克隆从参数对象解构的对象和数组。
短绒棉可以警告您有关未使用的属性的信息，如果不进行销毁，这是不可能的。

坏的

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


createMenu("Foo", "Bar", "Baz", true);

好的

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

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});
  1. 函数应该做一件事
  • 到目前为止，这是软件工程中最重要的规则。当函数做的事情不止一件事时，它们就很难进行编写，测试和推理。当您可以将一个函数隔离为一个动作时，就可以轻松地对其进行重构，并且代码将变得更加清晰。如果您除了本指南之外没有其他事，您将领先于许多开发人员。

坏的

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

好的

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}
  1. 函数名称应说明其作用

坏的

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

const date = new Date();

// 很难从函数名称中知道添加了什么
addToDate(date, 1);

好的

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

const date = new Date();
addMonthToDate(1, date);
  1. 函数名称应说明其作用
  • 当您具有多个抽象级别时，您的函数通常会执行过多操作。拆分功能可提高可重用性并简化测试。

坏的

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...
  });
}

好的

function parseBetterJSAlternative(code) {
  const tokens = tokenize(code);
  const syntaxTree = parse(tokens);
  syntaxTree.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 parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}
  1. 删除重复的代码
  • 尽最大努力避免重复的代码。重复的代码是不好的，因为这意味着如果您需要更改某些逻辑，则可以在多个地方进行更改。

想象一下，如果您经营一家餐馆，并且跟踪库存：所有的西红柿，洋葱，大蒜，香料等。如果您保留了多个清单，那么当您将一道菜配以西红柿时，所有这些都必须进行更新在他们之中。如果只有一个列表，则只有一个地方可以更新！

通常，您有重复的代码，因为您有两个或多个稍有不同的事物，它们有很多共同点，但是它们之间的差异迫使您拥有两个或多个独立的函数来完成许多相同的事情。删除重复的代码意味着创建一个仅用一个函数/模块/类就可以处理这组不同事物的抽象。

确保正确的抽象是至关重要的，这就是为什么您应该遵循“类”部分中列出的SOLID原理的原因。错误的抽象可能比重复的代码更糟糕，因此请小心！话虽如此，如果您可以做出一个很好的抽象，那就去做吧！不要重复自己，否则，只要想更改一件事，就会发现自己更新了多个位置。

坏的

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);
  });
}

好的

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

    const data = {
      expectedSalary,
      experience
    };

    switch (employee.type) {
      case "manager":
        data.portfolio = employee.getMBAProjects();
        break;
      case "developer":
        data.githubLink = employee.getGithubLink();
        break;
    }

    render(data);
  });
}
  1. 使用Object.assign设置默认对象

坏的

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);

好的

const menuConfig = {
  title: "Order",
  //  用户未包含 ‘body’ 建
  buttonText: "Send",
  cancellable: true
};

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

  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);
  1. 不要将标志用作函数参数
  • 标志告诉您的用户，此功能可以完成多项任务。函数应该做一件事。如果函数遵循基于布尔的不同代码路径，请拆分它们。

坏的

function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}

好的

function createFile(name) {
  fs.create(name);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}
  1. 避免副作用(一)
  • 如果函数除了接受一个值并返回另一个值或多个值以外，不执行任何其他操作，都会产生副作用。副作用可能是写入文件，修改某些全局变量，或者不小心将您的所有资金都汇给了陌生人。

现在，您确实需要偶尔在程序中产生副作用。与前面的示例一样，您可能需要写入文件。您想要做的就是集中执行此操作的位置。没有几个写入特定文件的函数和类。有一项服务可以做到这一点。一个，只有一个。

要点是要避免常见的陷阱，例如在没有任何结构的对象之间共享状态，使用可以被任何东西写入的可变数据类型，而不是集中发生副作用的地方。如果您能做到这一点，您将比绝大多数其他程序员更快乐。

坏的

//以下函数引用的全局变量。
//如果我们还有另一个使用此名称的函数，那么它将是一个数组，并且可能会破坏它。
let name = "Hello World";

function splitIntoFirstAndLastName() {
  name = name.split(" ");
}

splitIntoFirstAndLastName();

console.log(name); // ['Hello', 'World'];

好的

function splitIntoFirstAndLastName(name) {
  return name.split(" ");
}

const name = "Hello World";
const newName = splitIntoFirstAndLastName(name);

console.log(name); // 'Hello World';
console.log(newName); // ['Hello', 'World'];
  1. 避免副作用(二)
  • 在JavaScript中，基元按值传递，而对象/数组按引用传递。对于对象和数组，如果您的函数在购物车数组中进行了更改（例如，通过添加要购买的商品），则使用该cart数组的任何其他函数都将受到此添加的影响。那可能很好，但是也可能不好。让我们想象一个糟糕的情况：

用户单击“购买”按钮，该按钮将调用一个purchase函数，该函数会生成网络请求并将该cart阵列发送到服务器。由于网络连接不良，该purchase功能必须继续重试请求。现在，如果与此同时，用户在网络请求开始之前意外地在他们实际上不想要的商品上单击了“添加到购物车”按钮，该怎么办？如果发生这种情况，并且网络请求开始，则该购买功能将发送意外添加的项目，因为它具有对购物车阵列的引用，该addItemToCart功能通过添加不需要的项目进行了修改。

最好的解决方案是addItemToCart始终克隆cart，对其进行编辑并返回克隆。这样可以确保任何保存在购物车参考上的其他功能都不会受到任何更改的影响。

关于此方法有两个注意事项：

在某些情况下，您实际上可能想修改输入对象，但是当您采用这种编程习惯时，您会发现这些情况很少见。大多数事情都可以重构为没有副作用！

就性能而言，克隆大对象可能会非常昂贵。幸运的是，在实践中这并不是一个大问题，因为有许多出色的库使这种编程方法能够快速运行，而不像手动克隆对象和数组那样占用大量内存。

坏的

const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

好的

const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};
  1. 不要写全局函数
  • 污染全局变量在JavaScript中是一种不好的做法，因为您可能会与另一个库发生冲突，并且API的用户将变得更加明智，直到他们在生产中遇到异常为止。让我们考虑一个示例：如果您想扩展JavaScript的本机Array方法以具有一个diff可以显示两个数组之间的差异的方法，该怎么办？您可以将新函数写入Array.prototype，但它可能与另一个尝试执行相同操作的库发生冲突。如果那个其他库只是diff用来查找数组的第一个元素和最后一个元素之间的区别，该怎么办？这就是为什么只使用ES2015 / ES6类并简单地扩展Array全局会更好的原因。

坏的

Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

好的

class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));
  }
}
  1. 在命令式编程中偏爱函数式编程
  • JavaScript不是Haskell那样的功能语言，但是它具有功能性的味道。功能语言可以更简洁，更容易测试。可以的话，请喜欢这种编程风格。

坏的

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

好的

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

const totalOutput = programmerOutput.reduce(
  (totalLines, output) => totalLines + output.linesOfCode,
  0
);
  1. 封装条件

坏的

if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

好的

function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}
  1. 避免负面条件

坏的

function isDOMNodeNotPresent(node) {
  // ...
}

if (!isDOMNodeNotPresent(node)) {
  // ...
}

好的

function isDOMNodePresent(node) {
  // ...
}

if (isDOMNodePresent(node)) {
  // ...
}
  1. 避免有条件
  • 这似乎是不可能完成的任务。初听到此消息后，大多数人会说：“我应该不做任何if陈述而做任何事情吗？” 答案是，在许多情况下，您可以使用多态来完成相同的任务。第二个问题通常是：“很好，但是我为什么要这么做？” 答案是我们之前学到的干净代码概念：函数只能做一件事。当您具有带有if语句的类和函数时，您就在告诉用户您的函数不仅仅完成一件事。记住，只做一件事。

坏的

class Airplane {
  // ...
  getCruisingAltitude() {
    switch (this.type) {
      case "777":
        return this.getMaxAltitude() - this.getPassengerCount();
      case "Air Force One":
        return this.getMaxAltitude();
      case "Cessna":
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

好的

class Airplane {
  // ...
  getCruisingAltitude() {
    switch (this.type) {
      case "777":
        return this.getMaxAltitude() - this.getPassengerCount();
      case "Air Force One":
        return this.getMaxAltitude();
      case "Cessna":
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

对象和数据结构

  1. 使用getter和setter
  • 使用getter和setter访问对象上的数据可能比仅在对象上查找属性要好。“为什么？” 你可能会问。好吧，这是一个无组织的原因列表：
    除了获得对象属性之外，您还想做更多的事情时，不必查找和更改代码库中的每个访问器。
    使执行时的添加验证变得简单set。
    封装内部表示。
    获取和设置时易于添加日志记录和错误处理。
    您可以延迟加载对象的属性，比方说从服务器获取它。

坏的

function makeBankAccount() {
  // ...

  return {
    balance: 0
    // ...
  };
}

const account = makeBankAccount();
account.balance = 100;

好的

function makeBankAccount() {
  // this one is private
  let balance = 0;

  // a "getter", made public via the returned object below
  function getBalance() {
    return balance;
  }

  // a "setter", made public via the returned object below
  function setBalance(amount) {
    // ... validate before updating the balance
    balance = amount;
  }

  return {
    // ...
    getBalance,
    setBalance
  };
}

const account = makeBankAccount();
account.setBalance(100);
  1. 使对象具有私人成员
  • 这可以通过闭包（对于ES5及以下版本）来实现。

坏的

const Employee = function(name) {
  this.name = name;
};

Employee.prototype.getName = function getName() {
  return this.name;
};

const employee = new Employee("John Doe");
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

好的

function makeEmployee(name) {
  return {
    getName() {
      return name;
    }
  };
}

const employee = makeEmployee("John Doe");
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe

类

  1. 比ES5普通函数更喜欢ES2015 / ES6类
  • 对于经典ES5类，很难获得可读的类继承，构造和方法定义。如果需要继承（请注意可能不需要继承），请选择ES2015 / ES6类。但是，在发现自己需要更大，更复杂的对象之前，请优先选择小型函数而不是类。

坏的

const Animal = function(age) {
  if (!(this instanceof Animal)) {
    throw new Error("Instantiate Animal with `new`");
  }

  this.age = age;
};

Animal.prototype.move = function move() {};

const Mammal = function(age, furColor) {
  if (!(this instanceof Mammal)) {
    throw new Error("Instantiate Mammal with `new`");
  }

  Animal.call(this, age);
  this.furColor = furColor;
};

Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.liveBirth = function liveBirth() {};

const Human = function(age, furColor, languageSpoken) {
  if (!(this instanceof Human)) {
    throw new Error("Instantiate Human with `new`");
  }

  Mammal.call(this, age, furColor);
  this.languageSpoken = languageSpoken;
};

Human.prototype = Object.create(Mammal.prototype);
Human.prototype.constructor = Human;
Human.prototype.speak = function speak() {};

好的

class Animal {
  constructor(age) {
    this.age = age;
  }

  move() {
    /* ... */
  }
}

class Mammal extends Animal {
  constructor(age, furColor) {
    super(age);
    this.furColor = furColor;
  }

  liveBirth() {
    /* ... */
  }
}

class Human extends Mammal {
  constructor(age, furColor, languageSpoken) {
    super(age, furColor);
    this.languageSpoken = languageSpoken;
  }

  speak() {
    /* ... */
  }
}
  1. 使用方法链接
  • 这种模式在JavaScript中非常有用，您可以在jQuery和Lodash等许多库中看到它。它使您的代码更具表现力，并且不再那么冗长。出于这个原因，我说，使用方法链接并查看代码的干净程度。在您的类函数中，只需this在每个函数的结尾处返回即可，您可以将更多的类方法链接到该函数上。

坏的

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }

  setMake(make) {
    this.make = make;
  }

  setModel(model) {
    this.model = model;
  }

  setColor(color) {
    this.color = color;
  }

  save() {
    console.log(this.make, this.model, this.color);
  }
}

const car = new Car("Ford", "F-150", "red");
car.setColor("pink");
car.save();

好的

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }

  setMake(make) {
    this.make = make;
    // NOTE: Returning this for chaining
    return this;
  }

  setModel(model) {
    this.model = model;
    // NOTE: Returning this for chaining
    return this;
  }

  setColor(color) {
    this.color = color;
    // NOTE: Returning this for chaining
    return this;
  }

  save() {
    console.log(this.make, this.model, this.color);
    // NOTE: Returning this for chaining
    return this;
  }
}

const car = new Car("Ford", "F-150", "red").setColor("pink").save();
  1. 优先考虑组成而不是继承
  • 正如“四人帮”在“设计模式”中著名地指出的那样，您应该尽可能地选择组合而不是继承。有很多使用继承的好理由，也有很多使用合成的好理由。该原则的主要目的是，如果您的思维本能地去继承，请尝试考虑组合是否可以更好地为您的问题建模。在某些情况下可以。

那时您可能想知道，“我什么时候应该使用继承？” 这取决于您手头的问题，但这是当继承比构成更有意义时的一个不错的清单：

您的继承表示“是”关系，而不是“具有”关系（人类->动物与用户->用户详细信息）。
您可以重用基类中的代码（人类可以像所有动物一样移动）。
您想通过更改基类对派生类进行全局更改。（改变所有动物移动时的热量消耗）。

坏的

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // ...
}

// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee
class EmployeeTaxData extends Employee {
  constructor(ssn, salary) {
    super();
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

好的

class EmployeeTaxData {
  constructor(ssn, salary) {
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  setTaxData(ssn, salary) {
    this.taxData = new EmployeeTaxData(ssn, salary);
  }
  // ...
}

坚硬的

  1. 单一责任原则（SRP）
  • 如“清洁代码”中所述，“更改班级的理由永远不只一个”。诱使类具有很多功能的包装很诱人，例如当您只能带一个手提箱旅行时。这样做的问题是，您的课程在概念上不会具有凝聚力，并且会为更改类提供很多理由。尽量减少更改班级的时间很重要。这很重要，因为如果一个类中有太多功能，而您对其进行了修改，则可能很难理解这将如何影响代码库中的其他依赖模块

坏的

class UserSettings {
  constructor(user) {
    this.user = user;
  }

  changeSettings(settings) {
    if (this.verifyCredentials()) {
      // ...
    }
  }

  verifyCredentials() {
    // ...
  }
}

好的

class UserAuth {
  constructor(user) {
    this.user = user;
  }

  verifyCredentials() {
    // ...
  }
}

class UserSettings {
  constructor(user) {
    this.user = user;
    this.auth = new UserAuth(user);
  }

  changeSettings(settings) {
    if (this.auth.verifyCredentials()) {
      // ...
    }
  }
}
  1. 开放/封闭原则（OCP）
  • 正如Bertrand Meyer所说，“软件实体（类，模块，功能等）应打开以进行扩展，但应关闭以进行修改。” 那是什么意思呢？该原则基本上指出，您应该允许用户添加新功能而不更改现有代码。

坏的

class AjaxAdapter extends Adapter {
  constructor() {
    super();
    this.name = "ajaxAdapter";
  }
}

class NodeAdapter extends Adapter {
  constructor() {
    super();
    this.name = "nodeAdapter";
  }
}

class HttpRequester {
  constructor(adapter) {
    this.adapter = adapter;
  }

  fetch(url) {
    if (this.adapter.name === "ajaxAdapter") {
      return makeAjaxCall(url).then(response => {
        // transform response and return
      });
    } else if (this.adapter.name === "nodeAdapter") {
      return makeHttpCall(url).then(response => {
        // transform response and return
      });
    }
  }
}

function makeAjaxCall(url) {
  // request and return promise
}

function makeHttpCall(url) {
  // request and return promise
}

好的

class AjaxAdapter extends Adapter {
  constructor() {
    super();
    this.name = "ajaxAdapter";
  }

  request(url) {
    // request and return promise
  }
}

class NodeAdapter extends Adapter {
  constructor() {
    super();
    this.name = "nodeAdapter";
  }

  request(url) {
    // request and return promise
  }
}

class HttpRequester {
  constructor(adapter) {
    this.adapter = adapter;
  }

  fetch(url) {
    return this.adapter.request(url).then(response => {
      // transform response and return
    });
  }
}
  1. 里斯科夫替代原理（LSP）
  • 这是一个非常简单的概念的可怕术语。正式定义为“如果S是T的子类型，则可以用类型S的对象替换类型T的对象（即，类型S的对象可以替换类型T的对象），而无需更改该程序的任何所需属性（正确性，执行的任务等）。” 这是一个更可怕的定义。

最好的解释是，如果您有一个父类和一个子类，则基类和子类可以互换使用而不会得到错误的结果。这可能仍然令人困惑，所以让我们看一下经典的Square-Rectangle示例。从数学上讲，正方形是矩形，但是如果您通过继承使用“ is-a”关系对其进行建模，则会很快遇到麻烦。

坏的

class Rectangle {
  constructor() {
    this.width = 0;
    this.height = 0;
  }

  setColor(color) {
    // ...
  }

  render(area) {
    // ...
  }

  setWidth(width) {
    this.width = width;
  }

  setHeight(height) {
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  setWidth(width) {
    this.width = width;
    this.height = width;
  }

  setHeight(height) {
    this.width = height;
    this.height = height;
  }
}

function renderLargeRectangles(rectangles) {
  rectangles.forEach(rectangle => {
    rectangle.setWidth(4);
    rectangle.setHeight(5);
    const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20.
    rectangle.render(area);
  });
}

const rectangles = [new Rectangle(), new Rectangle(), new Square()];
renderLargeRectangles(rectangles);

好的

class Shape {
  setColor(color) {
    // ...
  }

  render(area) {
    // ...
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Shape {
  constructor(length) {
    super();
    this.length = length;
  }

  getArea() {
    return this.length * this.length;
  }
}

function renderLargeShapes(shapes) {
  shapes.forEach(shape => {
    const area = shape.getArea();
    shape.render(area);
  });
}

const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];
renderLargeShapes(shapes);
  1. 接口隔离原理（ISP）

JavaScript没有接口，因此该原理并不像其他应用严格。但是，即使JavaScript缺乏类型系统，它也很重要且相关。

ISP指出“不应强迫客户端依赖其不使用的接口”。由于鸭子类型，接口在JavaScript中是隐式协定。

一个很好的示例说明了JavaScript中的这一原理，该示例适用于需要大型设置对象的类。不需要客户设置大量选项是有好处的，因为大多数情况下，他们不需要所有设置。将它们设置为可选有助于防止出现“胖界面”。

坏的

class DOMTraverser {
  constructor(settings) {
    this.settings = settings;
    this.setup();
  }

  setup() {
    this.rootNode = this.settings.rootNode;
    this.settings.animationModule.setup();
  }

  traverse() {
    // ...
  }
}

const $ = new DOMTraverser({
  rootNode: document.getElementsByTagName("body"),
  animationModule() {} // Most of the time, we won't need to animate when traversing.
  // ...
});

好的

class DOMTraverser {
  constructor(settings) {
    this.settings = settings;
    this.options = settings.options;
    this.setup();
  }

  setup() {
    this.rootNode = this.settings.rootNode;
    this.setupOptions();
  }

  setupOptions() {
    if (this.options.animationModule) {
      // ...
    }
  }

  traverse() {
    // ...
  }
}

const $ = new DOMTraverser({
  rootNode: document.getElementsByTagName("body"),
  options: {
    animationModule() {}
  }
});
  1. 依赖倒置原则（DIP）
  • 该原则陈述了两个基本要点：

高级模块不应依赖于低级模块。两者都应依赖抽象。
抽象不应依赖细节。细节应取决于抽象。
起初这很难理解，但是如果您使用过AngularJS，您已经以依赖注入（DI）的形式看到了该原理的实现。尽管它们不是完全相同的概念，但DIP可以使高级模块不了解其低级模块的详细信息并进行设置。它可以通过DI来完成。这样的巨大好处是，它减少了模块之间的耦合。耦合是非常糟糕的开发模式，因为它使您的代码难以重构。

如前所述，JavaScript没有接口，因此依赖的抽象是隐式协定。也就是说，一个对象/类公开给另一个对象/类的方法和属性。在下面的示例中，隐式约定是的任何Request模块InventoryTracker都将具有requestItems方法。

坏的

class InventoryRequester {
  constructor() {
    this.REQ_METHODS = ["HTTP"];
  }

  requestItem(item) {
    // ...
  }
}

class InventoryTracker {
  constructor(items) {
    this.items = items;

    // BAD: We have created a dependency on a specific request implementation.
    // We should just have requestItems depend on a request method: `request`
    this.requester = new InventoryRequester();
  }

  requestItems() {
    this.items.forEach(item => {
      this.requester.requestItem(item);
    });
  }
}

const inventoryTracker = new InventoryTracker(["apples", "bananas"]);
inventoryTracker.requestItems();

好的

class InventoryTracker {
  constructor(items, requester) {
    this.items = items;
    this.requester = requester;
  }

  requestItems() {
    this.items.forEach(item => {
      this.requester.requestItem(item);
    });
  }
}

class InventoryRequesterV1 {
  constructor() {
    this.REQ_METHODS = ["HTTP"];
  }

  requestItem(item) {
    // ...
  }
}

class InventoryRequesterV2 {
  constructor() {
    this.REQ_METHODS = ["WS"];
  }

  requestItem(item) {
    // ...
  }
}

// By constructing our dependencies externally and injecting them, we can easily
// substitute our request module for a fancy new one that uses WebSockets.
const inventoryTracker = new InventoryTracker(
  ["apples", "bananas"],
  new InventoryRequesterV2()
);
inventoryTracker.requestItems();
steven_jxy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web 设计 实现干净代码的12条定律[图文]
09-22
漂亮的代码是漂亮网站的基础，优秀的 CSS 只存在与同样优秀的 ...本文讲述了12个实现干净 Web 设计代码的定律，适合于任何从事 Web 设计的人。1. Strict DOCTYPE 要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0，它们
如何写出优美的 JavaScript 代码？
听海丶的博客
12-21 941
一、变量相关 （1）变量数量的定义 NO：滥用变量 let kpi = 4; // 定义好了之后再也没用过 function example() { var a = 1; var b = 2; var c = a+b; var d = c+1; var e = d+a; return e; } YES: 数据只使用一次或不使用就无需装到变量中 l...
如何提高JavaScript代码质量(一)
测试
01-10 586
代码质量与其整洁度成正比。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。本文并不是代码风格指南，而是关于代码的可读性、复用性、扩展性探讨。我们将从几个方面展开讨论：1.变量2.函数变量用有意义且常用的单词命名变量Bad:constyyyymmdstr=moment().format('YYYY/MM/DD');Good:constcurrent...
代码简洁之道
aau88497的博客
01-17 212
摘要： 可以说是《Clean Code》的JS代码示例了，值得参考。 原文：JavaScript 代码简洁之道 作者：缪宇 Fundebug经授权转载，版权归原作者所有。 测试代码质量的唯一方式：别人看你代码时说 f * k 的次数。 代码质量与其整洁度成正比。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。 本文并不是代码风格指南，而是关于代码的可...
一名合格前端工程师必备素质：代码整洁之道
qq_34998786的博客
09-11 403
内容出自《代码整洁之道》、Alex Kondov[1]的博文tao-of-react[2]和《Clean Code of Javascript》image.png代码整洁有什么用？imag...
6个编写优质干净代码的技巧
博客
09-12 603
原文：6 Simple Tips on How to Start Writing Clean Code 作者：Alex Devero 译者：Teixeira10 【译者注】作为一名开发者，编写一手干净的代码很重要，所以在本文中作者先列举出编写干净代码的一些好处，再提出6个技巧用于编写干净代码，供开发者进行参考学习。 以下为译文：编写干净的代码并不是一件容易的事情，这需要尝试不同...
编写干净的代码
03-04
本文来自于RationalEdge：看看软件开发人员在代码编写工作中为什么需要...但是我将关注一个我在记录这个播客时所遇到的一个问题：不能够编写干净简洁的代码，这也是程序员们遇到的一个相当普遍的问题。这个话题是怎样产
内存加载资源DLL，干净代码
12-14
从资源加载DLL执行，让代码干净
MVC CodeFirst 干净代码示例
09-25
使用CodeFirst 模式代码干净，但数据库已存在，或习惯先建库的朋友又想用CodeFirst这种代码干净的模式
代码 干净_如何编写干净代码？
编程故事的地方
08-20 231
代码 干净 罗伯特·C·马丁的经验教训 图片由rawpixel 目录： 清洁法规 书的概述—罗伯特·C·马丁（鲍勃叔叔） 什么是清洁代码？ 在软件中编写有意义名称的提示。 使功能易于阅读和理解的规则。 注释代码，您应该对错误代码进行注释还是将其重写？ 单元测试 ，测试驱动开发（ TDD ）的好处 总览 “高级程序员将系统视为要讲的故事，而不是要编...
为什么同事写的代码那么优雅~
u012384510的博客
07-09 214
大家好，我是若川，诚邀你进群交流学习。今天分享一篇相对轻松的代码简洁之道。学习源码系列、面试、年度总结、JS基础系列内容出自《代码整洁之道》、Alex Kondov[1]的博文tao-of...
JavaScript代码规范（一）
Lee的博客
05-07 2444
简介 将源自 Robert C. Martin 的Clean Code的软件工程原则适配到 JavaScript 。 这不是一个代码风格指南， 它是一个使用 JavaScript 来生产 可读的， 可重用的， 以及可重构的软件的指南。 这里的每一项原则都不是必须遵守的， 甚至只有更少的能够被广泛认可。 这些仅仅是指南而已， 但是却是Clean Code作者多年经验的结晶。 我们的...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1059
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
m0_68467925的博客
06-13 581
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1270
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 806
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 282
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
vue格网图
最新发布
南北粉面馆
06-16 152
【代码】vue格网图。
如何干净整洁的使用Cunit框架，代码实例
06-07
下面是一个使用CUnit框架进行单元测试的示例代码： ```c #include #include #include #include // 要测试的函数 int add(int x, int y) { return x + y; } // 初始化函数 int init_suite(void) { return 0;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值