导入/导出JavaScript

Question

我在一个文件中有以下类

src/ui.js

export default class UI {

    static generateUI(restaurant) {
        const container = document.getElementById('container')

        const addButton = document.createElement('button')
        addButton.setAttribute('type', 'button')
        addButton.innerText = "Add"
        addButton.setAttribute('id', restaurant.id)
        addButton.setAttribute('class', 'addButton')
        addButton.addEventListener("click", function() {
            fetch('http://localhost:3000/add', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    id: restaurant.id 
                })
            })
            .then(resp => resp.json())
            .then(confirmation => UI.showAddSuccess(confirmation))
        })

        const name = document.createElement('h2')
        name.innerText = restaurant.name

        const ul = document.createElement('ul')
        ul.setAttribute('class', 'dishList')

        restaurant.foods.forEach(food => {
            const dish = document.createElement('li')
            dish.innerText = food.dish 
            const button = document.createElement('button')
            button.setAttribute('id', food.id)
            button.setAttribute('class', 'deleteButton')
            button.setAttribute('type', 'button')
            button.innerText = "Delete"
            button.addEventListener("click", function() {
            fetch('http://localhost:3000/delete', {
                method: "DELETE",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    id: food.id,
                })
            })
            .then(resp => resp.json())
            .then(confirmation => UI.showDeleteSuccess(confirmation))
            })
            dish.append(button)
            ul.append(dish)
        })

        const post = document.createElement('div')
        post.setAttribute('class', 'post')
        post.append(addButton, name, ul)
        container.append(post)
    }

    static showDeleteSuccess(confirmation) {
        const showMessage = document.getElementById('delete-success')
        showMessage.innerText = confirmation.message
        setTimeout(function() {
            window.location.reload(1)
        }, 1500
        )
    }

    static showAddSuccess(confirmation) {
        const showMessage = document.getElementById('add-success')
        showMessage.innerText = confirmation.message
        setTimeout(function() {
            window.location.reload(1)
        }, 800
        )
    }

    static toggleDarkMode() {
        const background = document.getElementById('body')
        const posts = document.querySelectorAll('.post')

       const toggleButton = document.getElementById('toogle-dark-mode')
       toggleButton.className = 'border-4, border-light-blue-500, border-solid'
        
        toggleButton.addEventListener("click", function() {
            background.classList.toggle('darkMode');
            posts.classList.toggle('darkModePosts')
            })
    }

    static consolelog() {
        console.log("hello")
    }
}

我正在尝试将其导入到另一个

src/index.js

从'./ui.js‘导入UI

class API {
    constructor() {
        fetch('http://localhost:3000/')
        .then(res => res.json())
        .then(restaurants => {
            restaurants.map(restaurant => {
                UI.generateUI(restaurant)
            })
        })
    }
}

api = new API

UI.toggleDarkMode()

当我这样做时，我在浏览器中看不到我期望的结果。然而，当它们都在同一个文件中时，它仍然有效。

浏览器告诉我Uncaught SyntaxError: Cannot use import statement outside a module

我尝试使用require语法，但得到了错误Uncaught ReferenceError: require is not defined at index.js:1

Answer 1

你需要检查你正在使用的环境，

用于导出该类的语法是ES6模块语法。如果你在nodejs环境中调用它，它会抛出错误，因为nodejs使用了commonjs模块语法。

使用commonjs模块语法

//for exporting
module.exports = {
   // names of variables, classes, functions goes here
}

//for importing
const UI = require('path/to/your/module')

您还需要确保，如果导出是命名导出或默认导出，则导入语法将分别更改。

谢谢