在另一个 JavaScript 文件中扩展 JavaScript 类时遇到问题 - GULP

Question

我正在创建一个简单的待办事项列表项目。其中，我有两个 HTML 文件和两个 javascript 文件。

1. index.html script.js
2. todoDetails.html todoDetail_script.js

在我的 script.js 中，我有一个名为“Store”的类，用于所有本地存储方法。

class Store{

    static getTodos() {
        let todos;

        if(localStorage.getItem('todos') == null) {
            todos = [];
        }
        else {
            todos = JSON.parse(localStorage.getItem('todos'));
        }

        return todos;
    }

    static addTodos(todo) {
        const todos = Store.getTodos();
        todos.push(todo);
        localStorage.setItem('todos', JSON.stringify(todos));
    }

    static removeTodo(taskName){
        const todos = Store.getTodos();

        todos.forEach((todo, index) => {
            if(todo.task === taskName)
            {
                todos.splice(index, 1);
            }
        });

        localStorage.setItem('todos', JSON.stringify(todos));
    }

    static showTodoDetail(taskName){
        window.location = 'todoDetail.html?taskName=' + taskName;
    }
}

在我的 todoDetail_script.js 中，我想扩展一个“Stroe”类来访问“getTodos()”方法。

class UI1 extends Store {
    static displayTodolist() {
       
        const todos = Store.getTodos(); 

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        var taskName = urlParams.get('taskName');


        todos.forEach((todo) => {
            if(todo.task == taskName) {
                document.getElementById('task_name').value = todo.task;
                document.getElementById('priority').value = todo.priority;
                document.getElementById('due_date').value = todo.duedate;
                document.getElementById('task_status').value = todo.status;
            }
        });
    }
}

document.addEventListener('DOMContentLoaded',UI1.displayTodolist());

我正在努力将 script.js 与 toDetails_script.js 链接起来。 script.js 也有许多其他类。我只想在 toDetail_script.js 中导入 script.js 文件。

我试过 GULP。我不知道哪个 npm gulp 依赖可以帮助我解决这个问题。

有人知道如何提供帮助吗？

Answer 1

所以你需要做几件事

首先你需要在 Store 类前面添加导出默认值

export default class Store{

static getTodos() {
    let todos;

    if(localStorage.getItem('todos') == null) {
        todos = [];
    }
    else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }

    return todos;
}

static addTodos(todo) {
    const todos = Store.getTodos();
    todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(todos));
}

static removeTodo(taskName){
    const todos = Store.getTodos();

    todos.forEach((todo, index) => {
        if(todo.task === taskName)
        {
            todos.splice(index, 1);
        }
    });

    localStorage.setItem('todos', JSON.stringify(todos));
}

 static showTodoDetail(taskName){
     window.location = 'todoDetail.html?taskName=' + taskName;
 }
}

然后在 todoDetail_script.js 你需要写在顶部

import Store from 'here write the path to script.js'

然后在 todoDetail_script.js 你可以使用

Store.getTodos();

在包含此 toDetail_script.js 的 html 文件中，除了 src 属性之外，还要添加 type="module" 属性。

注意：这是一个 ES6 模块功能，只能在 localhost 或 webserver 上使用，如果您直接在浏览器中打开 html，则无法使用。

要创建网络服务器，您可以使用此 chrome 扩展程序

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related?hl=en



 

Answer 2

从我的快速测试中，我发现创建类的对象更容易。所以在 todoDetail 中我会创建一个 Store 的实例：var miniStore = new Store()，然后你可以使用 miniStore 调用 Store 的方法，例如：miniStore.addTodos(x)

Answer 3

todoDetail_script.js 很可能在script.js 之前执行，因此当您的页面加载时，您应该在控制台中获得Uncaught ReferenceError: Store is not defined。

解决这个问题的最快方法是使用defer来确保您的文件以正确的顺序执行。

您可以阅读更多here。

试试这个：

<script src="path/to/your/js/files/script.js" defer></script>
<script src="path/to/your/js/files/todoDetail_script.js" defer></script>