Question

我有以下文件：

server.js：

app.get('/main/:id', function(req, res) {
    res.render('main', { products: products });
})

main.hbs：

<div class="products">
    {{#each products }}
        {{ this.product_id }}
        {{ this.product_name }}
    {{/each}}
</div>


<script>
$(document).ready(function() {
    $(".add-to-cart").click(function() {
        const products = {
            item_id: $(this).attr('item_id'),
            item_name: $(this).attr('item_name'),
        }

        shopping_cart = new ShoppingCart();
        shopping_cart.addtoCart(products);
    })
})
</script>

scripts / shopping_cart.js：

function ShoppingCart() {
    this.addtoCart = function(products) {
        //save products to server etc..
    }
}

module.exports = ShoppingCart;

我唯一的问题是我试图在main.hbs文件中包含shopping_cart脚本”，但没有成功

起初我在main.hbs中做过

：

<script src="../scripts/shopping_cart.js"></script>

但是比我在浏览器中看到的错误：“ Uncaught ReferenceError：未定义模块”

比起我尝试将其打包到bundle.js文件中：而且我没有错误，但是如果我单击“添加到购物车”按钮，我会得到： “未捕获的ReferenceError：未定义ShoppingCart”

请帮助我了解正确的方法，该方法如何包括shopping_cart.js文件并能够创建该类的新实例。

谢谢。

Answer 1

您遇到的是一个非常典型的绊脚石，很多人从使用前端+后端js开始时就会绊倒。

module.exports是nodejs代码，在浏览器中不起作用。您将需要使用普通JavaScript编写shopping_cart.js，而无需使用nodejs函数和对象。在这种情况下，您应该能够简单地省略module.exports。但这似乎是一个更大的混乱问题。

您应该分别研究JavaScript和nodejs，特别是如果您对这两者都不熟悉。尽管可以共享某些组件，但令人遗憾的是，它比简单的module.exports复杂一些。我建议先研究一些香草的前端（浏览器）JavaScript教程，因为它没有像module.exports或require('...')这样的概念。

在车把模板中包含js模块

1 个答案: