javascript - 基于 html5 数据属性值创建 JavaScript 对象是一个好习惯吗？

Question

我正在开发一个小型 HTML/JavaScript 应用程序，用户可以在其中浏览不同的内容而无需刷新页面。我通过在用户浏览应用程序时显示和隐藏 div 将 div 用作“页面”。两个页面之间会出现一个小动画(如淡入淡出或滑动)。当动画完成并且“页面”可见时，将触发触发器。

每个页面在触发时都会执行自己的行为(例如播放视频/动画/显示一些文本)。每个页面(div)都有自己的 JavaScript 类链接到它。 JavaScript 类的类名存储在名为 data-pageClass 的数据属性中:

<div id="page1" class="pn-page intro" data-pageClass="IntroPage">
    Page 1: introduction text
</div>
<div id="page2" class="pn-page page2" data-pageClass="VideoPage">
    Page 2: playing a video here
</div>

处理导航的类通过循环 html 结构并使用 data 属性来标识要创建的类来创建页面的类。我使用 this question on StackOverflow 中描述的“stringToFunction”函数

循环代码:

$("#pages .pn-page").each(function (i, el) {
    var PageClass = stringToFunction(el.getAttribute("data-pageClass"));
    var newPage = new PageClass(el);
    _this.pages.push(newPage)
});

为了简单起见，我省略了所有其他代码。不清楚时请告诉我。

所以我的问题是，以这种方式“动态”创建对象是否是不好的做法。我认为将 div 链接到自定义 javascript 类非常有用(有点像 DOM)。

Answer 1

我相信你正在做的事情是很好的做法。 data 属性旨在用于 embed custom data on a page ，这正是您正在做的事情。显然，您应该注意潜在的攻击者将无法将自定义 HTML 注入(inject)您的页面以恶意方式影响您的 JavaScript 代码，但这并不是什么新鲜事。

我过去使用的另一种方法是使用在服务器(NodeJS)和客户端上运行的 View 类。服务器和客户端都能够生成 HTML，并且如果服务器已经生成了 HTML，则客户端能够将生成的对象附加到 HTML。通过插入数据属性，这可以避免 HTML 乱七八糟，但除此之外，它并没有太大的不同，而且它可能并不适用于所有情况。