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

Question

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

index.html <---> script.js
todoDetails.html <---> todoDetail_script.js

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

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”class 来访问“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 还有许多其他 class。我只想在 toDetail_script.js.

中导入 script.js 文件

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

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

Answer 1

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

Answer 2

所以你需要做几件事

首先需要在 Store 前面添加 export default class

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();

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

注意：这是一个 ES6 模块特性，只能在本地主机或网络服务器上工作，如果您直接在浏览器中打开 html，则不会工作。

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

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

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>

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

Having issue with extending JavaScript class in another JavaScript file - GULP

javascript

html

gulp