经典范例：7个JavaScript优秀实践

2023-02-27

函数 name json

 1.编写构造函数时，在.prototype上添加方法根据我头两年接触JavaScript的经历，如果你是一名JavaScript新手，可能会对这部分有些陌生。(请记住，这并不适用于类，因为类已经将方法附加到它们的prototype上。)以下是构造函数的一个示例： 复制funct

1. 编写构造函数时，在 .prototype上添加方法

根据我头两年接触JavaScript的经历，如果你是一名JavaScript新手，可能会对这部分有些陌生。

(请记住，这并不适用于类，因为类已经将方法附加到它们的prototype上。)

以下是构造函数的一个示例：

functionFrog(name, gender)  { 
  this.name= name 
  this.gender= gender 
} 
Frog.prototype.leap=function(feet) { 
  console.log(`Leaping ${feet}ft into the  air`) 
} 
1.
2.
3.
4.
5.
6.
7.

为什么不像以下示例一样，直接附加leap方法呢?

functionFrog(name, gender)  { 
  this.name= name 
  this.gender= gender 
  this.leap=function(feet) { 
    console.log(`Leaping ${feet}ft into the  air`) 
  } 
} 
1.
2.
3.
4.
5.
6.
7.

当把方法直接添加到prototype时，它们将在构造函数创建的所有实例之间共享。

换句话说，使用上个例子，如果创建三个独立的 Frog (从 this.leap = function() {...})，然后以创建三个独立的副本结束。这是一个问题，因为leap方法总是保持不变，不需要在实例上建立自己的副本。

最终导致本可以避免的性能下降。this.name 和this.gender属性需要在实例上定义，因为现实生活中，frog可能有自己的名字和性别，所以才在实例级别上创建它们。

这里是流行的request 包使用这种方法的一个示例(在GitHub上)。

2. 使用TypeScript

TypeScript不仅能为类型安全提供强大防御，还能帮助预防错误，已经在JavaScript社区中得到了广泛应用。

使用TypeScript能使编译器在代码运行之前对潜在的错误进行监测并显示警告。

但这还远不能解释为什么TypeScript可以适用于任何情况。TypeScript最好的一点是允许在主流浏览器支持之前使用JavaScript中的新特征，因为这些特征被编译成更早期的JavaScript版本，因此能在旧版本的浏览器中运行。

3. 编写测试

如果要认真处理一个项目，必须使用测试，这样应用程序才更能够更加可预测、少出错、并灵活应对未来的变化。换句话说，如果打算做一个经得起时间考验的项目，没有比在整个代码中建立测试更好的方法。在代码中投入的测试越多，将其应用于生产环境后，对它的信心也会越多。

测试最好的部分是什么?是能捕捉错误，使其无从出现——有人不想要那种能力吗?我确定我想要。这就是我在项目中写单元测试的原因。

4. 使用JSON.parse或JSON.stringify时，务必考虑使用 try/catch

JavaScript中，当把JSON作为输入传递给JSON.parse时，需要一个正确格式的JSON作为第一个参数。如果格式不正确，会提示JSON解析错误。

来自JSON解析错误的危险是接受无效的JSON会导致应用程序崩溃。最近我们的一个web项目失败了，因为另一个内置程序包没有在try/catch里安装JSON.parse 。最终导致了web页面失效，而且由于JavaScript运行时被破坏，除非内置程序包修复它，否则无法修正错误。

SyntaxError: Unexpected token }in JSON at position 107 
1.

不应总是期望有效的JSON输入，因为它会收到如“>”的奇怪字符，这在今天是很常见的。

5. 使用常规的.type属性进行区分

这个方法很棒，得到了广泛使用。React开发人员可能每天都能看到这种做法，特别是使用Redux工作时。

使用类似方法也能使开发流程变得无比简单，因为它甚至可以很好的记录自己。

functioncreateSpecies(type, name,  gender) { 
  if (type ==='frog') { 
    returncreateFrog(name, gender) 
  } elseif (type ==='human') { 
    returncreateHuman(name, gender) 
  } elseif (type == undefined) { 
    thrownewError('Cannot create  a species with an unknown type') 
  } 
} 
const myNewFrog =createSpecies('frog', 'sally', 'female') 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

6. 使用工厂函数(factory function)

如果你不知道什么是工厂函数，那么它就是一个返回对象的函数(它既不是类，也不是构造函数)。通过这个简单概念，就可以利用JavaScript及其特征来创建强大健壮的应用程序。

必须知道，当函数被new关键字调用时，该函数就不再是工厂函数了。

为什么要用工厂函数?

使用工厂函数可以轻松的生成对象实例，且无需涉及类或new关键字。

其本质上意味着，它们最终会被当做函数来对待，即可用于组合对象、函数，甚至Promise函数。这表明可以将工厂函数混合搭配，以创建一个升级版工厂函数，然后继续和别的函数或对象组合创建成更强的工厂函数。其可能性是无穷无尽的。

考虑到这一点，将其与好的代码实践相结合，它便开始大放光彩了。

以下是工厂函数的一个简单示例：

functioncreateFrog(name) { 
  const children = [] 
  return { 
    addChild(frog) { 
      children.push(frog) 
    }, 
  } 
} 
const mikeTheFrog =createFrog('mike') 
1.
2.
3.
4.
5.
6.
7.
8.
9.