javascript - this.appendChild (articleItemElement) 上的 this 关键字;参考?
问题描述
简而言之,我有一个 javascript 文件,其中包含一个数据数组,其中有 4 个对象,每个对象由 4 个属性组成,然后第二个文件是......
===========================================
(article-item.js)
class ArticleItem extends HTMLElement {
set article(article) {
this._article = article;
this.render();
}
render() {
this.innerHTML = `
<img class="featured-image" src="${this._article.featuredImage}">
<div class="article-info">
<h2><a href="${this._article.id}">${this._article.title}</a></h2>
<p>${this._article.description}</p>
</div>
`;
}
}
customElements.define("article-item", ArticleItem);
==================================================== ===
(article-list.js)
import "./article-item.js"
class ArticleList extends HTMLElement {
set articles(articles) {
this._articles = articles;
this.render();
}
render() {
this._articles.forEach(article => {
const articleItemElement = document.createElement("article-item");
// memanggil fungsi setter article() pada article-item.
articleItemElement.article = article;
this.appendChild(articleItemElement);
})
}
}
customElements.define("article-list", ArticleList);
==================================================== ==========
今天我在学习嵌套自定义元素,我很了解程序流程是如何运行的。但是有些部分我还是不明白,比如this line/keyword this在(this.appendChild(articleItemElement);)中做了什么,然后在(articleItemElement.article = article;)我明白了只能赋值数据如果使用访问器属性或 getter / setter 技术,则通过访问 .article 属性通过 JavaScript 语法自定义元素。部分(=文章)的功能是什么?或者如果我错了,请解释该行的功能
我真的希望并感谢是否有人会为我解释
解决方案
推荐阅读
- node.js - 如何从我的 Nodejs 程序进行此 API 调用?
- python - 根据 pandas 中的原始值计算运行总计
- javascript - 在 Vuejs 的 TextBox/Input 中更改或输入值
- python - Windows 中 python 的 termios 模块是什么?
- javascript - 如何在 HTML 输入文本占位符中显示特定的 JS 数组元素?
- laravel - 尝试使用laravel在excel中导出大数据时显示超时
- docker - gitlab ci pull_policy 用于仅限本地的 docker 图像
- python - 合并具有不均匀时间序列数据的数据帧
- android - 如何修复小米红米note 8 pro手机固件?
- flutter - 我卸载并重新安装了 VS Code Flutter 扩展,现在每次打开 VS Code 时,Flutter Daemon 都无法启动