Javascript ES6调用静态方法引发错误
我有以下Javascript类: cart.jsJavascript ES6调用静态方法引发错误,javascript,oop,ecmascript-6,es6-class,Javascript,Oop,Ecmascript 6,Es6 Class,我有以下Javascript类: cart.js class Cart{ static addItem(data, beforeSendCallback=null, successCallback=null, errorCallback=null) { const emptyCallback = ()=>{} if(data){ $.ajax({ url: '/orders/',
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时,将执行此功能,但出现错误:
未捕获引用错误:未定义购物车,
在htmlanchorement.addItemToCart item.js:20
在htmlanchorement.dispatch jquery.js:5206
在htmlanchorement.elemData.handle jquery.js:5014
这两个文件正在添加到app.js中,app.js负责通过网页处理它们:
require('./core/cart')
require('./item')
因为我首先需要./core/cart,所以我假设它的内容可以用于./item,我错了吗?您需要在cart.js中导出cart类,然后导入并实际将其分配给要使用它的变量。在cart.js中:
然后在您想要使用购物车的任何模块中:
您需要在Cart.js中导出Cart类,然后导入并实际将其分配给要使用它的变量。在cart.js中:
然后在您想要使用购物车的任何模块中:
尝试将导入的购物车分配给变量: const Cart=require'/core/Cart' 并确保在cart.js中导出购物车:
module.exports=类购物车{尝试将导入的购物车分配给变量: const Cart=require'/core/Cart' 并确保在cart.js中导出购物车:
module.exports=类购物车{您的错误表明它正在浏览器中运行,但您给出了一个使用require的示例,任何浏览器都不支持该示例。这里可能有很多信息缺失。我假设您使用的是bundler?更多详细信息肯定会有所帮助。每个模块都有自己的作用域。您应该使用m导出必要的类导出并利用require的返回值。如果您处于browser@appleapple应该避免污染全局名称空间,尤其是当您已经在模块环境中时-解决方案是使用模块环境,而不是试图绕过它。@CertainPerformance I可能会说类可以安全地留在全局空间中。const Cart=require'/core/Cart';在不同的空间中执行相同的操作。您的错误表明它正在浏览器中运行,但您给出了一个使用require的示例,任何浏览器都不支持该示例。这里可能缺少很多信息。我假设您是使用绑定器?更多详细信息肯定会有所帮助。每个模块都有自己的作用域。您应该使用module.exports导出必要的类,并利用require的返回值。一个简单的修复方法是window.Cart=Cart-inside-Cart.js(如果您在browser@appleapple应该避免污染全局名称空间,特别是如果您是在模块环境中准备就绪-解决方案是使用模块环境,而不是试图绕过它。@CertainPerformance我想说类可以安全地停留在全局空间中。const Cart=require'/core/Cart';做同样的事情,只是在不同的空间中。成功了!谢谢。如果你不介意,为什么需要导出它?我的意思是,重新导出在app.js中获取它并不意味着将其内容“粘贴”到该文件中,因此可以从下面引用该类?不,模块提供了一种方便的方法来管理依赖关系,它们不会自动将所有内容都全局化,这会破坏整个目的。显式定义每个模块导出的内容和在每个模块中,导入是编写和调试更大脚本的可管理性所在。它起作用了!谢谢。如果你不介意的话,为什么需要导出它?我的意思是,在app.js中要求它,不应该将其内容“粘贴”到该文件中,因此可以从下面引用该类?不,模块提供了一种方便的管理de的方法pendencies和其他东西——它们不会自动将所有内容都全局化,这会破坏整个目的。明确定义每个模块导出的内容和每个模块导入的内容是编写和调试大型脚本的可管理性。
// ....
module.exports = Cart;
const Cart = require('./core/cart');
// use the `Cart` class.