易读、易复用、易重构的 JavaScript 代码规范
1.变量命名规范有意义
Bad: const yyyymmdstr = moment().format("YYYY/MM/DD"); Good: const currentDate = moment().format("YYYY/MM/DD");
2. 给变量定义名字
Bad: // What the heck is 86400000 for? setTimeout(blastOff, 86400000); Good: // Declare them as capitalized named constants. const MILLISECONDS_IN_A_DAY = 86_400_000; setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
3.函数的变量定义初始值
Bad: function createMicrobrewery(name) { const breweryName = name || "Hipster Brew Co."; // ... } Good: function createMicrobrewery(name = "Hipster Brew Co.") { // ... }
4.函数的形参过多时候，用对象代替多个参数
Bad: function createMenu(title, body, buttonText, cancellable) { // ... } createMenu("Foo", "Bar", "Baz", true); Good: function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true });
5.函数应该只做一件事情
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(); }
6.函数名称应该说明其作用
Bad: function addToDate(date, month) { // ... } const date = new Date(); // It's hard to tell from the function name what is added addToDate(date, 1); Good: function addMonthToDate(month, date) { // ... } const date = new Date(); addMonthToDate(1, date)
7.使用Object.assign拷贝对象
Good: const menuConfig = { title: "Order", // User did not include 'body' key 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);
8.开闭原则
对扩展开放，对修改关闭；
面向对象开发
9.函数的继承
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() { /* ... */ } }
10 链式编程 在每个函数的结尾返回this即可
(这种模式在JavaScript中非常有用，您可以在jQuery和Lodash等许多库中看到它。它使您的代码更具表现力，并且不再那么冗长。出于这个原因，我说，使用方法链接并查看代码的干净程度。在类函数中，只需this在每个函数的末尾返回即可，然后可以将更多的类方法链接到该函数上。)
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();
11.async/await 来处理异步编程
参考地址来源 ：GitHub - ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript
