如何模块化 JavaScript 类（将方法拉出主文件，将方法导入主文件）答案

【问题标题】：How to modularize JavaScript class (pull methods out of main file, import methods into main file)如何模块化 JavaScript 类（将方法拉出主文件，将方法导入主文件）
【发布时间】：2017-10-13 21:20:03
【问题描述】：

是否可以在 JS 中将类方法从类中提取出来？原谅我，我是函数式范式，所以使用 React 迫使我使用类和 this 关键字（到目前为止）。我的一些组件变大了，我不希望这样。

我在 Google 上找不到任何关于提取方法或模块化类的信息。

有没有一种方法可以让我说“从 './some_method.js' 获取这个方法并像在这个文件和类中声明它一样使用它”而无需进行太多侵入性更改？

如果做不到这一点，我会假设让它们都具有功能并将this 传递给它们。然而，这感觉很脏。

我很感激一些关于我需要查看哪些关键字的指导，或者只是如何将方法移出，这样我就没有需要 20 分钟才能找到的 2000 个行文件

toggleFullMenu() {
    this.setState({ menuOpen: !this.state.menuOpen})
}

无需按 CTRL+F。这就是我的动力。

我还想知道是否有任何与构造函数相关的专业提示。来自类继承范例的任何警告？我只是希望这些方法单独存在于单独的文件中，但我不知道我在寻找什么。我从没见过人们谈论这个。

编辑，我刚刚在 MDN 中找到了这个：

带有扩展的子类

extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的子类。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

这是我需要的吗？我将如何去拉一堆扩展？不过我不想要一个子类，这听起来不像我在描述的那样。

【问题讨论】：

标签： javascript node.js reactjs react-native

【解决方案1】：

您可以使用Function.prototype.bind 这样做，这样您就可以控制this 的值。

在一个模块中，您可以将“方法”导出为常规函数：

// methods.js
export const toggleFullMenu = () => {
  this.setState({ menuOpen: !this.state.menuOpen })
}

在你的组件模块中：

import React from 'react'
import { toggleFullMenu } from './methods'

class SomeComponent extends React.Component {
  constructor () {
    super()
    this.toggleFullMenu = toggleFullMenu.bind(this)
  }

  render () {
    return <button onClick={this.toggleFullMenu}>Click Me</button>
  }
}

toggleFullMenu 函数也可以绑定到其他上下文，因此您实际上可以在不同组件之间共享该方法。

编辑：绑定函数的上下文有很多不同的方法，您不仅限于Function.prototype.bind。请参阅 this chapter 了解各种方法的说明。

【讨论】：

这听起来不错。我可以使用这样的简洁声明。所以在主类中，我可以调用this.toggleFullMenu({ some, stuff, and, this.morePoop }) 并且this 关键字关联将保持不变，就好像方法在类中一样？
有什么办法可以使用胖箭头代替bind(this) 吗？可能不是，在这种情况下这可能没有逻辑意义，但我必须探索。这个答案真的很棒。我将在今天晚些时候研究Function.prototype.bind。
要回答你的第一个问题，实例方法中this 的值将是类本身的实例（但是，你应该了解引用函数与调用它们的含义...... . this 的值在通过引用传递时将丢失，除非如上所述明确绑定）。
第二个问题，我会参考这篇文章来了解做这种事情的各种方法egorsmirnov.me/2015/08/16/react-and-es6-part3.html。基本上答案是肯定的，并且有几种方法可以做到这一点，具体取决于您使用的 JavaScript 版本。
我使用的是最新的。我想要 2018 年行业标准的方式来存储类外的方法。我通常使用带有 async/await 的 try/catch 架构。我非常熟悉 JS 排除类和原型继承的这一方面，所以不要退缩。我非常感谢您删除的关键字。我通常写 100% 的函数，所以保持对this 的正确引用应该是直截了当的，我不反对创建绑定/异国情调的函数。我要做的就是将方法存储在另一个文件中。我会在遇到野生用例时处理它们。

【解决方案2】：

我可以说是的，你可以从其他类或文件中提取不同的方法，而不是在你的组件中创建。有很多不同的方法可以去，这真的取决于你的喜好。您可以从非常简单的结构转变为非常复杂的结构。

首先你需要搜索和了解（如果你还不知道）require() 和/或 ES6 import 和 export。您可以创建独立的函数或对象并将它们导入到您的组件中以使用它们。如果您在应用程序的不同组件或部分中使用重复的功能，这就是您要走的路。

如果我评论将this 作为参数传递，它并不像你在问题中所说的那样。与其传递this，不如将所需的参数传递给函数并使用callbacks 或Promises 是要走的路。您可以使用的另一种技术是将bind 函数转换为this。 ES6 arrow functions 不需要是 bind，因为他们不绑定自己的 this。

如果您想更复杂/复杂一点，您可以随时创建自己的classes。类结构可以提供做更复杂事情的能力。 extends 使您能够与其他人扩展（就像您可以从其名称中理解的那样）您的类方法或用新方法覆盖它们。例如，Beverages、Snacks、Meats 可以是从 Foods 类扩展而来的类。当您创建自定义组件时，您扩展了 React.Component，然后使用它的方法。

要考虑的另一件事是，拥有 2000 行的组件让我认为您还应该考虑将组件分成更小的块。父/子组件关系是 React 中最常见和受支持的结构。如果你使用这种模式，你的代码会自动变小，并且更容易遵循和管理。有很多关于如何将函数作为道具传递给子组件并在特定条件下使用特定参数运行它们然后操作父组件状态的示例。您可以查找这些示例以更好地理解。

我希望这些主题能帮助你理解一些事情并告诉你从哪里开始。

【讨论】：

【解决方案3】：

Webpack 是一个功能齐全的 JavaScript 应用程序捆绑器。使用 Webpack，您可以导入/导出代码，例如：

export default class CustomerView {
    render() {
        ...
    }
}

和

import CustomerView from './CustomerView'

【讨论】：

我说的是CustomerView里面的方法，比如把render方法拉到一个单独的文件里。