JS:UI中的类用法示例

Question

我正在学习es6类，我很难理解如何在视图中使用它。就像我有一个User类一样，它似乎更像是一个后端问题：

class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
giveIntro() {
return 'Hi, I am ' + this.name + ' and I am ' + this.age + ' years old'
}
}

1. 为什么要在前端创建用户，而不是将数据提供给后端存储&把它保存到可以持续的地方
2. 这怎么能为UI提供制作用户列表所需的数据

Answer 1

您可以将该类用作前端的模型。它将用于存储数据，然后在渲染时使用。

class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
giveIntro() {
return `Hi, my name is ${this.name} and I am ${this.age} years old.`
}
}
const users = [];
const addUser = (e) => {
const form = e.target;
const name = form.elements.name.value;
const age  = form.elements.age.value;
const user = new User(name, isFinite(age) ? age : undefined);
users.push(user);
form.reset();
renderUsers();
};
const renderUsers = () => {
const results = document.querySelector('.results');
const oldList = results.querySelector('ul');
if (oldList) {
results.removeChild(oldList);
}
const list = document.createElement('ul');
users.forEach(user => {
const item = document.createElement('li');
item.textContent = user.giveIntro();
list.append(item);
});
results.append(list);
};
const userForm = document.forms['person'];
userForm.elements.name.value = 'John Doe';
userForm.elements.age.value = 42;
userForm.addEventListener('submit', addUser);

form div > label {
display: inline-block;
width: 4em;
font-weight: bold;
}

<form name="person" onsubmit="return false;">
<div>
<label>Name</label>
<input type="text" name="name" />
</div>
<div>
<label>Age</label>
<input type="number" name="age" min="1" />
</div>
<button type="submit">Submit</button>
</form>
<hr />
<h2>Results</h2>
<div class="results"></div>

Answer 2

我可以给您举一个例子。如果您看到我们有许多Javascript库；让我们以ReactJS为例。

我们在前端将数据存储在一个名为state的变量中。我们在React中使用基于类的组件，其中包含它的状态，然后在前端本身中呈现数据。

另外，请注意，每次从后端获取用户数据都是一种过度消耗。因此，我们最初使用API调用获取所有后端数据，并在前端本身使用它，这样性能就会大大提高。