Javascript IndexedDB模块中断了功能

Javascript IndexedDB模块中断了功能,javascript,indexeddb,Javascript,Indexeddb,我决定为JavaScript经验构建一个PWA,并决定使用IndexedDB存储数据,因为该项目为已查找的玩家存储统计数据 我决定做一个调查,因为我认为那会很有用。我在没有正确的模块语法的情况下构建并测试了它,并将其作为要测试的函数集合。当我添加export以遵守适当的模块要求时,有些事情停止了工作 除了需要进行明显的代码重构外,我不明白为什么它在实际放入模块时不是函数,至少不明白为什么有些函数不工作,而另一些函数仍然工作 我的对象存储中当前有一条记录: 1:"{"stats

我决定为JavaScript经验构建一个PWA,并决定使用IndexedDB存储数据,因为该项目为已查找的玩家存储统计数据

我决定做一个调查,因为我认为那会很有用。我在没有正确的模块语法的情况下构建并测试了它,并将其作为要测试的函数集合。当我添加export以遵守适当的模块要求时,有些事情停止了工作

除了需要进行明显的代码重构外,我不明白为什么它在实际放入模块时不是函数,至少不明白为什么有些函数不工作,而另一些函数仍然工作

我的对象存储中当前有一条记录:

1:"{"stats":{"skill":{"Overall":{"Rank":420475,"Level":1703,"Experience":41536951},"Attack":{"Rank":365100,"Level":90,"Experience":5348211},"Defence":{"Rank":387640,"Level":86,"Experience":3643081},"Strength":{"Rank":681596,"Level":86,"Experience":3619845},"Hitpoints":{"Rank":568026,"Level":89,"Experience":5338699},"Ranged":{"Rank":615697,"Level":86,"Experience":3872192},"Prayer":{"Rank":543130,"Level":70,"Experience":765936},"Magic":{"Rank":858588,"Level":77,"Experience":1586816},"Cooking":{"Rank":533540,"Level":75,"Experience":1265604},"Woodcutting":{"Rank":128685,"Level":90,"Experience":5396564},"Fletching":{"Rank":534221,"Level":75,"Experience":1210429},"Fishing":{"Rank":325821,"Level":80,"Experience":2088438},"Firemaking":{"Rank":802393,"Level":65,"Experience":454386},"Crafting":{"Rank":526605,"Level":70,"Experience":771273},"Smithing":{"Rank":508338,"Level":70,"Experience":763913},"Mining":{"Rank":527787,"Level":70,"Experience":761613},"Herblore":{"Rank":400792,"Level":70,"Experience":750904},"Agility":{"Rank":715721,"Level":65,"Experience":466967},"Thieving":{"Rank":516257,"Level":61,"Experience":310438},"Slayer":{"Rank":597053,"Level":72,"Experience":989731},"Farming":{"Rank":396681,"Level":74,"Experience":1102421},"Runecrafting":{"Rank":238233,"Level":66,"Experience":526072},"Hunter":{"Rank":634376,"Level":61,"Experience":321529},"Construction":{"Rank":602088,"Level":55,"Experience":181889}},"boss":{"Abyssal Sire":{"Rank":0,"Participation":0},"Alchemical Hydra":{"Rank":0,"Participation":0},"Barrows Chests":{"Rank":0,"Participation":0},"Bryophyta":{"Rank":0,"Participation":0},"Callisto":{"Rank":0,"Participation":0},"Cerberus":{"Rank":0,"Participation":0},"Chambers of Xeric":{"Rank":0,"Participation":0},"Chambers of Xeric: Challenge Mode":{"Rank":0,"Participation":0},"Chaos Elemental":{"Rank":0,"Participation":0},"Chaos Fanatic":{"Rank":0,"Participation":0},"Commander Zilyana":{"Rank":0,"Participation":0},"Corporeal Beast":{"Rank":0,"Participation":0},"Crazy Archaeologist":{"Rank":0,"Participation":0},"Dagannoth Prime":{"Rank":0,"Participation":0},"Dagannoth Rex":{"Rank":0,"Participation":0},"Dagannoth Supreme":{"Rank":0,"Participation":0},"Deranged Archaeologist":{"Rank":0,"Participation":0},"General Graardor":{"Rank":0,"Participation":0},"Giant Mole":{"Rank":0,"Participation":0},"Grotesque Guardians":{"Rank":0,"Participation":0},"Hespori":{"Rank":0,"Participation":0},"Kalphite Queen":{"Rank":0,"Participation":0},"King Black Dragon":{"Rank":0,"Participation":0},"Kraken":{"Rank":0,"Participation":0},"Kree'Arra":{"Rank":0,"Participation":0},"K'ril Tsutsaroth":{"Rank":0,"Participation":0},"Mimic":{"Rank":0,"Participation":0},"Nightmare":{"Rank":0,"Participation":0},"Obor":{"Rank":0,"Participation":0},"Sarachnis":{"Rank":0,"Participation":0},"Scorpia":{"Rank":0,"Participation":0},"Skotizo":{"Rank":0,"Participation":0},"The Gauntlet":{"Rank":0,"Participation":0},"The Corrupted Gauntlet":{"Rank":0,"Participation":0},"Theatre of Blood":{"Rank":0,"Participation":0},"Thermonuclear Smoke Devil":{"Rank":0,"Participation":0},"TzKal-Zuk":{"Rank":0,"Participation":0},"TzTok-Jad":{"Rank":0,"Participation":0},"Venenatis":{"Rank":0,"Participation":0},"Vet'ion":{"Rank":0,"Participation":0},"Vorkath":{"Rank":0,"Participation":0},"Wintertodt":{"Rank":0,"Participation":0},"Zalcano":{"Rank":0,"Participation":0},"Zulrah":{"Rank":0,"Participation":0}},"activity":{"League Points":{"Rank":0,"Participation":0},"Bounty Hunter - Hunter":{"Rank":0,"Participation":0},"Bounty Hunter - Rogue":{"Rank":0,"Participation":0},"Clue Scrolls (all)":{"Rank":1306445,"Participation":2},"Clue Scrolls (beginner)":{"Rank":798671,"Participation":1},"Clue Scrolls (easy)":{"Rank":0,"Participation":0},"Clue Scrolls (medium)":{"Rank":961590,"Participation":1},"Clue Scrolls (hard)":{"Rank":0,"Participation":0},"Clue Scrolls (elite)":{"Rank":0,"Participation":0},"Clue Scrolls (master)":{"Rank":0,"Participation":0},"LMS - Rank":{"Rank":0,"Participation":0}}},"username":"limerain","type":"Standard","timestamp":1606315205012,"id":1}"
模块-

/**
 * Opens a connection to an indexedDB database
 * @param {string} database_name Name of indexedDB to be opened
 * @param {number} database_version Version of database to be opened
 * @param {function} upgrade_function Function to be executed if database needs to be upgraded
 * @returns {Promise} Resolve => IDBDatabase | Reject => Error
 */
function openDB(database_name, database_version, upgrade_function) {
    return new Promise(function (resolve, reject) {
        let request = indexedDB.open(database_name, database_version);

        request.onsuccess = function () {
            console.log("Database opened successfully")
            resolve(request.result);
        }

        request.onerror = function (event) {
            reject(`Error: openDB - Request Failed - Supplied Data {${database_name},${database_version},${upgrade_function}} Code: ${event.target.errorCode} Error: ${request.error}`)
        };

        request.onupgradeneeded = function (event) {
            console.log('OnUpgradeNeeded - Called')
            upgrade_function(event.target.result)
                .then(console.log("Database Upgrade Successful"))
                .catch((reason) => {
                    reject(`Error: openDB - Database Upgrade Failed - Reason: ${reason}, Supplied Data {${database_name},${database_version},${upgrade_function}} Code: ${event.target.errorCode} Error: ${request.error}`)
                })
        };
    });
}

/**
 * Adds record objects to the specificed objectStore
 * @param {IDBDatabase} database Initiliazed database
 * @param {string} storeName Name of objectStore where transactions will be occurring
 * @param {[object]} data Object to be inserted into the objectStore
 * @returns {Promise} Resolve => String | Reject => Error
 */
function addRecords(database, storeName, data) {
    return new Promise(function (resolve, reject) {
        let transaction = database.transaction(storeName, "readwrite");

        transaction.oncomplete = function () {
            console.log("Add Transaction Successful.");
            resolve("Add Transaction Succesful")
        };

        transaction.onabort = function (event) {
            reject(`Error: addRecord - Transaction Aborted - Supplied Data: {${database},${storeName},${data}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        }

        transaction.onerror = function (event) {
            reject(`Error: addRecord - Transaction Failed - Supplied Data: {${database},${storeName},${data}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

        let objectStore = transaction.objectStore(storeName);

        data.forEach(record => {
            let request = objectStore.add(record);

            request.onsuccess = function () {
                console.log("Add Request Succesful");
            };

            request.onerror = function (event) {
                reject(`Error: addRecord - Request Failed: Supplied Data: {${database_name},${database_version},${upgrade_function}} Code: ${event.target.errorCode} Error: ${request.error} Record: ${record}`)
            };

        })

    });
}

/**
 * Deletes records on a given Index and key from the specified objectStore
 * @param {IDBDatabase} database Initialized database
 * @param {string} storeName Name of ObjectStore where transactions will be occurring
 * @param {string} indexName An Index from a provided ObjectStore
 * @param {any} key Key being looked for
 */
function deleteRecords(database, storeName, indexName, key) {
    return new Promise(function (resolve, reject) {
        let transaction = database.transaction(storeName, "readwrite");

        transaction.oncomplete = function () {
            console.log("Delete Transaction Successful.");
            resolve("Records Deletion Successful")
        };

        transaction.onabort = function (event) {
            reject(`Error: deleteRecords - Transaction Aborted - Supplied Data: {${database},${storeName},${indexName},${key} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        }

        transaction.onerror = function (event) {
            reject(`Error: deleteRecords - Transaction Failed - Supplied Data: {${database},${storeName},${indexName},${key} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

        let objectStoreCursor = transaction.objectStore(storeName).index(indexName).openCursor();

        objectStoreCursor.onsuccess = function (event) {
            let cursor = event.target.result;
            if (cursor) {
                if (cursor.value[indexName] === key) {
                    let request = cursor.delete();
                    request.onsuccess = function () {
                        console.log('Record Deleted:', cursor.value);
                    }
                    request.onerror = function (event) {
                        reject(`Error: deleteRecords - Request Failed - Cursor: ${cursor} Supplied Data: {${database},${storeName},${indexName},${key} Code: ${event.target.errorCode} Error: ${event.target.error}`)
                    }
                }
                cursor.continue();
            }
            console.log("Delete Request(s) Successful")
        }

        objectStoreCursor.onerror = function (event) {
            resolve(`Error: deleteRecords - Cursor Failed - Supplied Data: {${database},${storeName},${indexName},${key} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        }
    });
}

/**
 * Returns all records from the provided ObjectStore searching on the provided Index
 * @param {IDBDatabase} database Initialized database
 * @param {string} storeName Name of ObjectStore where transactions will be occurring
 * @param {string} indexName An Index from a provided ObjectStore
 * @param {IDBKeyRange | any} key Key being looked for
 * @returns {Promise} Resolve => Array of Objects | Reject => Reason
 */
function getRecordsOnIndex(database, storeName, indexName, key) {
    return new Promise(function (resolve, reject) {
        let transaction = database.transaction(storeName, "readonly");

        transaction.oncomplete = function () {
            console.log("Get Transaction Successful.");
        };

        transaction.onabort = function (event) {
            reject(`Error: getRecordsOnIndex - Transaction Aborted - Supplied Data: {${database},${storeName},${indexName},${key}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        }

        transaction.onerror = function (event) {
            reject(`Error: getRecordsOnIndex - Transaction Failed - Supplied Data: {${database},${storeName},${indexName},${key}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

        let request = transaction.objectStore(storeName).index(indexName).getAll(key);

        request.onsuccess = function (event) {
            console.log("Get All Request Succesful");
            resolve(event.target.result)
        };

        request.onerror = function (event) {
            reject(`Error: getRecordsOnIndex - Request Failed - Supplied Data: {${database},${storeName},${indexName},${key}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

    });
}

/**
 * Returns all records from the provided ObjectStore
 * @param database Initialized database
 * @param storeName  Name of ObjectStore where transactions will be occurring
 * @returns {Promise} Resolve => Array of Object | Reject => Reason
 */
function getRecordsOnObjectStore(database, storeName) {
    return new Promise(function (resolve, reject) {
        let transaction = database.transaction(storeName, "readonly");

        transaction.oncomplete = function () {
            console.log("Get All Transaction Successful.");
        };

        transaction.onabort = function (event) {
            reject(`Error: getRecordsOnObjectStore - Transaction Aborted - Supplied Data: {${database},${storeName}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        }

        transaction.onerror = function (event) {
            reject(`Error: getRecordsOnObjectStore - Transaction Failed - Supplied Data: {${database},${storeName}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

        let request = transaction.objectStore(storeName).getAll();

        request.onsuccess = function (event) {
            console.log("Get All Request Succesful");
            resolve(event.target.result)
        };

        request.onerror = function (event) {
            reject(`Error: getRecordsOnObjectStore - Request Failed - Supplied Data: {${database},${storeName}} Code: ${event.target.errorCode} Error: ${event.target.error}`)
        };

    })
}

export {
    openDB,
    addRecords,
    deleteRecords,
    getRecordsOnIndex,
    getRecordsOnObjectStore
}
包含共享数据或功能的My utilities模块

function upgradeDB(database) {
    return new Promise(function (resolve, reject) {
        //Create Table
        if (!database.objectStoreNames.contains('records')) {
            let records_table = database.createObjectStore('records', { keyPath: "id", autoIncrement: true })
            records_table.createIndex('username', 'username', { unique: false });
            records_table.createIndex('type', 'type', { unique: false });
            records_table.createIndex('id', 'id', { unique: true });
            resolve("Upgrade Successful.");
        } else {
            reject("ObjectStore already exists?")
        }
    });
}

function parseDate(UTC) {
  let date = new Date(UTC);
  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
}

const HISCORE_PROFILE = [
    "Overall",
    "Attack",
    "Defence",
    "Strength",
    "Hitpoints",
    "Ranged",
    "Prayer",
    "Magic",
    "Cooking",
    "Woodcutting",
    "Fletching",
    "Fishing",
    "Firemaking",
    "Crafting",
    "Smithing",
    "Mining",
    "Herblore",
    "Agility",
    "Thieving",
    "Slayer",
    "Farming",
    "Runecrafting",
    "Hunter",
    "Construction",
    "League Points",
    "Bounty Hunter - Hunter",
    "Bounty Hunter - Rogue",
    "Clue Scrolls (all)",
    "Clue Scrolls (beginner)",
    "Clue Scrolls (easy)",
    "Clue Scrolls (medium)",
    "Clue Scrolls (hard)",
    "Clue Scrolls (elite)",
    "Clue Scrolls (master)",
    "LMS - Rank",
    "Abyssal Sire",
    "Alchemical Hydra",
    "Barrows Chests",
    "Bryophyta",
    "Callisto",
    "Cerberus",
    "Chambers of Xeric",
    "Chambers of Xeric: Challenge Mode",
    "Chaos Elemental",
    "Chaos Fanatic",
    "Commander Zilyana",
    "Corporeal Beast",
    "Crazy Archaeologist",
    "Dagannoth Prime",
    "Dagannoth Rex",
    "Dagannoth Supreme",
    "Deranged Archaeologist",
    "General Graardor",
    "Giant Mole",
    "Grotesque Guardians",
    "Hespori",
    "Kalphite Queen",
    "King Black Dragon",
    "Kraken",
    "Kree'Arra",
    "K'ril Tsutsaroth",
    "Mimic",
    "Nightmare",
    "Obor",
    "Sarachnis",
    "Scorpia",
    "Skotizo",
    "The Gauntlet",
    "The Corrupted Gauntlet",
    "Theatre of Blood",
    "Thermonuclear Smoke Devil",
    "TzKal-Zuk",
    "TzTok-Jad",
    "Venenatis",
    "Vet'ion",
    "Vorkath",
    "Wintertodt",
    "Zalcano",
    "Zulrah",
  ];
  
  const SKILLS = [
    "Overall",
    "Attack",
    "Defence",
    "Strength",
    "Hitpoints",
    "Ranged",
    "Prayer",
    "Magic",
    "Cooking",
    "Woodcutting",
    "Fletching",
    "Fishing",
    "Firemaking",
    "Crafting",
    "Smithing",
    "Mining",
    "Herblore",
    "Agility",
    "Thieving",
    "Slayer",
    "Farming",
    "Runecrafting",
    "Hunter",
    "Construction",
  ];
  
  const BOSS_KILLS = [
    "Abyssal Sire",
    "Alchemical Hydra",
    "Barrows Chests",
    "Bryophyta",
    "Callisto",
    "Cerberus",
    "Chambers of Xeric",
    "Chambers of Xeric: Challenge Mode",
    "Chaos Elemental",
    "Chaos Fanatic",
    "Commander Zilyana",
    "Corporeal Beast",
    "Crazy Archaeologist",
    "Dagannoth Prime",
    "Dagannoth Rex",
    "Dagannoth Supreme",
    "Deranged Archaeologist",
    "General Graardor",
    "Giant Mole",
    "Grotesque Guardians",
    "Hespori",
    "Kalphite Queen",
    "King Black Dragon",
    "Kraken",
    "Kree'Arra",
    "K'ril Tsutsaroth",
    "Mimic",
    "Nightmare",
    "Obor",
    "Sarachnis",
    "Scorpia",
    "Skotizo",
    "The Gauntlet",
    "The Corrupted Gauntlet",
    "Theatre of Blood",
    "Thermonuclear Smoke Devil",
    "TzKal-Zuk",
    "TzTok-Jad",
    "Venenatis",
    "Vet'ion",
    "Vorkath",
    "Wintertodt",
    "Zalcano",
    "Zulrah",
  ];
  
  const ACTIVITIES = [
    "League Points",
    "Bounty Hunter - Hunter",
    "Bounty Hunter - Rogue",
    "Clue Scrolls (all)",
    "Clue Scrolls (beginner)",
    "Clue Scrolls (easy)",
    "Clue Scrolls (medium)",
    "Clue Scrolls (hard)",
    "Clue Scrolls (elite)",
    "Clue Scrolls (master)",
    "LMS - Rank",
  ];
  
  const DATABASE_NAME = "runescape_tracker_pwa";

export {upgradeDB, parseDate, HISCORE_PROFILE, SKILLS, BOSS_KILLS, ACTIVITIES, DATABASE_NAME}
页面上的“我的模块”以删除/查看记录

import { openDB, deleteRecords, getRecordsOnObjectStore } from "./libraries/IndexedDB_Wrapper_Promises/database.js"
import { DATABASE_NAME, upgradeDB, parseDate } from "./utilities.js"

const OBJECTSTORE = "records";

function createRecordEntry(value) {

    let div = "";
    Object.entries(value).forEach(([key, value]) => {
        div += `
        <div class="recordEntry">
            <div class="button-group">
                <button data-id=${value.id} class="btnView">View</button>
                <button data-id=${value.id} class="btnDelete">Delete</button>
            </div>
            <div>${parseDate(parseInt(key))}</div>
        </div>
        `
    });

    return div;
}

function createTypeEntry(value) {

    let div = "";

    Object.entries(value).forEach(([key, value]) => {
        div += `
        <div class="typeEntry">
        <h3>${key}</h3>
        ${createRecordEntry(value)}
        </div>
    `
    })

    return div;
}

function createElement(username, value) {
    let div = document.createElement("div");
    div.className = "collection"
    div.innerHTML = `
            <h2>${username}</h2>
            ${createTypeEntry(value)}
`
    return div;
}

function buildResultSet(data) {

    let list = {};

    data.forEach(row => {
        if (list.hasOwnProperty(row.username)) {
            list[row.username][row.type] = { ...list[row.username][row.type], [row.timestamp]: { 'stats': row.stats, 'id': row.id } };
        } else {
            list = { ...list, [row.username]: { [row.type]: { [row.timestamp]: { 'stats': row.stats, 'id': row.id } } } };
        }
    });

    return list;
}

function deleteRecord(event) {
    openDB(DATABASE_NAME, 1, upgradeDB)
        .then(database => {
            console.log(database)
            deleteRecords(database, "records", "id",1)
                .then(result => { console.log(result) })
                .catch(result => { throw result });
        })
        .catch(result => { throw result })

}

function viewRecord(event) {
    window.location.assign(`view.html?id=${parseInt(event.target.dataset.id)}`)
}

window.onload = function () {
    openDB(DATABASE_NAME, 1, upgradeDB)
        .then((database) => {
            getRecordsOnObjectStore(database, OBJECTSTORE)
                .then((results) => {
                    let resultSet = buildResultSet(results)
                    Object.entries(resultSet).forEach(([key, value]) => {
                        document.getElementById("container").appendChild(createElement(key, value));
                    });

                    let deleteButtons = document.getElementsByClassName("btnDelete");

                    Array.from(deleteButtons).forEach(button => {
                        button.addEventListener("click", deleteRecord)
                    });

                    let viewButtons = document.getElementsByClassName("btnView");

                    Array.from(viewButtons).forEach(button => {
                        button.addEventListener("click", viewRecord)
                    });

                })
                .catch((result) => {
                    throw result;
                });
        })
        .catch((result) => {
            throw result;
        });
};

为特定记录构建页面的我的模块

import {openDB, getRecordsOnIndex} from "./libraries/IndexedDB_Wrapper_Promises/database.js"
import {DATABASE_NAME,upgradeDB,parseDate} from "./utilities.js"

window.onload = function () {
    let skillsTable = document.getElementById("skillTable"), otherTable = document.getElementById("otherTable"), usernameHeader = document.getElementById("usernameHeader"), recordTimestamp = document.getElementById("recordTimestamp"), recordID = document.getElementById("recordID");

    const params = new URLSearchParams(window.location.search)
    console.log(params.get('id'))

    openDB(DATABASE_NAME, 1, upgradeDB)
        .then((database) => {
            getRecordsOnIndex(database, 'records', 'id', parseInt(params.get('id')))
                .then((results) => {
                    console.log(results)
                    if(results.length == 1){
                        usernameHeader.innerHTML = results[0].username
                        recordTimestamp.innerHTML = `Date: ${parseDate(results[0].timestamp)}`
                        recordID.innerHTML = `ID: ${results[0].id}`
                        buildTable(results[0].stats)
                    }else{
                        console.error("No results returned for the provided ID")
                    }
                })
                .catch((result) => {
                    throw result;
                });
        })
        .catch((result) => {
            throw result;
        });

    function buildTable(data) {
        //skill,boss,game
        Object.entries(data).forEach(([key, values]) => {
            //skill/activity
            Object.entries(values).forEach(([entry, values2]) => {
                //determine which table it falls under
                Object.keys(values2).length == 3
                    ? (newRow = skillsTable.insertRow(-1))
                    : Object.keys(values2).length == 2
                        ? (newRow = otherTable.insertRow(-1))
                        : _throw(
                            `Error: Unknown Data Structure In buildTable: \n Key: ${key} \n Value: ${values2}`
                        );
                newRow.className = entry;
                newRow.insertCell(-1).outerHTML = `<th scope="row">${entry}</th>`;

                //newRow.insertCell(-1).appendChild(document.createTextNode(entry));
                //rank:x,level/participation/experience
                Object.entries(values2).forEach(([col, value]) => {
                    newRow.insertCell(-1).appendChild(document.createTextNode(value));
                });
            });
        });
    }
};

模块语法在哪里?它与工作代码有何不同?还有什么不起作用,会出现什么错误?抱歉,功能上的差异-删除-不删除任何内容,当光标不应为getRecordsOnIndex时为null-返回一个空数组,而不是当前使用中带有单个对象的数组(索引是主键)。代码中没有错误,当我添加导出时,一些功能刚刚被破坏。请将您的问题包括所有相关代码本身,而不仅仅是它的链接。所有模块现在都在帖子中,我正在尝试尽可能多地删除绒毛,抱歉!我想一个模块就足够了。但是,工作代码又有什么不同呢?你是说一旦你从每个模块中删除
export{…}
声明,它就会神奇地开始工作?在切换到ES6之前,您是如何导出和导入函数的?模块语法在哪里?它与工作代码有何不同?还有什么不起作用,会出现什么错误?抱歉,功能上的差异-删除-不删除任何内容,当光标不应为getRecordsOnIndex时为null-返回一个空数组,而不是当前使用中带有单个对象的数组(索引是主键)。代码中没有错误,当我添加导出时,一些功能刚刚被破坏。请将您的问题包括所有相关代码本身,而不仅仅是它的链接。所有模块现在都在帖子中,我正在尝试尽可能多地删除绒毛,抱歉!我想一个模块就足够了。但是,工作代码又有什么不同呢?你是说一旦你从每个模块中删除
export{…}
声明,它就会神奇地开始工作?在切换到ES6之前,您是如何导出和导入功能的?
import {openDB, getRecordsOnIndex} from "./libraries/IndexedDB_Wrapper_Promises/database.js"
import {DATABASE_NAME,upgradeDB,parseDate} from "./utilities.js"

window.onload = function () {
    let skillsTable = document.getElementById("skillTable"), otherTable = document.getElementById("otherTable"), usernameHeader = document.getElementById("usernameHeader"), recordTimestamp = document.getElementById("recordTimestamp"), recordID = document.getElementById("recordID");

    const params = new URLSearchParams(window.location.search)
    console.log(params.get('id'))

    openDB(DATABASE_NAME, 1, upgradeDB)
        .then((database) => {
            getRecordsOnIndex(database, 'records', 'id', parseInt(params.get('id')))
                .then((results) => {
                    console.log(results)
                    if(results.length == 1){
                        usernameHeader.innerHTML = results[0].username
                        recordTimestamp.innerHTML = `Date: ${parseDate(results[0].timestamp)}`
                        recordID.innerHTML = `ID: ${results[0].id}`
                        buildTable(results[0].stats)
                    }else{
                        console.error("No results returned for the provided ID")
                    }
                })
                .catch((result) => {
                    throw result;
                });
        })
        .catch((result) => {
            throw result;
        });

    function buildTable(data) {
        //skill,boss,game
        Object.entries(data).forEach(([key, values]) => {
            //skill/activity
            Object.entries(values).forEach(([entry, values2]) => {
                //determine which table it falls under
                Object.keys(values2).length == 3
                    ? (newRow = skillsTable.insertRow(-1))
                    : Object.keys(values2).length == 2
                        ? (newRow = otherTable.insertRow(-1))
                        : _throw(
                            `Error: Unknown Data Structure In buildTable: \n Key: ${key} \n Value: ${values2}`
                        );
                newRow.className = entry;
                newRow.insertCell(-1).outerHTML = `<th scope="row">${entry}</th>`;

                //newRow.insertCell(-1).appendChild(document.createTextNode(entry));
                //rank:x,level/participation/experience
                Object.entries(values2).forEach(([col, value]) => {
                    newRow.insertCell(-1).appendChild(document.createTextNode(value));
                });
            });
        });
    }
};
openDB(DATABASE_NAME, 1, upgradeDB)
        .then((database) => {
            getRecordsOnIndex(database, 'records', 'id', parseInt(params.get('id')))
                .then((results) => {
                    console.log(results)
                    if(results.length == 1){
                        usernameHeader.innerHTML = results[0].username
                        recordTimestamp.innerHTML = `Date: ${parseDate(results[0].timestamp)}`
                        recordID.innerHTML = `ID: ${results[0].id}`
                        buildTable(results[0].stats)
                    }else{
                        console.error("No results returned for the provided ID")
                    }
                })
                .catch((result) => {
                    throw result;
                });
        })
        .catch((result) => {
            throw result;
        });