ES6调用静态方法抛出错误答案

【问题标题】：ES6 call to static method throwing an errorES6调用静态方法抛出错误
【发布时间】：2018-09-12 06:47:49
【问题描述】：

我在 Javascript 中有以下类：

cart.js

class Cart{

    static addItem(data, beforeSendCallback=null, successCallback=null, errorCallback=null) {
        const emptyCallback = ()=>{}
        if(data){
            $.ajax({
                url: '/orders/',
                type: 'POST',
                data: data,
                beforeSend: beforeSendCallback == null ? emptyCallback : beforeSendCallback,
                success: successCallback == null ? emptyCallback : successCallback,
                error: errorCallback == null ? emptyCallback : errorCallback,
                dataType: 'json'
            })
        }
    }
}

现在，我在另一个文件中：

item.js

...
function addItemToCart(e) {
    e.preventDefault()
    let data = {
        'itemId': $('#item_id').val(),
        'type': $('#item_type').val(),
        'quantity': $('#quantity').val(),
        'stock': $('#in_stock').val(),
        'price': $('#item_price').val()
    }

    if (data.stock != 2) {
        Cart.addItem(data, disableAddToCartBtn(true), disableAddToCartBtn(false))
    }
}
...

当按下add-cart-btn 时，会执行此函数，但出现错误：

Uncaught ReferenceError: Cart is not defined, 在 HTMLAnchorElement.addItemToCart (item.js:20) 在 HTMLAnchorElement.dispatch (jquery.js:5206) 在 HTMLAnchorElement.elemData.handle (jquery.js:5014)

这两个文件被添加到app.js 中，app.js 负责通过 webpack 处理它们：

require('./core/cart')
require('./item')

因为我首先需要./core/cart，所以我认为它的内容可以用于./item，我错了吗？

【问题讨论】：

您的错误表明它正在浏览器中运行，但您使用require() 给出了一个示例，任何浏览器都不支持AFAIK。这里可能有很多缺失的信息。我假设您正在使用捆绑器？更多细节肯定会有所帮助。
每个模块都有自己的范围。您应该导出必要的类（使用module.exports）并利用require 的返回值。
如果你在浏览器中，一个简单的解决方法是在cart.js 中使用window.Cart = Cart
@appleapple 应该避免污染全局命名空间，特别是如果您已经在模块环境中 - 解决方案是使用模块环境，而不是尝试解决它。
@CertainPerformance 我想说类可以安全地留在全局空间内。 const Cart = require('./core/cart'); 做同样的事情，只是在不同的空间内。

标签： javascript oop ecmascript-6 es6-class

【解决方案1】：

尝试将导入的购物车分配给一个变量：

const Cart = require('./core/cart');

并确保在 cart.js 中导出购物车：

module.exports = class Cart {

【讨论】：

成功了！谢谢。如果您不介意，为什么需要导出它？我的意思是，通过在 app.js 中要求它不应该将其内容“粘贴”到该文件中，因此可以从下面引用该类？
不，模块提供了一种管理依赖项的便捷方式（除其他外）——它们不会自动使所有内容都全局化，这会破坏整个目的。明确定义每个模块导出的内容和每个模块导入的内容，使编写和调试更大的脚本变得易于管理。

【解决方案2】：

您需要在cart.js 中导出Cart 类，然后将其导入并实际分配到要使用它的变量。在cart.js:

// ....
module.exports = Cart;

然后在任何你想使用的模块中Cart:

const Cart = require('./core/cart');
// use the `Cart` class.

【讨论】：