Question

我正在尝试弄清楚这段代码的作用。我确实了解大图中的代码，但我也想了解小片段

定义类，以此作为员工对象的蓝图
推入技能数组的功能
我不明白persistentEmployeeDataToLocalStorage函数
该函数将员工的数据作为参数，并建立表，但是我不理解“虚拟”变量
1. 为什么localStorage的部分是代码的最后一部分？

class Employee {
    constructor(name, gender, department, email, skills) {
        this.name = name;
        this.gender = gender;
        this.department = department;
        this.email = email;
        this.skills = [];
    }

    addNewSkill(jsonOrderedIndex, skill) {
        this.skills.push(skill);
        this.persistEmployeeDataToLocalStorage(jsonOrderedIndex);
    }

    persistEmployeeDataToLocalStorage(jsonOrderedIndex) {
        let employeeListArray = JSON.parse(localStorage.getItem("Employee"));
        employeeListArray[jsonOrderedIndex] = this;
        var employeeListString = JSON.stringify(employeeListArray);
        localStorage.setItem("Employee", employeeListString);
        console.log(employeeListArray, jsonOrderedIndex, this,localStorage.getItem("Employee"));
    }
}

function buildTable(employees) {
    let table = document.createElement("table");
    table.appendChild(document.createElement("thead"));
    table.appendChild(document.createElement("tbody"));

    employees.forEach(function (employee, exmployeeIndex) {
        let row = document.createElement("tr");
        let dummy = new Employee(employee.name, employee.gender, employee.department, employee.email, employee.skills);
        let fields = Object.keys(dummy);
        if(0 === exmployeeIndex) { // first time in iteration, create table head here
            let headRow = document.createElement("tr");
            fields.forEach(function (field) {
                let headCell = document.createElement("th");
                headCell.textContent = field;
                headRow.appendChild(headCell);
            });
            table.querySelector("thead").appendChild(headRow);
        }

        fields.forEach(function (field, fieldIndex) {
            let cell = document.createElement("td");
            cell.textContent = employee[field];

            if(fieldIndex == fields.length -1) { // check for last occurence of fields
                let inputField = document.createElement('input');
                inputField.type = "text";
                cell.appendChild(inputField);

                let saveSkills = document.createElement('button');
                saveSkills.innerHTML = "save";
                cell.appendChild(saveSkills);

                saveSkills.addEventListener(
                    'click',
                    function(){
                        dummy.addNewSkill(
                            exmployeeIndex, // this is the index defined from exmployees.forEach...index
                            this.closest('td').querySelector('input').value
                        )
                    }
                );
            }

            row.appendChild(cell);
        });

        table.querySelector("tbody").appendChild(row);
    });
    return table;

}


//Employee Database "Localstorage"
if(localStorage.getItem("Employee") == null) {
    var employeeList = [];
    employeeList.push (new Employee("Simon", "Male", "HR", "SM1@cbs.dk"));
    employeeList.push (new Employee("Mads", "Male","IT", "MS@cbs.dk"));
    employeeList.push (new Employee("Jessica", "Female", "Sales", "JT@cbs.dk"));
    employeeList.push (new Employee("Benjamin", "Male","IT", "JT@cbs.dk"));

    var employeeListString = JSON.stringify(employeeList);
    localStorage.setItem("Employee", employeeListString);
    document.querySelector("#employees").appendChild(buildTable(employeeList));
} else {
    var employeeList = JSON.parse(localStorage.getItem("Employee"));
}


document.querySelector("#employees").appendChild(buildTable(employeeList));

了解从localStorage创建表的功能

0 个答案: