我打算第五次建立一个“员工管理系统”用于实践目的。每次我练习不同的编码方式（希望及时我会擅长它）。
稍后我将添加一个带有一些文本输入的表单和一个按钮，该按钮将注册新的 us Employee 并将其显示在列表中。
但是这次我正在使用“Web App”定向来执行此代码。我想主要通过 Javascript 创建我所有的 HTML。我在其中创建了一个模板class Item，最终将注入一些 html 到index.html
在这个系统中，我有3 种类型/类别的员工：
- 老师
- 开发商
- 首席执行官
每种员工类型都有不同的方法。但是所有类型的员工都有两种方法。
sayHello()和checkIn()。这要归功于class Employee所有其他类型的继承。
反正..
在Item.js中，我希望将渲染函数分解为两个较小的函数：
renderContainer() - 用于为用户详细信息创建父容器的模板。
renderDetails() - 用户详细信息的模板。
我尝试在我想检查返回值的地方使用 console.log 对其进行调试。我对调试器及其优点还不是很熟悉。
你能告诉我的代码有什么问题吗？这条线有什么问题？ this.container.find(".employee").html($details);
为什么它的价值没有被正确地传递到renderContainer()它被调用的地方？
git仓库： https ://github.com/ueeieiie/ems3
script.js文件：
require('../styles/styles.scss');
import Employee from './Employee.js';
import Teacher from './Teacher.js';
import Developer from './Developer.js';
import CEO from './CEO.js';
import Item from './Item.js';
var $ = require('jquery');
// udi
var udi = new CEO("Udi", "Cinephile", "CEO");
var udiItem = new Item(udi);
udiItem.renderContainer();
// rani
var rani = new Developer("rani", "Jaggling", "Developer");
var raniItem = new Item(rani);
raniItem.renderContainer();
CEO.js文件：
import Employee from './Employee.js';
export default class CEO extends Employee {
constructor(name, skill, title){
super(name, skill, title="CEO")
}
fireEveryone(){
console.log(this.name + " has fired EVERYONE!");
}
}
Developer.js文件：
import Employee from './Employee.js';
export default class Developer extends Employee {
constructor(name, skill, title){
super(name, skill, title="Developer");
}
pushCode(){
console.log(this.name + " has pushed some code.");
}
}
Employee.js文件：
export default class Employee {
constructor(name, skill, title){
this.name = name;
this.skill = skill;
this.title = title;
}
sayHello(){
console.log(this.name + " said hello");
}
checkIn(){
console.log(new Date());
}
}
Item.js文件：
var id = 0;
var $ = require('jquery');
export default class Item{
constructor(user){
this.id = this.getId();
this.name = user.name;
this.skill = user.skill;
this.title = user.title;
}
renderContainer(){
var $container = $(`
<dl class="employee">
</dl>
`);
this.container = $container;
this.renderDetails();
$('.content').append($container);
}
renderDetails(){
var $details = $(`
<p>
<dt>ID: </dt>
<dd>${this.id}</dd>
</p>
<p>
<dt>Name: </dt>
<dd>${this.name}</dd>
</p>
<p>
<dt>Skill: </dt>
<dd>${this.skill}</dd>
</p>
<p>
<dt>Title: </dt>
<dd>${this.title}</dd>
</p>
`);
this.container.find(".employee").html($details);
// $('.content').append($details); //works fine with no need of renderContainer()
}
getId(){
return id++;
}
}
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="content">
<!-- template comes here -->
</div>
</body>
</html>