2

我正在开发一个小型 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 属性来识别要创建的类来创建页面的类。我使用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）非常有用。

4

1 回答 1

2

我相信你所做的是好的做法。data 属性旨在用于在页面上嵌入自定义数据，这正是您正在做的。您显然应该注意潜在的攻击者将无法将自定义 HTML 注入您的页面，以便以恶意方式影响您的 JavaScript 代码，但这并不是什么新鲜事。

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

于 2013-11-11T14:04:46.673 回答