基于html5数据属性值创建JavaScript对象是否是一种良好的实践？

我正在开发一个小型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>

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

---

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

我相信您所做的是一个很好的实践。“数据”属性的目的是用于，这正是您正在执行的操作。显然，您应该注意，潜在的攻击者将无法将自定义HTML注入到您的页面中，以恶意方式影响您的JavaScript代码，但这并不是什么新鲜事

---

我过去使用过的另一种方法是使用在服务器（NodeJS）和客户端上运行的视图类。服务器端和客户端都可以生成HTML，如果服务器已经生成了HTML，客户端可以将生成的对象附加到HTML。这可以通过插入数据属性来节省HTML的浪费，但除此之外，它并没有太大的不同，并且可能不适用于所有情况。

除了

stringToFunction

看起来模棱两可，它非常清楚您的代码在做什么这是非常有效的，许多javascript引擎，例如不引人注目的javascript等。这样做。这是一种很好的使用javascript的方式，为什么你会怀疑它呢？请注意，你的

[data-*]

属性应该连字符。但是，HTML属性不应包含大写字符。使用

数据页类

，而不是

数据页类

。

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