在创建Web小部件时，我应该在容器div上使用数据属性，还是应该在脚本中添加参数？

Question

我正在创建一个Web小部件。 所以基本上我从远程服务器加载脚本并在容器div中显示内容。 我需要向服务器发送额外的参数，例如过滤一些内容或选择显示，所以我有两个选项

传递脚本标记中的数据（我在代码中以dinamically方式生成脚本）

<script src="http://localhost/wordpress/?ai1ec_requirejs_widget&ai1ec=action:posterboard|no_navigation:true|request_type:jsonp"></script>
<div id="timely"></div>

将数据作为<div>数据属性传递

<script src="http://localhost/wordpress/?ai1ec_requirejs_widget&ai1ec=action:posterboard|no_navigation:true|request_type:jsonp"></script>
<div id="timely" data-action="view" data-no-navigation="true" data-request-type="jsonp" ></div>

截至目前我已经选择了第一种方法：如果我在请求脚本中包含数据，我不必等待DOM准备好获取<div>的值来过滤事件。 我正在加载的脚本只是一个小脚本，它异步加载requirejs。 一旦加载就需要js进行ajax调用以获取数据（不需要等待DOM准备就绪，因为我已经拥有了我需要的所有信息）并且当数据到达时，如果dom准备就绪，它将启动attacching事件处理程序。 否则，在调用获取数据之前，我必须等待DOM准备就绪

我的想法是，如果我包括

<script src="http://localhost/wordpress/?ai1ec_requirejs_widget&ai1ec=action:posterboard|no_navigation:true|request_type:jsonp"></script>

作为第一个脚本，它将开始下载require.js异步，然后更快地开始一切，但也许我完全错了。

你怎么看？

Answer 1

除了您提到的问题：

我会在脚本标记中传递数据，因为这样您就可以在配置窗口小部件时使用单点。 具有多个配置点可能会发生冲突或成为混淆的根源。

此外，似乎脚本需要进行所有过滤，而不是div （因为这是一个视图元素），所以从这个角度来看，让脚本处理所有信息也更有意义。 这样，您还可以最大限度地减少通过线路传输的数据量。 为什么要加载所有信息，然后在客户端过滤它，当你可以在服务器端做到这一点？

编辑

我误解了你的情景！ 我认为无论哪种方式都可行，老实说。 但是，您可以通过向div添加信息来最小化您编写的Javascript数量，我认为这些信息是正确的，因为它在语义上是合适的。 它还将为正在阅读代码的任何人提供更多上下文。